Técnicas de JavaScript

Para criar o efeito Parallax, o método mais popular é o uso de JavaScript. Deste capítulo em diante, discutiremos os conceitos de JavaScript e algumas das bibliotecas usadas para obter a rolagem Parallax.

Utilizar JavaScript puro faz sentido para manter o desempenho do site ideal. Existem muitas outras vantagens de usar bibliotecas de um aspecto de desempenho. No entanto, para entender melhor a organização do código, começaremos com a implementação de paralaxe de JavaScript pura. Curiosidade, às vezes JavaScript puro também é chamadovanilla JavaScript.

Parallax Scrolling usando Pure JavaScript

Primeiro, crie o arquivo HTML principal com o código mostrado abaixo. A página HTML consistirá apenas em quatro textos de título.

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

Observe que na linha número 4, para este exemplo, estamos usando myscripts.js arquivo que será armazenado na mesma pasta que o arquivo HTML e o arquivo CSS.

Agora, vamos preparar nosso arquivo CSS conforme mostrado abaixo.

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

Agora vem a parte do JavaScript, crie um arquivo no bloco de notas e salve-o como 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";  
      }  
   });  
});

Análise de Código

Vamos analisar o código JavaScript.

Código de line number 1 to 4 representa a função auxiliar.

Na linha 6, selecionamos nosso elemento de paralaxe e adicionamos scrollevento para a janela. Para determinar quanta área é rolada, estamos usandoscrolledHeightpropriedade. Conforme a tela rola para baixo,backgroundPositionY é atualizado para o elemento paralaxe.

Para diminuir o efeito de paralaxe, nós dividimos por 1,5, este número pode ser alterado para qualquer número que você quiser.

Agora, você poderá ver a página rolando para baixo, conforme mostrado na imagem abaixo.

Usando a biblioteca JavaScript ScrollMagic

Conforme discutido na seção anterior, embora possamos usar JavaScript puro para criar o efeito de paralaxe, existem algumas bibliotecas JavaScript poderosas que irão aprimorar a experiência do usuário. ScrollMagic é uma dessas bibliotecas para criar interações de rolagem paralaxe.

Vamos discutir mais sobre isso com a ajuda de um exemplo dado abaixo -

Note- Neste exemplo, para simplificar, teremos o CSS armazenado em arquivo HTML. Além disso, o código JavaScript estará presente no mesmo documento. Resumindo, criaremos apenas um arquivo HTML e ele terá bibliotecas ScrollMagic referenciadas junto com o CSS necessário.

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

Conforme mostrado no código acima, exigimos referências de bibliotecas JavaScript de line 3 to 6. O código CSS é especificado da linha 9 a 19.

Rede de distribuição de conteúdo

As referências de script da linha 3 a 6 apontam para URLs ScrollMagic Content Delivery Network (CDN). Usar um CDN faz sentido no desenvolvimento de sites modernos, já que você carrega as bibliotecas necessárias sem diminuir a velocidade do seu site.

Se houver personalizações necessárias nas bibliotecas, será necessário hospedar as bibliotecas em seus respectivos servidores para utilizar esses efeitos. Se você estiver usando funcionalidades básicas de uma biblioteca, é eficiente usar o URL do CDN.

O código HTML acima mostra uma imagem separada por 2 divisões. A primeira divisão aparece com um título -These are bricks e a segunda divisão aparece com - Some More Bricks.

Observe que no código CSS da linha 9 a 19, estamos apenas especificando a posição e o estilo do respectivo div de paralaxe.

O trabalho de criar esta paralaxe suave sceneé feito pela biblioteca ScrollMagic. Se você se referir ao código de script da linha 43 a 62, ScrollMagiccontroller é invocado e um scene é criado.

As cenas guiam o DOM para criar o efeito de paralaxe quando 80% da tela está ocupada. JavaScript é usado para entender o gatilho de rolagem. Como resultado, o que você obtém é uma experiência flutuante nesta página.

Note - Considerando a imagem acima como uma imagem GIF, você não conseguirá observar o efeito suave das divisões do texto.

Animações de gatilho

As possibilidades de criar uma experiência de usuário variada são infinitas com a Biblioteca ScrollMagic. Observe os trechos de código fornecidos abaixo para acionar animações na rolagem.

Observe que para isso você precisa de dois arquivos * menos; um arquivo HTML e um arquivo CSS.

Crie um arquivo HTML com o código mostrado abaixo -

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

Agora, crie um arquivo CSS com o código a seguir.

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

Análise de Código

Referindo-se ao código HTML, o código ScrollMagic começa em line 17 e continua até line 25. Nesta seção, estamos criando duas cenas ScrollMagic. A primeira cena é para a imagem do tijolo e a outra é para a animação do banner.

Conforme especificado em setTween função em line 20, quando a ação de rolagem acontece em 40% do tamanho da tela, a próxima cena começa mostrando o banner É isso!

A opacidade do div com id - square é controlado no arquivo CSS em line 10 e line 15.

Como resultado, você verá a animação abaixo na página.

Rolagem Horizontal

Também podemos aplicar a rolagem paralaxe e obter uma rolagem horizontal. A biblioteca ScrollMagic pode ser usada para criar um efeito horizontal de rolagem. Veja o código abaixo.

Embora o código seja direto para criar o efeito de rolagem horizontal, precisaremos da referência jquery para obter o movimento horizontal das telas. Os detalhes do jQuery são fornecidos no próximo capítulo, por enquanto, basta seguir o código fornecido a seguir.

Criaremos três arquivos separados - arquivo HTML para o código principal, arquivo CSS para estilos e arquivo JS para chamadas de função ScrollMagic.

Aqui está o código para o documento 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>

Observe que temos três seções, que aparecerão após a rolagem. As três seções são denotadas por ids title1, title2 e title3 nas linhas 15,19 e 23 respectivamente.

O código para o documento CSS é fornecido abaixo -

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

Análise de Código

As cores de fundo para as três telas (ou seções) são fornecidas em lines 10, 22 e 25.

Estamos calculando a largura relativa de cada tela no código começando em line 13.

O código JavaScript para o ScrollMagic é fornecido abaixo -

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

Observe o triggerHookpropriedade na linha 8. Esta propriedade é responsável por fornecer o efeito de rolagem quando o usuário atinge a conclusão do evento de rolagem. A funçãoTimelineMax é responsável por fornecer o efeito de rolagem horizontal às nossas telas.

Depois de criar os respectivos arquivos, você poderá ver a animação de rolagem horizontal conforme mostrado abaixo.