Techniques Photoshop

Dans les chapitres précédents, nous avons compris à quel point les bons effets utilisant les bibliothèques JavaScript ajoutent au site Web. JavaScript, lorsqu'il est associé à Photoshop, offre une flexibilité et une facilité phénoménales pour ajouter un défilement parallaxe à votre site Web.

Dans ce chapitre, nous allons examiner trois plugins Photoshop pour ajouter l'effet de défilement de parallaxe. Tout comme nous l'avons référencé dans le chapitre précédent pour JavaScript, nous allons utiliser des références Photoshop dans notre code HTML pour créer un puissant défilement de parallaxe Photoshop.

Un point important à noter à propos des plugins Photoshop est que souvent les plugins ne sont pas mis à jour, vous voudrez donc faire des recherches avant de commencer à utiliser des plugins pour le défilement de parallaxe.

Défilement de parallaxe à l'aide de Parallax.js simple

Parallax.js en utilisant le plugin Photoshop, nous pouvons créer un effet de défilement de parallaxe sans trop de tracas. Considérer le plugin jQuery nécessite l'inclusion de bibliothèques haut de gamme telles que bootstrap. Notez que dans ce chapitre aura des balises HTML5 dans le code.

Regardons le fichier HTML ci-dessous -

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

Code d'analyse

Les extraits de code ci-dessus montrent le code d'une page avec deux images et un exemple de texte entre elles.

Comme vous pouvez le voir, le code commence par <!DOCTYPE html>C'est la manière typique de faire savoir aux navigateurs que le code est basé sur HTML5.

la <meta> balises de line 4 to 6montre le code qui est machine à interpréter. Vous ne pourrez pas voir l'impact de ce code. La chose importante à noter ici est - avecmeta tag, les développeurs Web obtiennent un contrôle amélioré sur les données affichées.

Aussi sur line 8 and 9, Nous avons inclus les feuilles de style CSS avec Bootstrap. Pour une police et une typographie spécifiques, Bootstrap est la bibliothèque largement utilisée.

Lines 10 and 11prenez soin des bibliothèques Photoshop et Parallax.js. Il est important d'inclure le contrôle sur Parallax.js pour avoir l'effet des images de parallaxe. Vous pourrez trouverdata-parallax propriété avec div sur line 21, Ce qui est suffisant pour appeler la bibliothèque parallax.js pour l'effet de parallaxe requis.

L'effet de parallaxe peut être vu dans le code sur lines 21 et line 40. Les propriétés importantes qui font que cet effet se produit avec parallax.js sont -data-parallax, data-image-src, data-natural-width, data-natural-height.

Avec le fichier CSS, nous devons fournir une seule propriété. C'est comme indiqué ci-dessous -

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

Dans le code HTML ci-dessus, nous avons créé une structure spécifique pour les fichiers CSS. Nous aurons un dossier appelécss, qui aura des fichiers CSS - bootstrap.min.css et style.css.

Une fois que tout est terminé avec les documents, vous pourrez voir l'effet de parallaxe comme indiqué ci-dessous -

Parallaxator à l'aide du plugin Photoshop

Parallaxator best of Photoshop plugin fournit des effets de défilement de parallaxe et est facile à utiliser. Vous pouvez télécharger le plugin Parallaxator, ses fichiers CSS et JS à partir de ce lien - Parallaxator GitHub .

Une fois les fichiers CSS et JS téléchargés, vous pouvez utiliser le code ci-dessous pour créer le code 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>

Code d'analyse

L'effet de parallaxe est fourni par la classe parallax_child qui est fournie avec chaque balise img. Le parallax_child est connecté avec les fichiers CSS et JS qui sont fournis ci-dessous.

Pour que le parallaxateur du plugin fonctionne, nous avons inclus fm.parallaxator.jquery.css et fm.parallaxator.jquery.js. Ces fichiers doivent être disponibles dans le même répertoire que le fichier HTML.

Le code pour CSS est comme indiqué ci-dessous -

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

En raison du code ci-dessus, vous pourrez voir l'effet de parallaxe.

Plug-in jQuery Stellar.js pour le défilement parallaxe

Stellar.js est un autre ajout à la liste des plugins Photoshop de parallaxe. Bien qu'il ne soit plus maintenu, les développeurs qui ont utilisé sa version stable peuvent facilement utiliser l'effet de défilement de parallaxe. Il est compatible avec les dernières versions de Photoshop et facile à mettre en œuvre.

Vous devrez télécharger la dernière version de jquery.stellar.js depuis le site officiel du plugin Stellar.js . Une fois téléchargé, créez ce fichier de plugin dans le même dossier que vos fichiers HTML et CSS.

Jetons un œil au code 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>

Code d'analyse

Pour que Stellar.js fonctionne, nous avons inclus la bibliothèque juste après le référencement du plugin Photoshop sur jquery.stellar.js line 6.

Les fonctions de parallaxe stellaire sont appelées dans la balise de script de line 8 to line 15. Avec la propriétédata-stellar-background-ratio, Nous définissons un décalage pour les images affichées. Ceci est fait surlines 19,20,21 and 22.

Le code CSS est donné ci-dessous -

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

Une fois les fichiers créés et stellar.js, le fichier du plugin est inclus dans le même dossier, vous devriez pouvoir voir l'effet comme indiqué dans la capture d'écran ci-dessous -