Techniki JavaScript

Najpopularniejszą metodą uzyskania efektu Parallax jest użycie JavaScript. Od tego rozdziału będziemy omawiać koncepcje JavaScript i niektórych bibliotek używanych do osiągnięcia przewijania paralaksy.

Korzystanie z czystego języka JavaScript ma sens, aby utrzymać optymalną wydajność witryny. Istnieje wiele innych zalet korzystania z bibliotek z punktu widzenia wydajności. Jednak aby lepiej zrozumieć organizację kodu, zaczniemy od implementacji czystej paralaksy JavaScript. Ciekawostka, czasami nazywany jest również czysty JavaScriptvanilla JavaScript.

Przewijanie paralaksy przy użyciu czystego JavaScript

Najpierw utwórz główny plik HTML z kodem pokazanym poniżej. Strona HTML będzie składać się tylko z czterech nagłówków.

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

Zauważ, że w linii numer 4 w tym przykładzie używamy myscripts.js plik, który zostanie zapisany w tym samym folderze co plik HTML i plik CSS.

Teraz przygotujmy nasz plik CSS, jak pokazano poniżej.

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

Teraz pora na część JavaScript, utwórz plik w notatniku i zapisz go jako 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";  
      }  
   });  
});

Analiza kodu

Przeanalizujmy kod JavaScript.

Kod z line number 1 to 4 reprezentuje funkcję pomocniczą.

W linii 6 wybieramy nasz element paralaksy i dodajemy scrollwydarzenie do okna. Aby określić, ile obszaru jest przewijane, używamyscrolledHeightwłasność. Gdy ekran przewija się w dół,backgroundPositionY jest aktualizowana dla elementu paralaksy.

Aby spowolnić efekt paralaksy, podzieliliśmy przez 1,5, tę liczbę można zmienić na dowolną liczbę.

Teraz będziesz mógł zobaczyć przewijaną stronę w dół, jak pokazano na poniższym zrzucie ekranu.

Korzystanie z biblioteki JavaScript ScrollMagic

Jak omówiono w poprzedniej sekcji, chociaż możemy używać czystego JavaScript do tworzenia efektu paralaksy, istnieje kilka potężnych bibliotek JavaScript, które poprawią wrażenia użytkownika. ScrollMagic jest jedną z takich bibliotek do tworzenia interakcji przewijania paralaksy.

Omówmy więcej na ten temat na przykładzie podanym poniżej -

Note- W tym przykładzie dla uproszczenia CSS będzie przechowywany w pliku HTML. Ponadto kod JavaScript będzie obecny w tym samym dokumencie. Krótko mówiąc, utworzymy tylko jeden plik HTML i będzie on zawierał odwołania do bibliotek ScrollMagic wraz z wymaganym CSS.

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

Jak pokazano w powyższym kodzie, mamy wymagane odniesienia do bibliotek JavaScript z line 3 to 6. Kod CSS jest określany w wierszach od 9 do 19.

Sieć dostarczania treści

Odnośniki do skryptów od linii 3 do 6 wskazują na adresy URL ScrollMagic Content Delivery Network (CDN). Korzystanie z CDN ma sens przy tworzeniu nowoczesnych witryn internetowych, ponieważ ładujesz wymagane biblioteki bez spowalniania witryny.

Jeśli w bibliotekach są wymagane dostosowania, należałoby udostępnić biblioteki na ich odpowiednich serwerach, aby wykorzystać te efekty. Jeśli korzystasz z podstawowych funkcjonalności z biblioteki, efektywne jest użycie adresu URL CDN.

Powyższy kod HTML przedstawia obraz oddzielony 2 podziałami. Pierwszy podział pojawia się z nagłówkiem -These are bricks a drugi podział pojawia się z - Some More Bricks.

Zauważ, że w kodzie CSS od linii 9 do 19 określamy tylko położenie i styl odpowiedniego elementu div z paralaksą.

Praca nad stworzeniem tej miękkiej paralaksy scenejest wykonywana przez bibliotekę ScrollMagic. Jeśli odnosisz się do kodu skryptu od linii 43 do 62, ScrollMagiccontroller jest wywoływana i scene jest tworzone.

Sceny prowadzą DOM do tworzenia efektu paralaksy, gdy 80% ekranu jest zajęte. JavaScript służy do zrozumienia wyzwalacza przewijania. W rezultacie otrzymujesz płynne wrażenia na tej stronie.

Note - Biorąc pod uwagę powyższy obraz jako obraz GIF, nie zobaczysz płynnego efektu podziałów tekstu.

Animacje wyzwalania

Biblioteka ScrollMagic daje nieograniczone możliwości tworzenia różnorodnych doświadczeń użytkownika. Obserwuj fragmenty kodu podane poniżej, aby wyzwalać animacje podczas przewijania.

Zwróć uwagę, że potrzebujesz do tego dwóch plików * minus; jeden plik HTML i jeden plik CSS.

Utwórz plik HTML z kodem pokazanym poniżej -

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

Teraz utwórz plik CSS zawierający następujący kod.

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

Analiza kodu

Odnosząc się do kodu HTML, kod ScrollMagic zaczyna się od line 17 i trwa do line 25. W tej sekcji tworzymy dwie sceny ScrollMagic. Pierwsza scena dotyczy obrazu cegły, a druga animacji banera.

Jak określono w setTween funkcja włączona line 20, gdy przewijanie ma miejsce przy 40% wielkości ekranu, rozpoczyna się następna scena, na której pojawia się baner. To jest to!

Nieprzezroczystość div z id - square jest kontrolowany w pliku CSS na line 10 i line 15.

W rezultacie zobaczysz poniższą animację na stronie.

Przewijanie w poziomie

Możemy również zastosować przewijanie paralaksy i uzyskać przewijanie w poziomie. Biblioteka ScrollMagic może służyć do tworzenia efektu przewijania w poziomie. Zobacz kod poniżej.

Chociaż kod jest prosty do tworzenia efektu przewijania w poziomie, będziemy potrzebować odniesienia jQuery do uzyskania poziomego ruchu ekranów. Szczegóły dotyczące jQuery znajdują się w następnym rozdziale, na razie wystarczy postępować zgodnie z kodem podanym poniżej.

Stworzymy trzy osobne pliki - plik HTML dla głównego kodu, plik CSS dla stylów i plik JS dla wywołań funkcji ScrollMagic.

Oto kod dokumentu 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>

Zwróć uwagę, że mamy trzy sekcje, które pojawią się po przewinięciu. Trzy sekcje są oznaczone identyfikatorami tytuł1, tytuł2 i tytuł3 w wierszach, odpowiednio, 15, 19 i 23.

Kod dokumentu CSS jest podany poniżej -

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

Analiza kodu

Kolory tła dla trzech ekranów (lub sekcji) są podane na lines 10, 22 i 25.

Obliczamy względną szerokość każdego ekranu w kodzie, zaczynając od line 13.

Kod JavaScript dla ScrollMagic jest podany poniżej -

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

Zwróć uwagę na triggerHookwłaściwość w linii 8. Ta właściwość jest odpowiedzialna za zapewnienie efektu przewijania, gdy użytkownik osiągnie zakończenie zdarzenia przewijania. FunkcjaTimelineMax odpowiada za zapewnienie efektu przewijania w poziomie na naszych ekranach.

Po utworzeniu odpowiednich plików będziesz mógł zobaczyć animację przewijania w poziomie, jak pokazano poniżej.

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