パララックスとはページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現する ことです。
パララックスを使ったWEBサイト
RESCALAR | 株式会社リスカラ
ICS COLLEGE OF ARTS WEB OPEN CAMPUS
Re-Frame
今回はJavaScriptを使わずにパララックスを簡単に作っていこうと思います！
まずは、挿入したい背景画像を用意します。CSSに背景画像を指定したら、
min-height（要素の最小高）
background-position（背景画像の表示位置）
background-repeat （背景画像をどのように繰り返すか）
background-attachment （スクロール時の背景位置の指定）
background-size （背景画像の大きさの指定）
これらも一緒に指定します。
（画像下のテキスト部分は今回、パララックスができているか確認のため画面がスクロールできる程度に適当に設定しています^^）
実際にブラウザで確認してみましょう。
静止画だとわかりづらいですが、画像が固定されてスクロールするので奥行きがあるように感じられます。
パララックスのデメリットとしては画像の容量やJavaScriptによってサイトを開くときに時間がかかってしまうことです。なのでローディング画面を挿入したりユーザーが離れない工夫が必要です。
パララックスの使い方も様々ですが、新感覚でユーザーが見ても楽しい画面を作り出すことができるのでとってもおすすめです^^★
以上、備忘録でした！！
コメント