Τεχνικες για ενα καλο parallax scrolling

Parallax Scrolling ονομάζουν μια ενδιαφέρον τάση παρουσίασης σε ιστοσελίδες που δίνουν στον θεατή-επισκέπτη την αίσθηση oτι κινείται… είτε αυτός.. είτε η οθόνη του! Parallax, λοιπόν, με ρίζες στην ελληνική λέξη ‘παράλλαξη’, ορίζεται ως:

Η αλλαγή της θέσης δύο στατικών σημείων, που οφείλεται στην κίνηση του παρατηρητή.

Parallax Demostration

Εάν γίνεται πιο παρατηρητικοί στην καθημερινότητα σας, θα παρατήρησε ότι δε κινήστε μόνο εσείς αλλά και τα πάντα γύρω σας!!

Απ’το 2009 περίπου, όπου και ξεκίνησε η τάση αυτή, πολύ ενδιαφέροντα projects έχουν έρθει στην επιφάνεια με πρώτους παίχτες την Nike, την Samsung κι άλλες.  Με μεγάλη επιτυχία, πολλοί σχεδιαστές καταφέραν να δημιουργήσουν μια μοναδική εμπειρία στους επισκέπτες τους, χρησιμοποιώντας απλούς κανόνες που συναντάμε καθημερινά έξω στην φύση.

Θα προσπαθήσω σ’ αυτό το post, να εξηγήσω τις τεχνικές μερικών απλών υλοποιήσεων για να σας δώσω την ώθηση να τις χρησιμοποιήσετε.

Το βοήθημα του Richard Sepherd, μπορείτε να το δείτε εδώ, μπορεί να μας βοηθήσει αρχικά στην κατανόηση της παράλλαξης. Κυλώντας την σελίδα, παρατηρούμε ότι η εικόνα του παρασκηνίου καθώς και το κάθε στοιχείο της σελίδας μετατοπίζεται με διαφορετική ταχύτητα, η οποία ορίζεται γραμμικά ανάλογα με το βάθος του στοιχείου. Τα πιο πίσω στοιχεία με μεγαλύτερη ταχύτητα ή και το αντίστροφο. Κάπως έτσι δίνουμε στον θεατή την αίσθηση της κίνησης!!!

Η υλοποίηση του προηγούμενου παραδείγματος είναι αρκετά απλή. Αρχικά, χρησιμοποιώντας custom data attributes ορίζουμε για κάθε στοιχείο μας την ταχύτητα του:

<section id="first" data-speed="8" data-type="background">
  <div data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<section id="third" class="story" data-speed="6" data-type="background" data-offsetY="250">
  <div class="photograph" data-type="sprite" data-offsetY="1250" data-Xposition="25%" data-speed="2"></div>

Σε κάθε στοιχείο λοιπόν ορίζουμε την ταχύτητα του(data-speed), τον ρόλο του στη σελίδα(data-type), την μετατόπιση του στον οριζόντιο άξονα(data-offsetY) και την τοποθεσία του στον κάθετο άξονα(data-Xposition). Αυτές φυσικά οι ιδιότητες δεν μπορούν να κάνουν τίποτα από μόνες τους, θα μας βοηθήσουν όμως στην σύνταξη της κίνησης στην Javascript. Δείτε παρακάτω:

Χρησιμοποιώντας την γνωστή βιβλιοθήκη jQuery, ορίζουμε μια βασική λειτουργία κάθε φόρα που ο χρήστης κάνει scroll στο παράθυρο του. Έτσι, για κάθε στοιχείο που έχουμε ορίσει μια συγκεκριμένη ιδιότητα, θ’ αλλάξουμε αυτήν την ιδιότητα στην τιμή που έχουμε ορίσει.

$('section[data-type="background"]').each(function(){
 // Τεχνική Caching
 var $self = $(this),
 offsetCoords = $self.offset(),
 topOffset = offsetCoords.top;
 // Μόλις ο χρήστης κυλίσει το παράθυρο του
 $(window).scroll(function() {
  // Εαν βρισκόμαστε στην συγκεκριμένη περιοχή
  if ( ($window.scrollTop() + $window.height()) > (topOffset) && ( (topOffset + $self.height()) > $window.scrollTop() ) ) { // Μετατόπισε τις εικόνες του background στην ταχύτητα που έχουμε ορίσει
   // η μεταβλητή yPos θα είναι αρνητική όταν η κύλιση θα γίνεται προς τα πάνω!
   var yPos = -($window.scrollTop() / $self.data('speed'));
   // Εάν έχουμε ορίσει offsetY γι' αυτό το στοιχείο, μετατόπισε το
   if ($self.data('offsetY')) { yPos += $self.data('offsetY'); }
   var coords = '50% '+ yPos + 'px';
   // Μετατόπισε την εικόνα του παρασκηνίου
   $self.css({ backgroundPosition: coords });
   // Υπάρχουν άλλα στοιχεία με ιδιότητες που έχουμε ορίσει
   $('[data-type="sprite"]', $self).each(function() {
    // Cache
    var $sprite = $(this);
    // Το ίδιο με πρίν
    var yPos = -($window.scrollTop() / $sprite.data('speed'));
    var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
    $sprite.css({ backgroundPosition: coords });
   });
  .
  .
  .
  .
  .
  .
  .
  };
 });
});

Η τεχνική αυτή, θεωρείται πολύ καλή χρήση των custom data attributes. Υπάρχει όμως αρκετή διάσχιση του δέντρου DOM, κι αυτό μπορεί να έχει μεγάλη επίδραση στην απόδοση του έργου μας.

Ο Addam Mustil πρόσφατα, μας έδειξε μια τεχνική χρησιμοποιώντας, σχεδόν καθόλου Javascript, πάρα μόνο με την χρήση κλίμακας rem στα margin των στοιχείων μας. Η ιδιαιτερότητα της κλίμακας rem είναι ότι υπολογίζονται με βάση το font-sise που έχουμε ορίσει στο root element της σελίδας, το οποίο στις HTML σελίδες είναι πάντα το html. Έτσι, εάν στο παράδειγμα του Richard, αντί για custom data attributes, ορίζαμε σε κάποιο στοιχείο margins(προς μια κατεύθυνση, ειδάλλως δε θα δουλέψει!!) ίσο με 1rem και σε κάποιο άλλο ίσο με 2rem, τότε αλλάζοντας δυναμικά, με Javascript, το font-size του html θα μετατοπίζονταν και τα στοιχεία μας με διαφορετικό ρυθμό.

Μπορείτε να βρείτε εδώ ολοκληρωμένο το αρχικό βοήθημα, στα αγγλικά. Μέχρι τώρα αρκετοί σχεδιαστές πιέστηκαν και παρουσίασαν μερικά εντυπωσιακά projects που υποδεικνύουν την εξέλιξη της διαδικτυακής παρουσίασης.

Ελπίζω το παρόν άρθρο να σας φάνηκε χρήσιμο. Για οτιδήποτε απορίες, παρατηρήσεις και προτάσεις, είμαι όλος αυτιά. 🙂

Advertisements

Leave a comment.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s