() translation by (you can also view the original English article)
Το parallax scrolling είναι μια ενδιαφέρουσα τεχνική, όπου, κατά την κύλιση, οι εικόνες φόντου εμφανίζονται πιο αργά από το περιεχόμενο στο προσκήνιο, δημιουργώντας την ψευδαίσθηση του τρισδιάστατου βάθους. Όσο προγραμμάτιζα να σχεδιάσω εκ νέου την προσωπική μου ιστοσελίδα, πρώτος στόχος μου ήταν να γράψω το συντομότερο και απλούστερο κώδικα για να επιτύχω το καλύτερο δυνατό αποτέλεσμα! Θα σας δείξω πώς το έκανα.
Αν ψάχνετε για ένα γρήγορο τρόπο να ξεκινήσετε με ένα βασικό πρότυπο για το θέμα σας, μια καλή επιλογή μπορεί να είναι το να βρείτε ένα απλό Parallax θέμα. Ή περιηγηθείτε στα Μονοσέλιδα Πρότυπά μας. Επίσης, μπορείτε να βρείτε παρόχους υπηρεσιών στο Envato Studio που θα δημιουργήσουν ιστοσελίδες με parallax scrolling για εσάς.
Σε αυτό το tutorial, θα σας διδάξω την απλούστερη parallax scrolling τεχνική που έχετε ποτέ συναντήσει, οπότε ας ξεκινήσουμε αμέσως!
Βήμα 1: Η Σήμανση
Η τεχνική αυτή περιστρέφεται γύρω από τον έλεγχο της ταχύτητας της εικόνας φόντου. Ας ξεκινήσω με την HTML σήμανση, δημιουργώντας δύο ενότητες μαζί με τα απαιτούμενα χαρακτηριστικά: "data-type" και "data-speed". Μην ανησυχείτε, θα τα εξηγήσουμε αργότερα.
1 |
<section id="home" data-type="background" data-speed="10"> |
2 |
</section>
|
3 |
|
4 |
<section id="about" data-type="background" data-speed="10"> |
5 |
</section>
|
Χρησιμοποιώ την ετικέτα <section> με τα χαρακτηριστικά data-type & data-speed, που εισήχθησαν με την HTML5. Αυτό καθιστά τη σήμανση HTML καθαρότερη και πιο εύκολο να διαβαστεί.
Σύμφωνα με την προδιαγραφή για Custom Data Attributes, οποιοδήποτε χαρακτηριστικό που ξεκινά με data-, θα αντιμετωπίζονται ως μια περιοχή αποθήκευσης για ιδιωτικά δεδομένα. Επιπλέον, αυτό δεν θα επηρεάσει τη διάταξη ή την παρουσίαση.
Δεδομένου ότι το μόνο που πρέπει να κάνουμε είναι να ελέγξουμε την ταχύτητα των εικόνων φόντου, θα χρησιμοποιήσουμε data-type = "background" και data-speed = "10" ως βασικά χαρακτηριστικά για να καθορίσετε τις απαραίτητες παραμέτρους.
Ξέρω τι σκέφτεστε: ανησυχείτε για τον IE. Μη φοβάστε. Έχω μια λύση και γι'αυτό! Θα το συζητήσουμε σε πολύ λίγο.
Στη συνέχεια, ας προστεθεί το περιεχόμενο μέσα στην ετικέτα <article> μέσα σε κάθε <section>.
1 |
<section id="home" data-type="background" data-speed="10" class="pages"> |
2 |
<article>I am absolute positioned</article> |
3 |
</section>
|
4 |
|
5 |
<section id="about" data-type="background" data-speed="10" class="pages"> |
6 |
<article>Simple Parallax Scroll</article> |
7 |
</section>
|
Αυτό που επιχειρούμε να κάνουμε εδώ είναι το φόντο του <section> να έχει βραδύτερη ταχύτητα κύλισης από το περιεχόμενό του, δηλαδή το <article>. Αυτό θα βοηθήσει να δημιουργήσουμε μια ψευδαίσθηση parallax. Πριν προχωρήσουμε στη μαγεία της jQuery, ας προσθέσουμε τις εικόνες φόντου στο CSS μας για κάθε <section>.
1 |
|
2 |
#home { |
3 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
4 |
}
|
5 |
|
6 |
#about { |
7 |
background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; |
8 |
}
|
Κατά την προσθήκη φόντου και στις δύο ενότητες, θα πρέπει να μοιάζουν κάπως έτσι:
Ας προσθέσουμε λίγο ακόμα CSS για να δώσουμε στυλ και ενδιαφέρον στη σελίδα!
1 |
#home { |
2 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
3 |
height: 1000px; |
4 |
margin: 0 auto; |
5 |
width: 100%; |
6 |
max-width: 1920px; |
7 |
position: relative; |
8 |
}
|
9 |
|
10 |
#home article { |
11 |
height: 458px; |
12 |
position: absolute; |
13 |
text-align: center; |
14 |
top: 150px; |
15 |
width: 100%; |
16 |
}
|
17 |
|
18 |
#about { |
19 |
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
20 |
height: 1000px; |
21 |
margin: 0 auto; |
22 |
width: 100%; |
23 |
max-width: 1920px; |
24 |
position: relative; |
25 |
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); |
26 |
box-shadow: 0 0 50px rgba(0,0,0,0.8); |
27 |
}
|
28 |
|
29 |
#about article { |
30 |
height: 458px; |
31 |
position: absolute; |
32 |
text-align: center; |
33 |
top: 150px; |
34 |
width: 100%; |
35 |
}
|
Τώρα θα πρέπει να δείχνει κάπως έτσι...
Βήμα 2: Ο Μαγικός Κώδικας
Ναι, σωστά! Εδώ ξεκινάει η μαγεία! Χρησιμοποιώντας jQuery, θα ξεκινήσουμε με την κλασική μέθοδο document.ready() για να βεβαιωθούμε ότι η σελίδα έχει φορτωθεί και είναι έτοιμη να τροποποιηθεί.
1 |
$(document).ready(function(){
|
2 |
|
3 |
|
4 |
}); |
Η τεχνική αυτή βασίζεται στον έλεγχο της ταχύτητας της εικόνας φόντου που υπάρχει και στα δύο τμήματα.
Τώρα εδώ χρειάζομαι την προσοχή σας. Το πρώτο πράγμα που συμβαίνει εδώ κάτω, είναι ότι κάνουμε επαναλήψεις πάνω από κάθε <section> στη σελίδα, που έχει το χαρακτηριστικό data-type="background".
1 |
$(document).ready(function(){
|
2 |
|
3 |
$('section[data-type="background"]').each(function(){
|
4 |
var $bgobj = $(this); // assigning the object |
5 |
}); |
6 |
|
7 |
}); |
Προσθέτουμε άλλη μια συνάρτηση, .scroll(), εντός της .each(), η οποία καλείται όταν ο χρήστης αρχίζει να σκρολάρει.
1 |
$(window).scroll(function() {
|
2 |
|
3 |
}); |
Πρέπει να προσδιορίσουμε πόσο επάνω έκανε κύλιση ο χρήστης, και στη συνέχεια, διαιρούμε την τιμή αυτή από την τιμή data-speed, που αναφέρεται στην σήμανση.
1 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
$window.scrollTop(): παίρνουμε την τρέχουσα τιμή κύλισης από την κορυφή. Αυτό ουσιαστικά καθορίζει πόσο ο χρήστης έχει κυλίσει προς τα επάνω. $bgobj.data('speed') αναφέρεται στην data-speed που έχει αντιστοιχιστεί στη σήμανση, και το yPos είναι η τελική τιμή που πρέπει να εφαρμόσουμε για να κυλίσει. Ωστόσο, θα είναι μια αρνητική τιμή, επειδή έχουμε να μετακινήσουμε το πλαίσιο προς την αντίθετη κατεύθυνση από την κύλιση του χρήστη.
Ας ερευνήσουμε λίγο περισσότερο με ένα παράδειγμα:
Στην παραπάνω εικόνα, το data-speed είναι 10, και ας υποθέσουμε ότι το παράθυρο του προγράμματος περιήγησης έχει κυλίσει 57px. Αυτό σημαίνει ότι 57px διαιρεμένο με 10 = 5.7px.
1 |
// Put together our final background position |
2 |
var coords = '50% '+ yPos + 'px'; |
3 |
|
4 |
// Move the background |
5 |
$bgobj.css({ backgroundPosition: coords });
|
Το τελευταίο πράγμα που χρειάζεται να κάνουμε είναι να ορίσουμε την τελική θέση του φόντου σε μια μεταβλητή. Προκειμένου να διατηρήσουμε την οριζόντια θέση του φόντου ως στατική, έχουμε ορίσει το 50% ως το xPosition. Στη συνέχεια, προσθέσαμε το yPos ως το yPosition, και, τέλος, δώσαμε τις συντεταγμένες του φόντου στο φόντο του <section> μας: $bgobj.css ({backgroundPosition: coords});.
Ο τελικός κώδικάς σας μπορεί να μοιάζει κάπως έτσι:
1 |
$(document).ready(function(){
|
2 |
$('section[data-type="background"]').each(function(){
|
3 |
var $bgobj = $(this); // assigning the object |
4 |
|
5 |
$(window).scroll(function() {
|
6 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
7 |
|
8 |
// Put together our final background position |
9 |
var coords = '50% '+ yPos + 'px'; |
10 |
|
11 |
// Move the background |
12 |
$bgobj.css({ backgroundPosition: coords });
|
13 |
}); |
14 |
}); |
15 |
}); |
Τα καταφέραμε! Δοκιμάστε το και μόνοι σας.
IE Fix
Υπάρχει μια τελευταία διόρθωση: παλαιότεροι IE δεν μπορούν να εμφανίσουν τις ετικέτες <section> και <article>. Αυτό είναι εύκολο να διορθωθεί, θα χρησιμοποιήσουμε την κλασική λύση τη δημιουργίας των στοιχείων, γεγονός που κάνει το πρόγραμμα περιήγησης να αναγνωρίσει μαγικά τις ετικέτες HTML5.
1 |
// Create HTML5 elements for IE |
2 |
|
3 |
document.createElement("article");
|
4 |
document.createElement("section");
|
Επιπλέον, πρέπει να χρησιμοποιήσετε ένα βασικό αρχείο CSS reset ώστε όλα τα προγράμματα περιήγησης να το εμφανίζουν όμορφα. Ευτυχώς, εργαλεία, όπως το HTML5 Boilerplate κάνουν το μεγαλύτερο κομμάτι της δουλειάς για εμάς, όταν πρόκειται για cross-browser ομαλοποίηση.
Αυτό ήταν το tutorial μας! Οποιεσδήποτε ερωτήσεις ή σημειώσεις που θα θέλατε να προσθέσετε, αφήστε τα στα σχόλια παρακάτω!
Και αν ψάχνετε για μια γρήγορη λύση με επαγγελματικά αποτελέσματα, τότε περιηγηθείτε στη σελίδα μας με επιλογές σε Parallax Theme και One Page Template, διαθέσιμα για αγορά στο ThemeForest.
