Toggle

ウェブ

3分でできる!jQueryによる簡単パララックスの作り方

Medium 4202299 photo credit: Daveybot via photopin cc

こんばんは、ボーノです。

Webサイトを作っていて、初めてパララックス(視差)を実装してみました。
意外と手軽でしかも一気にリッチなサイトになるので、これから重宝しそう。

さて、メモメモ。

実装はこれだけ

例えば3層のレイヤーにしたかったら、下記のように書いてみる。

HTML

3つの要素を入れ子にする。

CSS

それぞれに背景画像を設定しておく。repeat-yは何を作りたいかによって必要かどうかが変わってくる。
縦に長いコンテンツで、連続して背景を使用したい場合はrepeat-yが必要。

JavaScript

スクロールが起きる度にparallax関数を呼び、その中でスクロール量を取得する。
その量に応じて、背景画像のシフト量を決定する。
そしてそのシフト量を、背景画像ごとに変えれば良い。

コツは

  • 背景画像は透過していないとその後ろの画像が隠れてしまうため、視差が生まれない。透過が可能な、PNGやJPEG形式で画像を作ること。

  • 透過率は少しずつ下げる + 画像は少しずつ小さくする
    こうすることで、奥の物がより立体的に遠くに見える。これはオススメ。

参考書籍

内容は下記書籍を参考にしました。
図付きでパララックスの作り方を解説してくれるのでとても分かりやすかったです。(p.193〜196がおすすめ)。

LEAVE A REPLY

*
*
* (公開されません)

Return Top