#1テーマ 「パララックス」 サンプルコード

[konitter]

@w3gjp さんにサンプルコードを用意してもらいました。
https://w3g.jp/sample/jsgirl/parallax

これをベースにみんなもコードを書いてみてほしいです。
ファイルはどこかにアップして、URL含めここに投稿してください。

難易度の調整などを議論していきましょう。

[kamiyam]

だいぶ詰めが甘いですが、締め切りなので一旦上げます。(PCのみです

https://dl.dropboxusercontent.com/u/20608314/demo/jsgirls01/parallax.html

■ 制作にあたって
･ベースのシンプルさはとてもバランスがとれていると思いますが、いろんなサンプルがあっても良いかと思い敢えて壊しました。
･汎用性を持たせたかったので、設計から変更しています。
･サンプルよりスムーズに動かしたかった感。

[kamiyam]

parallax 仕様

画像

cloud_1.png (雲画像)

スクロールに対する動きは雲の中で一番目に早い(手前にあるイメージ)

cloud_2.png (雲画像)

スクロールに対する動きは雲の中で二番目に早い

cloud_3.png (雲画像)

スクロールに対する動きは雲の中で一番遅く、最下段のビル･木の背景となるよう考慮する

tree.png (木画像)

要素を2つ用意、2本の表示とする(tree_left/tree_right)

スクロール終盤に表示し、1本(tree_left)は左、1本(tree_right)は右へと移動する

building.png (ビル画像)

スクロール終盤に表示する

配置

cloud_1

• スクロール 最上段時 位置

  top: 100%;
  left: center;

• スクロール 最下段時 位置

  top: 指定なし;
  left: center;

cloud_2

• スクロール 最上段時 位置

  top: 80%;
  left: center;

• スクロール 最下段時 位置

  top: 指定なし;
  left: center;

cloud_3

• スクロール 最上段時 位置

  top: 80%;
  left: center;

• スクロール 最下段時 位置

  top: 指定なし;
  left: center;

雲(cloud_1,2,3)について

• 各要素単体

  margin-left: - 画像の半分;

• 雲すべて

  position: fixed;
  left: 50%;

tree_left, tree_right, building

ビル･木(building/tree_left/tree_right)について

最下段時、ブラウザ内の位置関係は下記の配置とする

  ← ブラウザ左端                ブラウザ右端　→
 |____            ____________   　　    ____|
      |           |          |          |
 | 木　　　　　　     　ビル            　   木 |
      |           |          |          |
 |____________________________　_____________|

スクロール最上段時、横の位置はすべてセンター揃えとする

• 各要素単体

  margin-left: -(マイナス) 画像高さの半分 px;

• ビル･木すべて

  position: fixed;
  left: 50%;

スクロール最下段時、画像の下端とブラウザの下端とを揃える

css 位置を top で与えるか bottom で与えるか二種類ある。
以下、top で指定する場合

• 各要素単体

  margin-top: -(マイナス) 画像高さ px;

• スクロール 最上段時 位置

  position: fixed;
  top: 300%;
  left: center;
  position: fixed;

• スクロール 最下段時 位置

  top: 100%; /* 画像高さ分上へオフセットしているため下端が100%位置となる */

考え方

• パララックスは ブラウザのスクロールによって動きを与えるものである
• $window event:scroll を捉える必要がある
• スクロールの位置によって画像の配置が決まるため、スクロール量($window scrollTop)を位置のベースにする
• $("element").css による配置変更
• ブラウザサイズ･リサイズ時の計算が煩雑になるため、各画像の位置指定は % である方が "無難" (強制ではない)
• ビル･木は スクロール最下段時、下端を揃える必要がある
• ビル･木の下端を揃えるために画像高さを考える必要がある(画像高さ分を予めオフセットさせるのも1つの手段である)

[kamiyam]

ハンズオン用のファイルセット上げました

https://github.com/jsgirls-osaka/hanson01-parallax