jQueryでパララックスを実装する

こんにちは！セミマサです。

Webサイトのスクロール効果としてよく用いられるパララックス！

今回はパララックスのうち、「画面のスクロール速度と異なる速度で動く要素」をjQueryを使って実装したのでソースやデモサイトをご紹介します。

デモサイト

下のボタンを押すと今回作成したデモサイトへ移動します。

HTML

<header class="header"></header>
<div class="content-area"></div>
<div id="box1" class="parallax"></div>
<div id="box2" class="parallax"></div>
<div id="box3" class="parallax"></div> 
<div id="bubble1" class="parallax"></div>
<div id="bubble2" class="parallax"></div>
<div id="bubble3" class="parallax"></div>
<div id="delta"></div>
<footer class="footer"></footer>

まずはHTMLから。動かしたい要素にidを付与しておきます。

CSS

@charset "UTF-8";
html, body, div,
footer, header {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
body {
  line-height: 1; }
header,footer {
  height: 25vh;
  width: 100vw;
  background-color: palegreen;
  display: block;
}
.content-area{
  height: 650vh;
  width: 100vw;
}
.parallax {
  width: 64px;
  height: 64px;
  position: fixed;
  z-index: -2; }
#box1 {
  background-color: khaki;
  left: 2%;
  top: 0%; }
#box2{
  background-color: yellow;
  left: 6%;
  top: 10%;
}
#box3{
  background-color: palegoldenrod;
  left: 10%;
  top: 5%;
}
#bubble1 {
  border-radius: 50%;
  background-color: aqua;
  right: 2%;
  top: 4%; }
#bubble2 {
  border-radius: 50%;
  background-color: paleturquoise;
  right: 6%;
  top: 10%; }
#bubble3 {
  border-radius: 50%;
  background-color: powderblue;
  right: 10%;
  top: 3%; }
#delta{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 75px 25px 0 25px;
  border-color: firebrick transparent transparent transparent;
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);
  top: 0%;
  position: fixed;
}

こちらがCSSになります。

jQuery

        <script>
            $(function() {
                var box_top1 = $('#box1').get(0).offsetTop; 
                var box_top2 = $('#box2').get(0).offsetTop; 
                var box_top3 = $('#box3').get(0).offsetTop; 
                var bubble_top1 = $('#bubble1').get(0).offsetTop;
                var bubble_top2 = $('#bubble2').get(0).offsetTop;
                var bubble_top3 = $('#bubble3').get(0).offsetTop;
                var delta = $('#delta').get(0).offsetTop;
                $(window).scroll(function() {
　　　　　　　　　　　//スクロールの値を取得
                    var value = $(this).scrollTop(); 
　　　　　　　　　　　//スクロール値に応じて要素を動かす
                    $('#box1').css('top', box_top1 + value / 4);
                    $('#box1').css('transform', 'rotate(' + value / 4 + 'deg)');
                    $('#box2').css('top', box_top2 + value / 4);
                    $('#box2').css('transform', 'rotate(' + value / 4 + 'deg)');
                    $('#box3').css('top', box_top3 + value / 4);
                    $('#box3').css('transform', 'rotate(' + value / 4 + 'deg)');
                    $('#bubble1').css('top', bubble_top1 + value / 8);
                    $('#bubble2').css('top', bubble_top2 + value / 8);
                    $('#bubble3').css('top', bubble_top3 + value / 8);
                    $('#delta').css('top', delta + value / 2);
                });
            });
        </script>

jQueryのソースです。

・.get(0).offsetTop;で各要素のオフセットの高さを取得しています。最初は.offset().top;と書いていましたが、画面を更新した際に要素の位置がずれてしまうので書き換えました。

おわりに

今回は「画面のスクロール速度と異なる速度で動く要素」 を実装しました。パララックスを使ってお洒落なサイトを作れるよう今後も精進していきます。