パララックスを使用した背景画像の立体効果付与(パーティクル編)

カテゴリーから探す

年別から見る

2020/03/10

パララックスを使用した背景画像の立体効果付与(パーティクル編)

最近では企業サイトから個人サイトまで「パララックス(視差)」を使用したサイトが多く見られるようになってきました。また、海外のプラグインなどでも実装できるようになってきましたが今回はcssやJSを使って試してみたいと思います。

パララックス(視差)とは

サイトページをスクロールした際にコンテンツやそれに伴う背景画像など、異なる速度で動いたりする事によって奥行き感や立体感を出したりする効果の事になります。

しかし、使い所によってはしつこくなり過ぎたり、動きがメインになってしまいコンテンツが目立たなくなってしまう事もある為、用途やサイトデザインによって使い分けした方が良いと感じました。

パララックスを実践

様々なサイトを見て回っているとやはり使用されているサイトが沢山ありますがやり方については、ほとんど解らなかった為、「株式会社ネディア」様の「【jQuery】パララックスデザインの作り方」を参考にさせていただいております。

参考サイトの方では４つのboxを異なる速度でスクロールと同時に動作させるというものでしたが今回は背景画像として使われそう？なパーティクルをサイズによって異なる速度で動かそうと思います。

参考サイトに沿って同じようにHTML、CSS、JSを作っていきます。

[HTML]


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>パーティクルを別々に動かす</title>

<!-- Keyword,Description -->
<meta name="keywords" content="" >
<meta name="description" content="" >

<!-- StyleSheet -->
<link rel="stylesheet" href="../style.css">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../Parallax.js"></script>


</head>

<body>
  <h1>パーティクルを別々に動かす</h1>
  <p class="num">スクロールの値 | <span id="scrollValue">0</span></p>
<div id="particle1" class="particle"></div>
<div id="particle2" class="particle"></div>

</body>

</html

<!DOCTYPE html>

<head>

<title>パーティクルを別々に動かす</title>

</head>

<body>

<h1>パーティクルを別々に動かす</h1>

<p class="num">スクロールの値 | <span id="scrollValue">0</span></p>

</body>

</html

[CSS]


body {
  height: 5000px;
}
.num {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
}
.particle {
  position: fixed;
  top: 30px;
  width: auto;
}
#particle1 {
  background-image:url(../large.gif); /* 画像のURLを指定 */
  background-repeat: no-repeat; /* 画像の繰り返しを指定 */
  width:1280px; /* 横幅のサイズを指定 */
  height:3072px;
}
#particle2 {
  background-image:url(../small.gif); /* 画像のURLを指定 */
  background-repeat: no-repeat; /* 画像の繰り返しを指定 */
  width:1280px; /* 横幅のサイズを指定 */
  height:3072px;
}

body {

height: 5000px;

}

.num {

margin: 0;

position: fixed;

right: 10px;

top: 10px;

}

.particle {

position: fixed;

top: 30px;

width: auto;

}

#particle1 {

background-image:url(../large.gif); /* 画像のURLを指定 */

background-repeat: no-repeat; /* 画像の繰り返しを指定 */

width:1280px; /* 横幅のサイズを指定 */

height:3072px;

}

#particle2 {

background-image:url(../small.gif); /* 画像のURLを指定 */

background-repeat: no-repeat; /* 画像の繰り返しを指定 */

width:1280px; /* 横幅のサイズを指定 */

height:3072px;

}

[JS]


$(function() {
  var top = $('#particle1').offset().top; //初期値を取得
$(window).scroll(function() {
  var value = $(this).scrollTop(); //スクロールの値を取得
$('#scrollValue').text(value);

$('#particle1').css('top', top + value / 2);
$('#particle2').css('top', top + value / 4);

});
});

$(function() {

var top = $('#particle1').offset().top; //初期値を取得

$(window).scroll(function() {

var value = $(this).scrollTop(); //スクロールの値を取得

$('#scrollValue').text(value);

$('#particle1').css('top', top + value / 2);

$('#particle2').css('top', top + value / 4);

});

DEMO→

JSで記述した「スクロールの値を取得」を使用し、それぞれ異なった速度で動かしたい対象にその値を使う事によってパララックスをすることが出来ました。
背景画像を立体的に動かしたいという趣旨でしたが、ページのコンテンツに反映させる事によって同じように奥行き感などを出すことが簡単に出来ます。
しかし今回は比較的簡単な基本の動作のみでしたが、これらの効果に更に複雑なものを加えようとすると手間は掛かるかと思いますが色々な可能性があるので試してみる価値はありそうと感じました。

最後に、
分かり易い説明とDEMOの公開をして下さった「株式会社ネディア」様に御礼を申し上げます。
簡単に実装出来ますので気になった方はぜひ試してみてはいかがでしょうか？

Author Profile