Técnicas de Photoshop

Nos capítulos anteriores, entendemos como os bons efeitos do uso de bibliotecas JavaScript agregam ao site. JavaScript, quando combinado com Photoshop, fornece flexibilidade fenomenal e facilidade para adicionar rolagem paralaxe ao seu site.

Neste capítulo, veremos três plug-ins do Photoshop para adicionar o efeito de rolagem paralaxe. Assim como mencionamos no capítulo anterior para JavaScript, usaremos referências do Photoshop em nosso código HTML para criar uma poderosa rolagem de paralaxe no Photoshop.

Um ponto importante a ser observado sobre os plug-ins do Photoshop é que muitas vezes os plug-ins não são atualizados, portanto, você pode querer fazer alguma pesquisa antes de começar a usar qualquer plug-in para rolagem paralaxe.

Parallax Scrolling usando Parallax.js simples

Parallax.js usando o plugin do Photoshop, podemos criar o efeito de rolagem paralaxe sem muitos aborrecimentos. Considerar o plugin jQuery requer a inclusão de bibliotecas de ponta, como bootstrap. Observe que neste capítulo haverá tags HTML5 no código.

Vejamos o arquivo HTML mostrado abaixo -

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>  
      <meta charset = "utf-8">  
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      
      <link href = "css/bootstrap.min.css" rel = "stylesheet">  
      <link href = "css/style.css" rel = "stylesheet">  

      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
   </head>  

   <body>   
      <section>  
         <div class = "container">  
            <h1>Example on Parallax.js</h1>  
            <p data-pg-collapsed>
               This is an example of parallax scrolling using Parallax.js jQuery Plugin.
            </p>              
            <br/>  
         </div>  
      </section>  
      
      <div class = "parallax-container" data-parallax = "scroll" 
         data-position = "top" data-bleed = "10" 
         data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg" 
         data-natural-width = "1600" data-natural-height = "800" >
      </div>  
      <section>  
         <div class = "container">  
            <h2 id = "sampleLorem">Sample Text Here</h2>  
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
               odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
               quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
               mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
               Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
               litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
               <br/>
               <br/>  
               
               Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
               quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
               tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
               risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
               quis ligula lacinia aliquet. Mauris ipsum.  
               <br/>
               <br/>  
               
               Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
               Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
               litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
               ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
               diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
               Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
               Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu 
               magna luctus suscipit.   
               <br/>
               <br/>  
               
               Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
               vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
               eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
               ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
               blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
               Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
               viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
               malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
               Morbi in dui quis est pulvinar ullamcorper.   
               <br/>
               <br/>  
               
               Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
               aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
               venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
               sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
               lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
               accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium 
               blandit orci.   
               <br/>
               <br/>  
               
               Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
               convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
               iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
               imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus 
               et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
               nisi. Nulla quis sem at nibh elementum imperdiet.   
               <br/>
               <br/>  
            </p>  
         </div>  
      </section>  
      
      <div class = "parallax-container" data-parallax = "scroll" 
         data-bleed = "10" data-speed = "0.2" 
         data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg" 
         data-natural-width = "1600" data-natural-height = "801" 
         data-pg-name = "PARALLAX IMAGE 002">
      </div>  
   </body>  
</html>

Código de Análise

Os trechos de código acima mostram o código de uma página com duas imagens e um texto de amostra entre elas.

Como você pode ver, o código começa com <!DOCTYPE html>Essa é a maneira típica de informar aos navegadores que o código é baseado em HTML5.

a <meta> tags de line 4 to 6mostra o código que é máquina de interpretação. Você não será capaz de ver o impacto deste código. Uma coisa importante a notar aqui é - commeta tag, os desenvolvedores da web obtêm um controle aprimorado sobre os dados exibidos.

Também em line 8 and 9, Incluímos as folhas de estilo CSS junto com o Bootstrap. Para uma fonte e tipografia específicas, Bootstrap é a biblioteca amplamente usada.

Lines 10 and 11cuidar das bibliotecas do Photoshop e Parallax.js. É importante incluir controle sobre Parallax.js para ter o efeito de imagens paralaxe. Você será capaz de encontrardata-parallax propriedade com div em line 21, O que é suficiente para chamar a biblioteca parallax.js para o efeito de paralaxe necessário.

O efeito de paralaxe pode ser visto no código em lines 21 e line 40. Propriedades importantes que fazem esse efeito acontecer com parallax.js são -data-parallax, data-image-src, data-natural-width, data-natural-height.

Com o arquivo CSS, temos que fornecer apenas uma propriedade. É como mostrado abaixo -

.parallax-container {  
   height: 500px;  
   width: 100%;  
}

No código HTML acima, criamos uma estrutura específica para arquivos CSS. Teremos uma pasta chamadacss, que terá arquivos CSS - bootstrap.min.css e style.css.

Depois que tudo estiver concluído com os documentos, você poderá ver o efeito de paralaxe conforme mostrado abaixo -

Parallaxator usando Photoshop Plugin

Parallaxator, o melhor plugin do Photoshop, oferece efeitos de rolagem paralaxe e é fácil de usar. Você pode baixar o plugin Parallaxator, seus arquivos CSS e JS neste link - Parallaxator GitHub .

Depois que os arquivos CSS e JS forem baixados, você pode usar o código mostrado a seguir para criar o código HTML.

