Παραλλαγή Parallax Made Easy με StickyStack.js

Εφέ παράλλαξης τραβήξτε γρήγορα την προσοχή. Αυτά τα αποτελέσματα διατηρήστε ορισμένα υπόβαθρα εν όψει ενώ πραγματοποιείτε κύλιση στη σελίδα. Θα βρείτε παραλλαξία κύλισης σε πολλές ιστοσελίδες και θέματα WordPress και είναι ένα μεγάλο μέρος του σύγχρονου σχεδιασμού ιστοσελίδων.

Μπορείτε επίσης να δημιουργήσετε ένα μοναδικό στυλ παραλλαξ χρησιμοποιώντας το StickyStack.js συνδέω. Του που βασίζεται στο jQuery και κρατά κάθε τμήμα της κύριας σελίδας κολλημένο στην κορυφή κατά την κύλιση προς τα κάτω.

Αυτό δημιουργεί το ψευδαίσθηση μιας ιστοσελίδας με στρωμνή όπου κάθε σελίδα “στοίβες” πάνω από το άλλο. Είναι πραγματικά δροσερό και πολύ εύκολο να δημιουργηθεί μόνος σου.

Ενώ είναι αρκετά εύκολο να δημιουργηθεί, απαιτεί κάποια κατανόηση της ανάπτυξης των frontend.

Πρέπει πρώτα δημιουργήστε μεμονωμένες ενότητες σελίδας μέσα στο κύριο δοχείο. Αυτός ο τρόπος θα έχετε τα πάντα περικλείονται στο HTML, έτσι μπορείτε να στοχεύσετε τα πάντα με τη λειτουργία jCuery του StickyStack.

Έρχεται επίσης με μερικές επιλογές όπου μπορείτε να προσαρμόσετε το γονικό δοχείο, ο στοιχεία που πρέπει να στοιβάζονται, και μια πιθανή κουτί σκιά αν σας αρέσει αυτό το αποτέλεσμα.

Εδώ είναι α δείγμα bit κώδικα από τη σελίδα GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Ενώ αυτό δεν έχει ενημερωθεί σε περίπου δύο χρόνια, εξακολουθεί να είναι ένα πολύ αξιόπιστο plugin. Το εργάστηκε σε όλα τα προγράμματα περιήγησης που δοκιμάσαμε (Chrome, Safari & Firefox) με υποστήριξη για όλες τις εκδόσεις του jQuery.

Επιπλέον, το αρχείο με μικρογραφήματα είναι μόνο 2KB που είναι ένα αξιοπρεπές μέγεθος για ένα plugin.

Για να μάθετε περισσότερα, επισκεφθείτε το κύριο repo και δείτε τι μπορεί να προσφέρει το StickyStack. Νομίζω ότι λειτουργεί καλύτερα ιστότοπων μιας σελίδας ή σελίδες προσγείωσης με μεγάλα φόντα πλήρους οθόνης.

Μπορείτε επίσης να ελέγξετε a ζωντανή επίδειξη στο CodePen αν θέλετε να δείτε πώς φαίνεται αυτό σε έναν ζωντανό ιστότοπο.