読者です 読者をやめる 読者になる 読者になる

「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

シンプルなパララックスサイト構築のためのメモ帳 | 「webで何か」作るブログ

jQuery,JS[Code]

f:id:pochiweb:20161225221041j:plain

シンプルなパララックスサイト構築のためのメモ帳

先日、ごくシンプルなパララックスを利用したサイトを作成しました。

 

どのくらいシンプルかというと、

というこの上ないシンプルさです。

それでも、意外と見栄えが変わりますし、使い勝手もいいので残しておきます。

なお、以下の2つのサイトに非常にお世話になりました。

 

webdesignmagazine.net

webdrawer.net

webにおけるパララックスとは?

パララックスとは、視差効果と訳されています。

複数の物体の距離や速度の違いなどで生じる視覚的な効果全般を言うのでしょう。

 ただし、webにおいて限定するならばそんな難しいことは無く、

要素の動くスピードを変えることによる演出、効果全般という理解になるでしょうか。

それはさておき。

まずはHTMLから。

HTML

縦に並んだ3つのセクションを用意しました。

この中央、id="move"の背景画像を動かしてみたいと思います。

 

 

CSS

続いてCSSです。

各要素の高さや背景色を指定して、id="move"の背景画像も指定しました。

この状態では当然ですが動きません。

 

 

 

f:id:pochiweb:20161225205940p:plain

JS

基本のHTMLlとCSSができたところで、Javascriptを追加します。

追加するのは全部で3つです。

  • jQueryの読み込み
  • スクロール量を取得する処理
  • 指定したものの移動速度を変更する処理

 

これで、背景画像が別の速度で動くようになりました。

ロジック

理屈としては、

  • スクロール量を取得し、変数yに格納
  • yに任意の数値を掛ける
  • 算出された数値をCSSのbackground-positionに反映させる

ことで任意の速度設定を行なっています。

 

あとは、任意の位置からのイベント発火ができればかなり実践的な使い方が可能になると思います。