JavaScriptテクニック

視差効果を作成するための最も一般的な方法は、JavaScriptを使用することです。この章以降では、JavaScriptの概念と、Parallaxスクロールを実現するために使用されるライブラリのいくつかについて説明します。

純粋なJavaScriptを使用すると、Webサイトのパフォーマンスを最適に保つことができます。パフォーマンスの観点からライブラリを使用することには、他にも多くの利点があります。ただし、コード構成をよりよく理解するために、純粋なJavaScript視差の実装から始めます。おもしろいことに、純粋なJavaScriptが vanilla JavaScriptと呼ばれることもあります。

純粋なJavaScriptを使用した視差スクロール

まず、以下に示すコードを使用してメインHTMLファイルを作成します。 HTMLページは、4つの見出しテキストのみで構成されます。

<html>
   <head>
      <link rel = "stylesheet" href = "styles.css">
      <script src = "myscripts.js"></script>
   </head>

   <body>
      <section class = "parallax">
         <h1>The First Scroll</h1>
      </section>

      <section class = "parallax">
         <h1>The Second One</h1>
      </section>

      <section class = "parallax">
         <h1>GoingOn !!</h1>
      </section>

      <section class = "parallax">
         <h1>And we've reached the bottom!!</h1>
      </section>
   </body>

</html>

この例では、行番号4で、 myscripts.js ファイルを使用していることに注意してください。このファイルは、HTMLファイルおよびCSSファイルと同じフォルダーに格納されます。

次に、以下に示すようにCSSファイルを準備しましょう。

header {
   height: 4em;
   background: #845;
}

.parallax {
   background-repeat: no-repeat;
   background-size: cover;
}

.parallax h1 {
   text-align: center;
   margin: 0;
   font-size: 2.5em;
   letter-spacing: .2em;
   color: red;
   padding: 10rem 0;
   mix-blend-mode: exclusion;
}

.parallax:nth-of-type(1) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(1) h1 {
   padding: 15rem 0;
}

.parallax:nth-of-type(2) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(2) h1 {
   padding: 12rem 0;
}

.parallax:nth-of-type(3) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

.parallax:nth-of-type(4) {
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}

JavaScriptパーツが追加されました。メモ帳でファイルを作成し、_myscripts.js_として保存します。

function $$(selector, context) {
   context = context || document;
   var elements = context.querySelectorAll(selector);
   return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
   var scrolledHeight= window.pageYOffset;

   $$(".parallax").forEach(function(el,index,array) {
      var limit = el.offsetTop+ el.offsetHeight;

      if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
         el.style.backgroundPositionY=  (scrolledHeight - el.offsetTop)/1.5+ "px";
      } else {
         el.style.backgroundPositionY=  "0";
      }
   });
});

コードの分析

JavaScriptコードを分析しましょう。

行番号1から4 *のコードは、ヘルパー関数を表します。

6行目では、視差要素を選択し、 scroll イベントをウィンドウに追加します。スクロールされる領域の量を決定するために、 scrolledHeight プロパティを使用しています。画面が下にスクロールすると、視差要素の backgroundPositionY が更新されます。

視差効果を遅くするために、1.5で割って、この数値を任意の数値に変更できます。

これで、下のスクリーンショットに示すように、ページが下にスクロールするのを見ることができます。

ページを下にスクロール

ScrollMagic JavaScriptライブラリの使用

前のセクションで説明したように、純粋なJavaScriptを使用して視差効果を作成できますが、ユーザーエクスペリエンスを向上させる強力なJavaScriptライブラリがいくつかあります。 ScrollMagicは、視差スクロール相互作用を作成するためのこのようなライブラリの1つです。

以下に示す例の助けを借りて、これについてさらに議論しましょう-

