Όλα στην προοπτική: Pure Parallax CSS και άλλα εφέ κύλισης

Ακολουθήστε μαζί χρησιμοποιώντας αυτά τα Codepens:

Βασικό Parallax
Παραλλαξία σταθερού αντικειμένου

Παρά τους ισχυρισμούς ότι το "parallax είναι νεκρό", το αποτέλεσμα είναι πολύ ζωντανό και καλά - και γοητευτικό - όταν εφαρμόζεται σωστά. Δυστυχώς, εννέα φορές από τα δέκα, η εφαρμογή έχει ενοχληθεί με Javascript. Η αναπαραγωγή με τους ακροατές συζήτησης είναι μια επικίνδυνη επιχείρηση για την απόδοση και η τροποποίηση του DOM οδηγεί άμεσα σε περιττές ανακατασκευές, προκαλώντας ασταθή animations και κολλώδεις κύλινδροι. Η σωστή παράλλαξη μπορεί να τραβηχτεί χρησιμοποιώντας το JS. Ακολουθεί ένα εξαιρετικό άρθρο σχετικά με το πώς πρέπει να γίνει αυτό:

Αλλά για απλούστερα κινούμενα σχέδια κύλισης, η χρήση καθαρού CSS είναι μια απίστευτη και αποδοτική προσέγγιση.

Η βασική ρύθμιση

Ως πρώτο παράδειγμα, θα δημιουργήσουμε μια σελίδα με κεφαλίδα parallax και περιεχόμενο στατικής σελίδας. Επειδή βγαίνουμε από Javascript, δεν έχουμε πρόσβαση στη θέση κύλισης του παραθύρου και δεν το χρειαζόμαστε! Το κλειδί για την απομάκρυνση του αποτελέσματος είναι η αξιοποίηση της προοπτικής. Θα δημιουργήσουμε 2 επίπεδα περιεχομένου. Το περιεχόμενο που θέλουμε να μετακινηθούμε πιο αργά, θα τοποθετηθεί "πιο μακριά" από το χρήστη στον άξονα z. Αυτό θα αναγκάσει το πρόγραμμα περιήγησης να κάνει όλη τη βαριά ανύψωση για εμάς.

Εδώ είναι η βασική σήμανση:

  
    

Επικεφαλίδα      
    

Περιεχόμενο ιστότοπου   

Ας σκεφτούμε το CSS. Πρέπει να πούμε στο πρόγραμμα περιήγησης να εκμεταλλευτεί την προοπτική κατά μήκος του άξονα z. Κάνουμε αυτό προσθέτοντας την ιδιότητα προοπτικής στην κατηγορία περιτύλιξης:

προοπτική: 1px;

Μια μεγαλύτερη προοπτική τιμή θα προκαλέσει μεγαλύτερη διαφορά στις ταχύτητες κύλισης μεταξύ των στρωμάτων.

Στη συνέχεια, αναγκάζουμε το περιτύλιγμα να αναλάβει το 100% του παραθύρου προβολής του προγράμματος περιήγησης και να ρυθμίσει την υπερχείλιση-y στο auto. Αυτό επιτρέπει στο περιεχόμενο στο περιτύλιγμα να μετακινηθεί όπως συνήθως, αλλά η ταχύτητα κύλισης για τους απογόνους θα είναι τώρα σε σχέση με την προοπτική τιμή του περιτυλίγματος:

.wrapper {
  ύψος: 100vh;
  υπερχείλιση-x: κρυφό;
  υπερχείλιση-y: αυτόματη;
  προοπτική: 1px;
}}

Το πρώτο div θα περιέχει το περιεχόμενο κεφαλίδας. Η εικόνα φόντου που εφαρμόζεται σε ένα ψευδο στοιχείο θα τοποθετηθεί ένα pixel "μακριά" από το χρήστη στον άξονα z, ενώ το περιεχόμενο θα είναι επίπεδο με την υπόλοιπη σελίδα και θα μετακινηθεί με κανονική ταχύτητα.

Δεν συμβαίνει τίποτα πολύ ιδιαίτερο στην κλάση .section που εφαρμόζεται στην κεφαλίδα. Ορίζει το ύψος και μορφοποιεί το περιεχόμενο. Εδώ είναι το CSS:

.Ενότητα {
  ύψος: 100vh;
  οθόνη: flex;
  ευθυγράμμιση-στοιχεία: κέντρο
  justify-content: center;
  γραμματοσειρά-μέγεθος: 48px;
  άσπρο χρώμα;
}}

Όλη η παράλλαξη καλοσύνη συμβαίνει στο ψευδο στοιχείο:

.parallax :: μετά από {
  περιεχόμενο: "";
  θέση: απόλυτη;
  αρχή: 0;
  δεξιά: 0;
  κάτω: 0;
  αριστερά: 0;
  μετασχηματισμός: κλίμακα translateZ (-1px) (2);
  μέγεθος φόντου: 100%.
  z-δείκτης: -1.
  εικόνα-φόντου: url (μερικές συνδέσεις με κάποια εικόνα).
}}