<!DOCTYPE html>  
<html>  
   <head>  
      <title>Parallaxator Plugin</title>  
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">  
      <link rel = "stylesheet" href = "fm.parallaxator.jquery.css">  

      <link rel = "stylesheet" href = "style.css">  
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "fm.parallaxator.jquery.js"></script>  
   </head>  
   <body>  
      <div class = "section1 parallaxator">  
         <img class = "parallax_child" src = "img/landscape.jpg" width = "100%">  
         <h1 class = "mega_text parallax_child">Nature</h1>  
      </div>  
      
      <div class = "section2 parallaxator">  
         <img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
         <h1 class = "mega_text parallax_child">
            Architecture<br>
         </h1>  
      </div>  
      
      <div class = "section3 parallaxator">  
         <img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
         <h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">  
            Architecture again!  
         </h1>  
      </div>  
   </body>
   
</html>

Código de Análise

O efeito de paralaxe é fornecido pela classe parallax_child, que é fornecida com cada tag img. O parallax_child está conectado aos arquivos CSS e JS fornecidos abaixo.

Para que o plugin do paralaxador funcione, incluímos fm.parallaxator.jquery.css e fm.parallaxator.jquery.js. Esses arquivos devem estar disponíveis no mesmo diretório que o arquivo HTML.

O código para CSS é mostrado abaixo -

body {  
   font-family: sans-serif;  
   margin: 0;  
   padding: 0;  
} 
 
.section1,.section2, .section3 {  
   border-bottom: 32px solid #fff;  
   padding-top: 40%;  
}  

.section1 {  
   background-color: #fdb;  
}  

.section2 {  
   background-color: #bdf;  
}  

.section3 {  
   background-color: #fbd;  
} 
 
.mega_text {  
   font-weight: bold;  
   font-size: 100px;  
   margin: 0;  
   text-shadow: 0 10px 100px #fff, 0 0 15px #fff;  
   padding: 64px;  
   display: block;  
}

Como resultado do código acima, você poderá ver o efeito de paralaxe.

Plug-in Stellar.js jQuery para Parallax Scrolling

Stellar.js é outra adição à lista de plug-ins paralaxe do Photoshop. Embora não seja mais mantido, os desenvolvedores que usaram sua versão estável podem usar o efeito de rolagem paralaxe com facilidade. É compatível com as últimas versões do Photoshop e fácil de implementar.

Você precisará baixar o jquery.stellar.js mais recente do site oficial do plug- in Stellar.js . Uma vez baixado, crie este arquivo de plugin na mesma pasta que seus arquivos HTML e CSS.

Vamos dar uma olhada no código HTML.

<!doctype html>  
<html>  
   <head>  
      <title>Stellar.js Demo</title>  
      <link href = "style.css" rel = "stylesheet">  
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "jquery.stellar.js"></script>  
      
      <script>  
         $(function(){  
            $.stellar({  
               horizontalScrolling: false,  
               verticalOffset: 40  
            });  
         });  
      </script>  
   </head>  
   
   <body>  
      <h1>Demo Site</h1>  
      <div class = "image architecture" data-stellar-background-ratio = "0.5">
         <span>Architecture</span>
      </div>  
      
      <div class = "image abstract" data-stellar-background-ratio = "0.5">
         <span>Abstract</span>
      </div>  
      
      <div class = "image landscape" data-stellar-background-ratio = "0.5">
         <span>Landscape</span>
      </div>  
      
      <div class = "image window" data-stellar-background-ratio = "0.5">
         <span>Window</span>
      </div>  
   </body>
   
</html>

Código de Análise

Para o Stellar.js funcionar, incluímos a biblioteca logo após o plugin do Photoshop ser referenciado em jquery.stellar.js line 6.

Funções para paralaxe estelar são chamadas na tag de script de line 8 to line 15. Com a propriedadedata-stellar-background-ratio, Estamos definindo um deslocamento para as imagens exibidas. Isso é feito emlines 19,20,21 and 22.

O código CSS é fornecido abaixo -

body {  
   font-family: helvetica, arial;  
   padding-top: 40px;  
} 
 
h1 {
   background-color: black;  
   color: white;  
   height: 40px;  
   font-size: 24px;  
   font-weight: normal;  
   left: 0;  
   line-height: 40px;  
   position: fixed;  
   text-align: center;  
   top: 0;  
   width: 100%;  
   z-index: 1;  
} 
 
h1 a {  
   border-bottom: 1px solid white;  
   color: white;  
   display: inline-block;  
   line-height: 30px;  
   text-decoration: none;  
}  

.image {  
   background-attachment: fixed;  
   background-position: 50% 0;  
   background-repeat: no-repeat;  
   height: 450px;  
   position: relative;  
}  

.image span {  
   bottom: 0;  
   color: white;  
   display: block;  
   left: 50%;  
   margin-left: -640px;  
   font-size: 38px;  
   padding: 10px;  
   position: absolute;  
   text-shadow: 0 2px 0 black, 0 0 10px black;  
   width: 1280px;  
}  

.architecture {  
   background-image: url(img/architecture.jpg);  
}  

.abstract {  
   background-image: url(img/ruin.jpg);  
} 
 
.landscape {  
   background-image: url(img/landscape.jpg);  
}  

.window {  
   background-image: url(img/window.jpg); 
}

Uma vez que ambos os arquivos são criados e stellar.js, o arquivo do plugin é incluído na mesma pasta, você deve ser capaz de ver o efeito conforme mostrado na imagem abaixo -