Técnicas de Photoshop

En los capítulos anteriores, hemos entendido cómo los buenos efectos del uso de bibliotecas de JavaScript agregan al sitio web. JavaScript, cuando se combina con Photoshop, proporciona una flexibilidad fenomenal y facilidad para agregar desplazamiento de paralaje a su sitio web.

En este capítulo, veremos tres complementos de Photoshop para agregar el efecto de desplazamiento de paralaje. Al igual que hicimos referencia a JavaScript en el capítulo anterior, vamos a utilizar referencias de Photoshop en nuestro código HTML para crear un potente desplazamiento de paralaje de Photoshop.

Un punto importante a tener en cuenta sobre los complementos de Photoshop es que, a menudo, los complementos no se actualizan, por lo que le recomendamos que investigue un poco antes de comenzar a usar cualquier complemento para el desplazamiento de paralaje.

Desplazamiento de Parallax usando Parallax.js simple

Parallax.js utilizando el complemento de Photoshop, podemos crear un efecto de desplazamiento de paralaje sin muchas molestias. Tener en cuenta el complemento jQuery requiere la inclusión de bibliotecas de alta gama como bootstrap. Tenga en cuenta que en este capítulo habrá etiquetas HTML5 en el código.

Veamos el archivo HTML que se muestra a continuación:

<!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álisis

Los fragmentos de código anteriores muestran el código de una página con dos imágenes y un texto de muestra entre ellas.

Como puede ver, el código comienza con <!DOCTYPE html>Esta es la forma típica de informar a los navegadores que el código está basado en HTML5.

la <meta> etiquetas de line 4 to 6muestra el código que es una máquina para la interpretación. No podrá ver el impacto de este código. Lo importante a tener en cuenta aquí es - conmeta etiqueta, los desarrolladores web obtienen un control mejorado sobre los datos que se muestran.

También en line 8 and 9, Hemos incluido las hojas de estilo CSS junto con Bootstrap. Para una fuente y tipografía específicas, Bootstrap es la biblioteca más utilizada.

Lines 10 and 11cuidar las bibliotecas de Photoshop y Parallax.js. Es importante incluir control sobre Parallax.js para tener el efecto de imágenes de paralaje. Podrás encontrardata-parallax propiedad con div en line 21, Que es suficiente para llamar a la biblioteca parallax.js para el efecto de paralaje requerido.

El efecto de paralaje se puede ver en el código de lines 21 y line 40. Las propiedades importantes que hacen que este efecto suceda con parallax.js son:data-parallax, data-image-src, data-natural-width, data-natural-height.

Con el archivo CSS, tenemos que proporcionar solo una propiedad. Es como se muestra a continuación:

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

En el código HTML anterior, hemos creado una estructura específica para archivos CSS. Tendremos una carpeta llamadacss, que tendrá archivos CSS - bootstrap.min.css y style.css.

Una vez que todo haya terminado con los documentos, podrá ver el efecto de paralaje como se muestra a continuación:

Parallaxator usando el complemento de Photoshop

Parallaxator, el mejor complemento de Photoshop, proporciona efectos de desplazamiento de paralaje y es fácil de usar. Puede descargar el complemento Parallaxator, sus archivos CSS y JS desde este enlace: Parallaxator GitHub .

Una vez que se descargan los archivos CSS y JS, puede usar el código que se muestra a continuación para crear el 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álisis

El efecto de paralaje lo proporciona la clase parallax_child que se proporciona con cada etiqueta img. El parallax_child está conectado con archivos CSS y JS que se proporcionan a continuación.

Para que el plugin parallaxator funcione, hemos incluido fm.parallaxator.jquery.css y fm.parallaxator.jquery.js. Estos archivos deben estar disponibles en el mismo directorio que el archivo HTML.

El código de CSS es el que se muestra a continuación:

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 del código anterior, podrá ver el efecto de paralaje.

Complemento Stellar.js jQuery para Parallax Scrolling

Stellar.js es otra adición a la lista de complementos de Photoshop de paralaje. Aunque ya no se mantiene, los desarrolladores que han usado su construcción estable pueden usar el efecto de desplazamiento de paralaje con facilidad. Es compatible con las últimas versiones de Photoshop y fácil de implementar.

Deberá descargar el último jquery.stellar.js del sitio web oficial del complemento Stellar.js . Una vez descargado, cree este archivo de complemento en la misma carpeta que sus archivos HTML y CSS.

Echemos un vistazo al 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álisis

Para que Stellar.js funcione, hemos incluido la biblioteca justo después de que se hace referencia al complemento de Photoshop en jquery.stellar.js line 6.

Las funciones para Stellar paralaje se llaman en la etiqueta de script de line 8 to line 15. Con la propiedaddata-stellar-background-ratio, Establecemos un desplazamiento para las imágenes que se muestran. Esto se hace enlines 19,20,21 and 22.

El código CSS se proporciona a continuación:

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

Una vez que se crean los archivos y stellar.js, el archivo del complemento se incluye en la misma carpeta, debería poder ver el efecto como se muestra en la captura de pantalla que se muestra a continuación: