JavaScriptテクニック

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

純粋な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コードを分析してみましょう。

からのコード line number 1 to 4 ヘルパー関数を表します。

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

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

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

ScrollMagicJavaScriptライブラリの使用

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

以下に示す例を使用して、これについて詳しく説明します。

Note−この例では、簡単にするために、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>

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

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

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

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

上記のHTMLコードは、2つの区分で区切られた画像を示しています。最初の部門は見出しで表示されます–These are bricks そして2番目の部門は–で表示されます Some More Bricks。

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

この柔らかい視差を作成する作業 sceneScrollMagicライブラリによって行われます。43行目から62行目までのスクリプトコードを参照する場合、ScrollMagiccontroller が呼び出され、 scene 創造された。

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

Note −上記の画像をGIF画像と見なすと、テキスト分割のスムーズな効果を観察することはできません。

トリガーアニメーション

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

このためには、2つのファイル*マイナスが必要であることに注意してください。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つのシーンはバナーアニメーション用です。

で指定されているように setTween 上の機能 line 20、画面サイズの40％でスクロールアクションが発生すると、次のシーンが始まり、バナーが表示されます。これで完了です。

idのdivの不透明度- square の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行目にID 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つの画面（またはセクション）の背景色は、 lines 10, 22 そして 25。

で始まるコードの各画面の相対的な幅を計算しています line 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);    
});

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

それぞれのファイルを作成すると、以下に示すような水平スクロールアニメーションが表示されます。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved