シンプルなパララックスサイト構築のためのメモ帳 | 「webで何か」作るブログ
シンプルなパララックスサイト構築のためのメモ帳
先日、ごくシンプルなパララックスを利用したサイトを作成しました。
どのくらいシンプルかというと、
- スクリプトは2つ
- 動かすものは背景画像1つ
というこの上ないシンプルさです。
それでも、意外と見栄えが変わりますし、使い勝手もいいので残しておきます。
なお、以下の2つのサイトに非常にお世話になりました。
webにおけるパララックスとは？
パララックスとは、視差効果と訳されています。
複数の物体の距離や速度の違いなどで生じる視覚的な効果全般を言うのでしょう。
ただし、webにおいて限定するならばそんな難しいことは無く、
要素の動くスピードを変えることによる演出、効果全般という理解になるでしょうか。
それはさておき。
まずはHTMLから。
HTML
縦に並んだ3つのセクションを用意しました。
この中央、id="move"の背景画像を動かしてみたいと思います。
CSS
続いてCSSです。
各要素の高さや背景色を指定して、id="move"の背景画像も指定しました。
この状態では当然ですが動きません。
JS
基本のHTMLlとCSSができたところで、Javascriptを追加します。
追加するのは全部で３つです。
- jQueryの読み込み
- スクロール量を取得する処理
- 指定したものの移動速度を変更する処理
これで、背景画像が別の速度で動くようになりました。
ロジック
理屈としては、
- スクロール量を取得し、変数yに格納
- yに任意の数値を掛ける
- 算出された数値をCSSのbackground-positionに反映させる
ことで任意の速度設定を行なっています。
あとは、任意の位置からのイベント発火ができればかなり実践的な使い方が可能になると思います。
