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 -