プラグインを使わないで簡単にパララックスをコーディングする方法

公開日：2016/09/01

WEB スクロールパララックス

以前、パララックス効果(視差効果)を用いたサイトをご紹介しました！

スクロールで動く！パララックスを使用したユニークなサイト

このようなかっこいいサイト、つくってみたいですよね！
パララックスの実装をするためにさまざまなプラグインが存在しますが、
今回はプラグインを使わないで、簡単に作成する方法を書いてみたいと思います。

作成の流れとしては

1.スクロール量を取得する
2.positionのCSSを変更して動かす

というものです。

デモページ

今回、私がプラグインを使わないで作成したパララックスを用いたサイトはこちら。

パララックスを使用したデモページ

夏も終わるというのにカブトムシですが。
このように、ひとつずつ動きを変えることもできます。

スクロール量を取得、出力する

まずはスクロール量を取得、出力してみます。
実際は出力しなくてもいいのですが、今回は表示させてみました。
jQueryを使用しているので読み込むのを忘れずに。

JS

<script type="text/javascript">
$(function(){
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#scroll").text("スクロール量：" + y);
	});
});
</script>

$(function(){

$(window).scroll(function(){

var y = $(this).scrollTop();

$("#scroll").text("スクロール量：" + y);

});

</script>

HTML

<div id="scroll">スクロール量が表示されます</div>

1	<div id="scroll">スクロール量が表示されます</div>

positionのCSSを変更して動かす

y(スクロール量)を2で割ったり4で割ったり。
CSSのTOPの値は、割る数字を変えることによって速さも変えています。

JS

<script type="text/javascript">
$(function(){
	$(window).scroll(function(){
		var y = $(this).scrollTop();
		$("#scroll").text("スクロール量：" + y);
		$("#kabu_01").css('top', y / 2);
		$("#kabu_02").css('top', y / 8);
		$("#kabu_03").css('top', y / 6);
		$("#kuwa_01").css('top', y / 4);
	});
});
</script>

$(function(){

$(window).scroll(function(){

var y = $(this).scrollTop();

$("#scroll").text("スクロール量：" + y);

$("#kabu_01").css('top', y / 2);

$("#kabu_02").css('top', y / 8);

$("#kabu_03").css('top', y / 6);

$("#kuwa_01").css('top', y / 4);

});

</script>

HTML

<div id="scroll">スクロール量が表示されます</div>
<ul>
    <li id="kabu_01"><img src="img/kabu_01.png" alt="" width="130" height="310"></li>
    <li id="kabu_02"><img src="img/kabu_02.png" alt="" width="130" height="310"></li>
    <li id="kabu_03"><img src="img/kabu_03.png" alt="" width="130" height="310"></li>
    <li id="kuwa_01"><img src="img/kuwa_01.png" alt="" width="130" height="310"></li>
</ul>