注-この例では、簡単にするために、CSSをHTMLファイルに保存します。また、JavaScriptコードは同じドキュメントに存在します。簡単に言うと、HTMLファイルを1つだけ作成し、必要なCSSとともにScrollMagicライブラリを参照します。

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
   </head>

   <body>
      <style type = "text/css">
         .parallaxParent {
            height: 100vh;
            overflow: hidden;
         }
         .parallaxParent > * {
            height: 200%;
            position: relative;
            top: -100%;
         }
      </style>
      <div class = "spacing0"></div>

      <div id = "parallax1" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div class = "spacing1">
         <div style = "background-color:cyan">
         <p>These are bricks</p>
         </div>
      </div>

      <div class = "spacing0"></div>
      <div id="parallax2" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div class = "spacing1">
         <div style = "background-color:yellow">
            <p>Some More Bricks</p>
         </div>
      </div>

      <div class = "spacing0"></div>
      <div id = "parallax3" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>
      <div class = "spacing2"></div>

      <script>
        //init controller
         var controller = new ScrollMagic.Controller({
            globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

        //build scenes
         new ScrollMagic.Scene({triggerElement: "#parallax1"})
            .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);

         new ScrollMagic.Scene({triggerElement: "#parallax2"})
            .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);

         new ScrollMagic.Scene({triggerElement: "#parallax3"})
            .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
            .addIndicators()
            .addTo(controller);
      </script>
   </body>

</html>

上記のコードに示すように、 line 3 to 6 のJavaScriptライブラリ参照が必要です。 CSSコードは9行目から19行目で指定されています。

コンテンツ配信ネットワーク

3行目から6行目までのスクリプト参照は、ScrollMagicコンテンツ配信ネットワーク（CDN）URLを指します。 CDNを使用することは、Webサイトの速度を落とすことなく必要なライブラリをロードできるため、現代のWebサイト開発では理にかなっています。

ライブラリでカスタマイズが必要な場合、これらの効果を利用するには、それぞれのサーバーでライブラリをホストする必要があります。ライブラリの基本的な機能を使用している場合は、CDN URLを使用すると効率的です。

上記のHTMLコードは、2つの区分で区切られた画像を示しています。最初の区分は見出し付きで表示されます-これらはレンガ*であり、2番目の区分は表示されます-*いくつかのレンガ。

9行目から19行目のCSSコードでは、それぞれの視差divの位置とスタイルのみを指定していることに注意してください。

このソフトな視差*シーン*を作成する作業は、ScrollMagicライブラリによって行われます。 43行目から62行目のスクリプトコードを参照すると、ScrollMagic controller が呼び出され、 scene が作成されます。

シーンは、画面の80％が占有されているときに視差効果を作成するようにDOMをガイドします。 JavaScriptは、スクロールトリガーを理解するために使用されます。その結果、このページでフローティングエクスペリエンスが得られます。

レンガの壁

注-上記の画像をGIF画像と見なすと、テキスト分割の滑らかな効果を観察できなくなります。

アニメーションをトリガーする

ScrollMagicライブラリを使用すると、さまざまなユーザーエクスペリエンスを作成できる可能性が無限に広がります。スクロール時にアニメーションをトリガーするには、以下のコードスニペットを確認してください。

このためには、2つのファイル *minusが必要です。 1つのHTMLファイルと1つのCSSファイル。

以下に示すコードでHTMLファイルを作成します-

<html>
   <head>
      <link rel = "stylesheet" href = "style.css">

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
   </head>

   <body>
      <div class = "spacing0"></div>
      <div id = "parallax1" class = "parallaxParent">
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
      </div>

      <div style = "height:450px;"></div>
      <div id = "square" class = "square">This is it!</div>
      <div style = "height:450px;"></div>

      <script>
         var controller = new ScrollMagic.Controller();
         var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
            .setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
            .addTo(controller);

         var scene = new ScrollMagic.Scene({triggerElement: '.square'})
            .setClassToggle('.square', 'show')
            .addTo(controller);
      </script>
   </body>

</html>

次に、次のコードを含むCSSファイルを作成します。

.square {
   background: aqua;
   margin: 0 auto;
   display: block;
   padding: 40px 0;
   text-align: center;
   color: #000;
   font-size: 40px;
   font-weight: bold;
   opacity: 0;
   transition: .3s;
   width: 0%;
}
.square.show{
   opacity: 1;
   width: 100%;
}
.parallaxParent {
   height: 100vh;
   overflow: hidden;
}
.parallaxParent >* {
   height: 200%;
   position: relative;
   top: -100%;
}

