Tecniche di Photoshop
Nei capitoli precedenti, abbiamo capito come i buoni effetti che utilizzano le librerie JavaScript aggiungono al sito web. JavaScript, se abbinato a Photoshop, offre una flessibilità e una facilità fenomenali per aggiungere lo scorrimento parallasse al tuo sito web.
In questo capitolo, esamineremo tre plugin di Photoshop per aggiungere l'effetto di scorrimento parallasse. Proprio come abbiamo fatto riferimento nel capitolo precedente per JavaScript, utilizzeremo i riferimenti di Photoshop nel nostro codice HTML per creare un potente scorrimento parallasse di Photoshop.
Un punto importante da notare sui plug-in di Photoshop è che spesso i plug-in non vengono aggiornati, quindi dovresti fare qualche ricerca prima di iniziare a utilizzare qualsiasi plug-in per lo scorrimento del parallasse.
Parallax Scrolling utilizzando il semplice Parallax.js
Parallax.js usando il plugin di Photoshop, possiamo creare effetti di scorrimento parallasse senza troppi problemi. Considerare il plug-in jQuery richiede l'inclusione di librerie di fascia alta come bootstrap. Nota che in questo capitolo saranno presenti tag HTML5 nel codice.
Diamo un'occhiata al file HTML mostrato di seguito:
<!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>Codice di analisi
Gli snippet di codice sopra mostrano il codice di una pagina con due immagini e un testo di esempio tra di loro.
Come puoi vedere, il codice inizia con <!DOCTYPE html>Questo è il modo tipico per far sapere ai browser che il codice è basato su HTML5.
il <meta> tag da line 4 to 6mostra il codice che è macchina per l'interpretazione. Non sarai in grado di vedere l'impatto di questo codice. La cosa importante da notare qui è - conmeta tag, gli sviluppatori web ottengono un maggiore controllo sui dati visualizzati.
Inoltre, su line 8 and 9, Abbiamo incluso i fogli di stile CSS insieme a Bootstrap. Per un carattere e una tipografia specifici, Bootstrap è la libreria ampiamente utilizzata.
Lines 10 and 11prenditi cura delle librerie Photoshop e Parallax.js. È importante includere il controllo su Parallax.js per avere l'effetto delle immagini di parallasse. Sarai in grado di trovaredata-parallax proprietà con div sopra line 21, Che è sufficiente per chiamare la libreria parallax.js per l'effetto di parallasse richiesto.
L'effetto di parallasse può essere visto nel codice attivo lines 21 e line 40. Proprietà importanti che fanno sì che questo effetto si verifichi con parallax.js sono:data-parallax, data-image-src, data-natural-width, data-natural-height.
Con il file CSS, dobbiamo fornire solo una proprietà. È come mostrato di seguito -
.parallax-container {
height: 500px;
width: 100%;
}Nel codice HTML sopra, abbiamo creato una struttura specifica per i file CSS. Avremo una cartella chiamatacss, che avrà file CSS - bootstrap.min.css e style.css.
Una volta che tutto è finito con i documenti, sarai in grado di vedere l'effetto di parallasse come mostrato di seguito:
Parallaxator utilizzando Photoshop Plugin
Parallaxator, il migliore dei plugin di Photoshop, fornisce effetti di scorrimento parallasse ed è facile da usare. Puoi scaricare il plugin Parallaxator, i suoi file CSS e JS da questo link - Parallaxator GitHub .
Una volta scaricati i file CSS e JS, è possibile utilizzare il codice mostrato di seguito per creare il codice 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>Codice di analisi
L'effetto di parallasse è fornito dalla classe parallax_child fornita con ogni tag img. Parallax_child è collegato ai file CSS e JS forniti di seguito.
Affinché il parallaxator funzioni il plugin, abbiamo incluso fm.parallaxator.jquery.css e fm.parallaxator.jquery.js. Questi file devono essere disponibili nella stessa directory del file HTML.
Il codice per CSS è come mostrato di seguito:
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;
}Come risultato del codice precedente, sarai in grado di vedere l'effetto di parallasse.
Plugin jQuery Stellar.js per lo scorrimento parallasse
Stellar.js è un'altra aggiunta all'elenco dei plugin di Photoshop per parallasse. Sebbene non sia più mantenuto, gli sviluppatori che hanno utilizzato la sua build stabile, sono in grado di utilizzare facilmente l'effetto di scorrimento parallasse. È compatibile con le ultime versioni di Photoshop e facile da implementare.
Dovrai scaricare l'ultimo jquery.stellar.js dal sito Web ufficiale per il plug-in Stellar.js . Una volta scaricato, crea questo file plugin nella stessa cartella dei tuoi file HTML e CSS.
Diamo uno sguardo al codice 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>Codice di analisi
Affinché Stellar.js funzioni, abbiamo incluso la libreria subito dopo aver fatto riferimento al plug-in di Photoshop su jquery.stellar.js line 6.
Le funzioni per la parallasse stellare sono chiamate nel tag di script da line 8 to line 15. Con la proprietàdata-stellar-background-ratio, Stiamo impostando un offset per le immagini visualizzate. Questo viene fattolines 19,20,21 and 22.
Il codice CSS è fornito di seguito:
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 volta che entrambi i file sono stati creati e stellar.js il file del plugin è incluso nella stessa cartella, dovresti essere in grado di vedere l'effetto come mostrato nello screenshot qui sotto -