Το ψευδο στοιχείο τοποθετείται πίσω από το περιεχόμενο της κεφαλίδας. translateZ (-1px) ορίζει την απόσταση του στρώματος από τον χρήστη κατά μήκος του άξονα z.

Επειδή μεταφέρουμε το στρώμα πιο πίσω, τα περιεχόμενα φαίνονται μικρότερα (σκεφτείτε τι συμβαίνει όταν μετακινείτε ένα αντικείμενο μακριά από εσάς). Για να υπολογίσουμε αυτό, πρέπει να αναβαθμίσουμε το επίπεδο στο μέγεθος, χρησιμοποιώντας την κλίμακα (2).

Εάν η προοπτική σας έχει οριστεί σε 1px, ο τύπος για την κλιμάκωση στρώσεων πίσω στο προεπιλεγμένο μέγεθος τους είναι: 1 + (translateZ * -1) / προοπτική.

Στην περίπτωσή μας, ένα translateZ (-2px) θα απαιτούσε μια κλίμακα (3) και ούτω καθεξής ...

Προσθέστε κάποιο στατικό περιεχόμενο κάτω από την κεφαλίδα και θα έχετε ένα όμορφο εφέ παράλλαξης χωρίς να χρειάζεται JS!

Εδώ είναι ένας σύνδεσμος προς το Codepen για αυτό το παράδειγμα.

Τώρα για το τμήμα διασκέδασης: Parallax σταθερού αντικειμένου

Η βασική παράλλαξη είναι μεγάλη. Αναπνέει τη ζωή σε μια κατά τα άλλα στατική ιστοσελίδα. Αλλά μπορείτε να κάνετε πολλά περισσότερα με προοπτική στο CSS. Αυτό έγινε ξεκάθαρο για μένα στο να δουλεύω σε ένα animation κύλισης για τον ιστότοπο του χαρτοφυλακίου μου.

Ήθελα μια στοίβα από τούβλα lego SVG να σπάσει με διαφορετικές ταχύτητες καθώς ο χρήστης κύλιζε κάτω από την αρχική μου σελίδα. Αφού αγωνίστηκα με την JS για λίγο, συνειδητοποίησα ότι αυτό το αποτέλεσμα θα μπορούσε να επιτευχθεί με καθαρό CSS - και να είναι βουτυρώδης ομαλός σε αυτό!

Η ιδέα είναι να δημιουργηθούν ξεχωριστά στρώματα αντικειμένων στο κύριο δοχείο, το καθένα με διαφορετική τιμή translateZ (ανάγνωση: ταχύτητα κύλισης). Ενώ υλοποίησα αυτό, γρήγορα συνειδητοποίησα ότι κατά τη μετάφραση και την κλιμάκωση των αντικειμένων, δεν είχα κανέναν τρόπο να παρακολουθώ τις θέσεις τους x και y (θα άλλαζαν σε σχέση με την τιμή translateZ του αντικειμένου). Για να το λύσω αυτό, τυλίλωσα κάθε αντικείμενο σε ένα σαφές δοχείο που ταιριάζει σε ολόκληρη την οθόνη. Θα μπορούσα τότε να τοποθετήσω το αντικείμενο ακριβώς μέσα στο περιτύλιγμα και να εφαρμόσω το translateZ και την κλίμακα στο περιτύλιγμα αντί για το ίδιο το αντικείμενο.

Απαιτείται μόνο μία κλάση .wrapper για τον καθορισμό του μεγέθους για όλα τα αντικείμενα:

.object-wrapper {
  θέση: απόλυτη;
  αρχή: 0;
  δεξιά: 0;
  κάτω: 0;
  αριστερά: 0;
  φόντο: κανένα?
  justify-content: center;
}}

Διαφορετικές ταχύτητες μπορούν στη συνέχεια να οριστούν και να εφαρμοστούν στα περιτυλίγματα αντικειμένων:

.speed-1 {
  μετασχηματισμός: κλίμακα translateZ (-1px) (2);
}}
.speed-2 {
  μετασχηματισμός: κλίμακα translateZ (-2px) (3);
}}
.speed-3 {
  μετασχηματισμός: κλίμακα translateZ (-3px) (4);
}}

Εδώ είναι ένα Codepen που επιδεικνύει Parallax σταθερού αντικειμένου:

Το Pure CSS προσφέρει έναν κόσμο δυνατοτήτων για την εμψύχωση του περιεχομένου σε σχέση με τη θέση κύλισης - και το καλύτερο μέρος είναι, στην αποξένωση του JS, είναι σχεδόν αδύνατο να βλάψουμε την απόδοση!

Όταν πρόκειται για την παράλληλη παράλλαξη, είναι πραγματικά θέμα προοπτικής.