Teknik JavaScript

Untuk membuat efek Parallax, metode yang paling populer adalah menggunakan JavaScript. Dari bab ini dan seterusnya kita akan membahas konsep JavaScript dan beberapa pustaka yang digunakan untuk mencapai Parallax scrolling.

Memanfaatkan JavaScript murni masuk akal untuk menjaga kinerja situs web tetap optimal. Ada banyak keuntungan lain menggunakan perpustakaan dari aspek kinerja. Namun, untuk memahami organisasi kode dengan lebih baik, kita akan mulai dengan implementasi paralaks JavaScript murni. Fakta menyenangkan, terkadang JavaScript murni juga disebutvanilla JavaScript.

Parallax Scrolling menggunakan Pure JavaScript

Pertama, buat file HTML utama dengan kode yang ditunjukkan di bawah ini. Halaman HTML hanya akan terdiri dari empat teks heading.

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

Perhatikan bahwa pada baris nomor 4, untuk contoh ini kita gunakan myscripts.js file yang akan disimpan di folder yang sama dengan file HTML dan file CSS.

Sekarang, mari kita siapkan file CSS kita seperti gambar di bawah ini.

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);  
}

Sekarang sampai pada bagian JavaScript, buat file di notepad dan simpan sebagai 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";  
      }  
   });  
});

Analisis Kode

Mari kita menganalisis kode JavaScript.

Kode dari line number 1 to 4 mewakili fungsi pembantu.

Di baris 6, kami memilih elemen paralaks kami dan menambahkan scrollacara ke jendela. Untuk menentukan berapa banyak area yang di-scroll, kami menggunakanscrolledHeightProperti. Saat layar bergulir ke bawah,backgroundPositionY diperbarui untuk elemen paralaks.

Untuk memperlambat efek paralaks, kita bagi dengan 1,5, angka ini dapat diubah menjadi angka yang Anda inginkan.

Sekarang, Anda akan dapat melihat halaman bergulir ke bawah seperti yang disediakan pada gambar di bawah ini.

Menggunakan Library JavaScript ScrollMagic

Seperti yang telah dibahas di bagian sebelumnya, meskipun kita dapat menggunakan JavaScript murni untuk membuat efek paralaks, ada beberapa pustaka JavaScript yang kuat yang akan meningkatkan pengalaman pengguna. ScrollMagic adalah salah satu library tersebut untuk membuat interaksi scroll paralaks.

Mari kita bahas lebih lanjut tentang ini dengan bantuan contoh seperti yang diberikan di bawah ini -

Note- Dalam contoh ini, untuk membuatnya sederhana, kita akan menyimpan CSS dalam file HTML. Selain itu, kode JavaScript akan ada di dokumen yang sama. Singkatnya, kita hanya akan membuat satu file HTML dan itu akan memiliki pustaka ScrollMagic yang direferensikan bersama dengan CSS yang diperlukan.

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

Seperti yang ditunjukkan pada kode di atas, kami membutuhkan referensi pustaka JavaScript dari line 3 to 6. Kode CSS ditentukan dari baris 9 hingga 19.

Jaringan Pengiriman Konten

Referensi skrip dari baris 3 hingga 6 mengarah ke URL Jaringan Pengiriman Konten ScrollMagic (CDN). Menggunakan CDN masuk akal dalam pengembangan situs web modern, karena Anda dapat memuat pustaka yang diperlukan tanpa memperlambat situs web Anda.

Jika ada penyesuaian yang diperlukan di perpustakaan, seseorang harus menjadi tuan rumah perpustakaan di server masing-masing untuk memanfaatkan efek ini. Jika Anda menggunakan fungsionalitas dasar dari perpustakaan, itu efisien untuk menggunakan URL CDN.

Kode HTML di atas menunjukkan gambar yang dipisahkan oleh 2 divisi. Divisi pertama muncul dengan judul -These are bricks dan divisi kedua muncul dengan - Some More Bricks.

Perhatikan bahwa dalam kode CSS dari baris 9 hingga 19, kami hanya menentukan posisi dan gaya untuk div parallax masing-masing.

Pekerjaan menciptakan paralaks lembut ini scenedilakukan oleh perpustakaan ScrollMagic. Jika Anda merujuk ke kode skrip dari baris 43 hingga 62, ScrollMagiccontroller dipanggil dan a scene dibuat.

Pemandangan memandu DOM untuk membuat efek paralaks saat 80% layar terisi. JavaScript digunakan untuk memahami pemicu gulir. Hasilnya, yang Anda dapatkan adalah pengalaman mengambang di halaman ini.

Note - Mempertimbangkan gambar di atas sebagai gambar GIF, Anda tidak akan dapat mengamati efek mulus dari pembagian teks.

Animasi Pemicu

Kemungkinan menciptakan pengalaman pengguna yang bervariasi tidak terbatas dengan ScrollMagic Library. Amati potongan kode yang diberikan di bawah ini untuk memicu animasi saat menggulir.

Perhatikan bahwa untuk ini Anda memerlukan dua file * minus; satu file HTML dan satu file CSS.

Buat file HTML dengan kode yang ditunjukkan di bawah ini -

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

Sekarang, buat file CSS dengan kode berikut di dalamnya.

.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%;  
}

Analisis Kode

Mengacu pada kode HTML, kode ScrollMagic dimulai dari line 17 dan berlanjut sampai line 25. Di bagian ini, kami membuat dua adegan ScrollMagic. Adegan pertama untuk gambar bata dan yang lainnya untuk animasi spanduk.

Sebagaimana ditentukan dalam setTween berfungsi line 20, ketika aksi gulir terjadi pada 40% ukuran layar, adegan berikutnya dimulai yang menampilkan spanduk Ini dia!

Opasitas div dengan id - square dikontrol dalam file CSS di line 10 dan line 15.

Hasilnya, Anda akan melihat animasi di bawah ini pada halaman.

Pengguliran Horizontal

Kami juga dapat menerapkan gulir paralaks dan mencapai gulir horizontal. Perpustakaan ScrollMagic dapat digunakan untuk membuat efek horizontal pengguliran. Lihat kode di bawah ini.

Meskipun kodenya lurus ke depan untuk membuat efek gulir horizontal, kita memerlukan referensi jquery untuk mencapai gerakan horizontal layar. Detail jQuery disediakan di bab berikutnya, untuk saat ini, cukup ikuti kode seperti yang diberikan di bawah ini.

Kami akan membuat tiga file terpisah - file HTML untuk kode utama, file CSS untuk gaya dan file JS untuk panggilan fungsi ScrollMagic.

Berikut adalah kode untuk dokumen 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>

Perhatikan bahwa kami memiliki tiga bagian, yang akan muncul setelah menggulir. Ketiga bagian tersebut dilambangkan dengan id title1, title2 dan title3 masing-masing pada baris 15,19 dan 23.

Kode untuk dokumen CSS diberikan di bawah ini -

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;  
}

Analisis Kode

Warna latar belakang untuk tiga layar (atau bagian) disediakan di lines 10, 22 dan 25.

Kami menghitung lebar relatif setiap layar dalam kode yang dimulai line 13.

Kode JavaScript untuk ScrollMagic diberikan di bawah ini -

$(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);    
});

Perhatikan triggerHookproperti di baris 8. Properti ini bertanggung jawab untuk menyediakan efek gulir saat pengguna mencapai penyelesaian acara gulir. FungsinyaTimelineMax bertanggung jawab untuk memberikan efek gulir horizontal ke layar kami.

Setelah membuat file masing-masing, Anda akan dapat melihat animasi scroll horizontal seperti yang ditunjukkan di bawah ini.

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