コードの分析

HTMLコードを参照すると、ScrollMagicコードは line 17 から始まり、 line 25 まで続きます。このセクションでは、2つのScrollMagicシーンを作成しています。最初のシーンはブリックイメージ用で、もう1つのシーンはバナーアニメーション用です。

行20 *の *setTween 関数で指定されているように、スクロールアクションが画面サイズの40％で発生すると、次のシーンが開始され、バナーが表示されます。

id- square のdivの不透明度は、CSSファイルの line 10 および line 15 で制御されます。

その結果、ページ上に以下のアニメーションが表示されます。

アニメーション付きのレンガの壁

水平スクロール

視差スクロールを適用して、水平スクロールを実現することもできます。ライブラリScrollMagicを使用して、スクロールの水平効果を作成できます。以下のコードを見てください。

コードは水平スクロール効果を作成するために単純ですが、画面の水平移動を実現するためにjqueryリファレンスが必要になります。 jQueryの詳細については次の章で説明しますが、現時点では、以下のコードに従ってください。

メインコード用のHTMLファイル、スタイル用のCSSファイル、およびScrollMagic関数呼び出し用のJSファイルの3つの個別のファイルを作成します。

HTMLドキュメントのコードは次のとおりです。

<html>
   <head>
      <link rel = "stylesheet" href = "style.css">
   </head>

   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
   <script src = "animation.js"></script>

   <body>
      <div class = "wrapper" id = "js-wrapper">
         <div class = "sections" id = "js-slideContainer">
            <section class = "section">
               <span class = "section__title" id = "title1">Scroll Once</span>
               <span id = "trigger--title1"></span>
            </section>

            <section class = "section">
               <span class = "section__title" id = "title2">Do It Again</span>
               <span id = "trigger--title2"></span>
            </section>

            <section class = "section">
            <span class = "section__title" id = "title3">Thank You!</span>
            <span id = "trigger--title3"></span>
         </div>
      </div>
   </body>

</html>

スクロール後に表示される3つのセクションがあることに注意してください。 3つのセクションは、それぞれ15行目、19行目、23行目にids title1、title2、title3で示されています。

CSSドキュメントのコードは次のとおりです-

body {
   font-family: serif;
}

body, html {
   height: 100%;
}

.wrapper {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.section {
   height: 100%;
   width: calc( 100%/5 );
   float: left;
   position: relative;
}

.section:nth-child(1) {
   background: green;
}

.section:nth-child(2) {
   background: orange;
}

.section:nth-child(3) {
   background: red;
}

.sections {
   width: 500%;
   height: 100%;
}

.section__title {
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 30px;
   color: #fff;
}

コードの分析

3つの画面（またはセクション）の背景色は、行10、22 *、および *25 で提供されます。

13行目から始まるコードで各画面の相対的な幅を計算しています。

ScrollMagicのJavaScriptコードは以下のとおりです-

$(function () {
   var controller = new ScrollMagic.Controller();
   var horizontalSlide = new TimelineMax()
      .to("#js-slideContainer", 1,   {x: "-20%"})
      .to("#js-slideContainer", 1,   {x: "-40%"})

   new ScrollMagic.Scene({
      triggerElement: "#js-wrapper",
      triggerHook: "onLeave",
      duration: "400%"
   })
   .setPin("#js-wrapper")
   .setTween(horizontalSlide)
   .addTo(controller);
});

8行目の triggerHook プロパティに注目してください。このプロパティは、ユーザーがスクロールイベントの完了に達するとスクロール効果を提供します。関数 TimelineMax は、画面に水平スクロール効果を提供します。

それぞれのファイルを作成すると、次のように水平スクロールアニメーションを見ることができます。

水平スクロールアニメーション

Parallax-scrolling-in-web-design-javascript-techniques

JavaScriptテクニック

純粋なJavaScriptを使用した視差スクロール

コードの分析

ScrollMagic JavaScriptライブラリの使用

コンテンツ配信ネットワーク

アニメーションをトリガーする

コードの分析

水平スクロール

コードの分析

目次