jQuery

簡単にパララックスを実装できるプラグイン【jQuery-scrolly】

jQueryといえば、パララックス効果ですよね(個人的意見です)

今回は、jQuery-scrollyを使ってパララックス効果を実装してみました。

 

jQuery-scrollyの実装方法

公式サイトからソースコードをダウンロードしてきて使用します。

jsdelivrにもCDNのリンクがあったので、CDNでも読み込めそうです。

 

 

jQuery-scrollyでパララックス効果を実装する

See the Pen
jquery-scrolly
by kei (@kei_01011)
on CodePen.


とりあえず、パララックスの動作対象は、背景画像であっても、imgやdivであってもOK。

<div>
   <div id=“parallax1” data-velocity=“-.1"><div>
   <img src=“img/hoge.png” id=“parallax2" data-velocity=“-.3” data-fit=“200">
 <div>

 

要素にdata-velocityを設定することで動作速度を決めるようです。

[-.3]などの書き方は[-0.3]のことです。ちなみに正の値を与えれば逆方向へ動きます。

 

 

注意しなければならないのが、スタート地点が要素のtopの位置で判断されるということ。

正確にはjQueryのposition().topで要素の位置を取得し、その地点からパララックス動作を実行するように作られています。

 

なので背景画像をパララックスさせる時でもスタート地点をposition().topで取得した値から動かしてしまいます。

その場合背景を指定した要素をrelative、もしくはstaticで指定し、ページの下の方に配置されている場合、とんでもないところから画像が動き出してしまします。

 

#parallax1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* 任意の値 */
   height: 600px; /* 任意の値 */
   background: url(hogehoge.png) no-repeat fixed;
 }
 #parallax2 {
   position: absolute;
   top: 200px; /任意の値/
   left: 100px; /任意の値/
 }

 

なのでCSSはabsoluteで配置するよう制作しておいた方が使いやすいかと。

 

背景をパララックスさせる要素は任意のサイズを指定して背景をbackground-attachment: fixedで配置。
要素自体を動かすものは任意の位置へ配置します。
fixedを指定しなかった場合は動作できないようです。

 

$(“#parallax1”).scrolly({bgParallax: true});
 $(“#parallax2").scrolly();

JSは単純でパララックスさせる要素に.scrolly();を実行でOK。

オプションにbgParallax: trueを入れると背景が動き、空の状態だと要素自体が動きます。

 

他のプラグインの方が優秀?

パララックス系の有名どころはたくさんあるので、色々触ってみて、使い分けていきたいですね。

簡単にパララックスが実装できますが、まずHTML構造などから考えて作らなければならないので、注意が必要かなーと思いました。

ただ、そんなに複雑でもないので、必要に応じて中身をカスタマイズして使ったりもありかとは思います。本当に簡単なパララックス(当ページの様なもの)でスマホ・タブレットの対応がない案件でなら作業効率を大きくあげてくれそう!