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

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

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

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

デモサイト
HTML
CSS
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;
}

@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>