Οι ιστοσελίδες μακράς κύλισης έχουν γίνει μια πραγματικά κοινή τάση σχεδιασμού ιστοσελίδων. Ένας από τους πιο cool υπο-τύπους αυτού είναι οι parallax σελίδες scrolling, όπου οι εικόνες κινούνται για να εκπέμπουν ένα φαινόμενο παράλλαξης. Καθώς ο χρήστης μετακινεί τη σελίδα προς τα κάτω, οι κινούμενες εικόνες ενεργοποιούνται και γενικά δίνει μια νέα εμφάνιση και αίσθηση σε οποιονδήποτε ιστότοπο, εάν εφαρμοστεί σωστά.
Κάνοντας μια ιστοσελίδα scrolling parallax είναι συχνά κουραστική, επειδή απαιτεί σε βάθος γνώση του CSS, Javascript και καλό σχεδιασμό ιστοσελίδων για να τραβήξει μακριά. Ακολουθεί μια λίστα με τα βέλτιστα προσθήκες κύλισης Parallax, τα οποία όχι μόνο σας διευκολύνουν να δημιουργήσετε ιστότοπους scrolling parallax αλλά έχετε και μια καλά προικισμένη βιβλιοθήκη εφέ parallax έτσι ώστε να γίνει ευκολότερη και ταχύτερη για σας να αναπτύξετε μια καλή ιστοσελίδα .
ΑΠΟΠΟΙΗΣΗ : Πριν ξεκινήσετε, σημειώστε ότι για να χρησιμοποιήσετε αυτά τα πρόσθετα απαιτούνται κάποιες γνώσεις τεχνολογιών ιστού (HTML / CSS / Javascript). Τα περισσότερα από τα προαναφερθέντα πρόσθετα χρησιμοποιούν jquery, έτσι ώστε να είναι απαραίτητη και η γνώση της Jquery.
Παραλλαγές κύλισης Parallax
1. ScrollMagic
Το ScrollMagic είναι ένα από τα δημοφιλέστερα και πλούσια σε jquery plugins εκεί έξω. Είναι μια βιβλιοθήκη javascript που σας επιτρέπει να δημιουργείτε φαινομενικά μαγικά εφέ κύλισης. Χρησιμοποιώντας το ScrollMagic μπορείτε να ζωντανέψετε με βάση τη θέση κύλισης. Αυτό σημαίνει ότι μπορείτε να διορθώσετε, να μετακινήσετε ή να ζωντανέψετε στοιχεία HTML καθώς μετακινηθείτε, ανεξάρτητα από τη διάρκεια που επιθυμείτε, και επίσης εύκολα να προσθέσετε εφέ parallax στον ιστότοπό σας. Είναι εξαιρετικά προσαρμόσιμο και είναι επίσης ελαφρύ (6kb όταν είναι gzipped). Μεταξύ των άλλων plug-in κυλίνδρων παράλλαξης, το Scroll Magic διαθέτει την καλύτερη τεκμηρίωση και εξωτερικούς πόρους. Είναι απόλυτα συμβατό και με το κινητό.
Το ScrollMagic περιέχει πολλά παραδείγματα. Ελέγξτε τους για έμπνευση και καθοδήγηση σχετικά με τη χρήση αυτής της βιβλιοθήκης.
Σχετικά με:
Αρχική σελίδα: //janpaepke.github.io/ScrollMagic/
Δημιουργήθηκε από: Jan Paepke
Εγκατάσταση:
1. CDN:
2. Κατεβάστε από το Github
2. skrollr
skrollr είναι μια ελαφριά καθαρή Javascript και CSS βιβλιοθήκη, χωρίς συμμετοχή jQuery. Είναι βασικά το "Scroll Magic απλοποιημένο για CSS". Για να χρησιμοποιήσετε το skrollr, δεν χρειάζεται να γνωρίζετε Javascript ή οποιοδήποτε jQuery. Μόνο HTML και CSS είναι αρκετά. το skrollr χρησιμοποιεί χαρακτηριστικά δεδομένων για να ζωντανέψει οποιοδήποτε στοιχείο HTML θέλετε. Ένα από τα κύρια μειονεκτήματα του skrollr είναι ότι οι κινούμενες εικόνες λειτουργούν μόνο κατά τη διάρκεια της κύλισης της σελίδας. Διαφορετικά, όλα τα εφέ τίθενται σε αναμονή. το skrollr σάς επιτρέπει να ζωντανέψετε όλες τις ιδιότητες CSS των στοιχείων HTML.
Σχετικά με:
Αρχική σελίδα: //prinzhorn.github.io/skrollr/
Δημιουργήθηκε από: Prinzhorn
Εγκατάσταση: Λήψη από το Github
3. pagePiling.js 
Page Piling είναι ένα plugin jQuery που σας επιτρέπει να δημιουργήσετε τον ιστότοπό σας σε διαφορετικά τμήματα τα οποία συσσωρεύονται το ένα πάνω στο άλλο. Κατά την κύλιση ή με την πρόσβαση στη διεύθυνση URL, κάθε τμήμα αποκαλύπτεται σε ένα τακτοποιημένο κινούμενο κινούμενο σχέδιο. Το pagePiling.js είναι συμβατό με όλες τις πλατφόρμες - επιφάνεια εργασίας, tablet και κινητά - και λειτουργεί με τα περισσότερα προγράμματα περιήγησης. Υποβαθμίζεται χαριτωμένα σε παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν τα κινούμενα γραφικά (όπως το IE 7). Για να χρησιμοποιήσετε το plugin, θα πρέπει να συμπεριλάβετε ένα αρχείο CSS και ένα αρχείο Javascript μέσα στο HTML σας. Η σελίδα pagePiling.js αρχικοποιείται από τη λειτουργία (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Για πιο προηγμένες αρχικοποιήσεις, μεταβείτε στο README.md.
Σχετικά με:
Αρχική σελίδα: //alvarotrigo.com/pagePiling/
Δημιουργήθηκε από: alvarotrigo
Εγκατάσταση: Λήψη από το Github
4. Alton
Το Alton είναι ένα plug-in jQuery plugin. Το κύλιση κύλισης σημαίνει ότι η μητρική πλοήγηση του προγράμματος περιήγησής σας είναι απενεργοποιημένη υπέρ της στοχευμένης κύλισης η οποία όταν ξεκινήσει (από τον τροχό του ποντικιού ή το touchpad) σας μεταφέρει στο επόμενο κάθετο σημείο της οθόνης ή στην κορυφή του επόμενου δοχείου.
Το Alton επιτρέπει τρεις ξεχωριστές λειτουργίες, που ονομάζονται «Hero», «Bookend» και «Standard». Το πρότυπο σάς επιτρέπει να χρησιμοποιείτε κύλιση πλήρους σελίδας, με κάθε τμήμα ύψους 100%. Μια κύλιση αναπαράγει την επόμενη ενότητα ή την προηγούμενη ενότητα. Το Bookend σάς δίνει τη δυνατότητα να δημιουργήσετε μια θεαματική εμπειρία, ενώ ο Hero σάς επιτρέπει να κάνετε κύλιση μόνο στην ενότητα 'Hero', με την υπόλοιπη σελίδα να έχει (επανενεργοποιηθεί) μητρική κύλιση.
Σχετικά με:
Αρχική σελίδα: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Δημιουργήθηκε από: φύλλα χαρτιού
Εγκατάσταση: Λήψη από το Github
5. Stellar.js
Το Stellar είναι ένα plugin jQuery μέσω του οποίου μπορείτε να προσθέσετε εύκολα αποτελέσματα κύλισης parallax. Για να τρέξετε, πρώτα πρέπει να εκτελέσετε τη λειτουργία $ .stellar (). Οι ρυθμίσεις κινούμενων εικόνων για μεμονωμένα στοιχεία μπορούν να διαμορφωθούν χρησιμοποιώντας χαρακτηριστικά δεδομένων σε αυτό το στοιχείο.
Το Stellar ακόμη και σας επιτρέπει να έχετε παραλλαξικά υπόβαθρα, τα οποία είναι φόντο που επανατοποθετούν στο scroll. Ένα από τα πιο χρήσιμα χαρακτηριστικά του Stellar.js είναι οι αντισταθμίσεις.
Όλα τα στοιχεία θα επιστρέψουν στην αρχική τους θέση όταν ο γονέας τους αντισταθμίσει συναντήσει την άκρη της οθόνης-συν ή μείον τη δική σας προαιρετική μετατόπιση. Αυτό σας επιτρέπει να δημιουργείτε πολύπλοκα μοτίβα παραλλαξιάς πολύ εύκολα. (Stellar Documentation)
Σχετικά με:
Αρχική σελίδα: //markdalgleish.com/projects/stellar.js/
Δημιουργήθηκε από: Mark Dalgeish
Εγκατάσταση: Λήψη από το Github
6. multiScroll.js
Αυτό το πρόσθετο δημιουργείται από τον ίδιο προγραμματιστή (alvarotrigo) ο οποίος έκανε το plugin pagePiling.js. Αυτό που κάνει η πολλαπλή κύλιση βασικά είναι ότι σας επιτρέπει να δημιουργήσετε ένα εφέ, όπου κάθε τμήμα της σελίδας φορτώνεται σε δύο διαιρεμένα μέρη που μετατοπίζονται στη θέση τους καθώς φορτώνεται η σελίδα. Ελέγξτε την αρχική σελίδα για να δείτε πώς φαίνεται αυτό στο πρόγραμμα περιήγησής σας. Το multiScroll.js σάς επιτρέπει να ρυθμίσετε την ταχύτητα κύλισης, την ευκολία, την επιλογή κύλισης πληκτρολογίου και πολλές άλλες ιδιότητες, ώστε να μπορείτε να προσαρμόσετε το αποτέλεσμα ακριβώς όπως θέλετε.
Σχετικά με:
Αρχική σελίδα: //alvarotrigo.com/multiScroll/
Δημιουργήθηκε από: alvarotrigo
Εγκατάσταση: Λήψη από το Github
7. ScrollMe
Το ScrollMe είναι ένα plugin για την προσθήκη απλών αποτελεσμάτων κύλισης parallax στη σελίδα σας. Μπορεί να κλιμακώσει, να περιστρέψει, να μεταφράσει και να αλλάξει την αδιαφάνεια των στοιχείων στη σελίδα, καθώς μετακινηθείτε προς τα κάτω. Το ScrollMe δεν απαιτεί Javascript, και μόνο η γνώση CSS είναι αρκετή. Με την προσθήκη της κλάσης "animateme" και των απαιτούμενων χαρακτηριστικών δεδομένων, μπορείτε να ζωντανέψετε οποιοδήποτε στοιχείο HTML. Το ScrollMe χρησιμοποιείται καλύτερα για την προσθήκη εφέ CSS. Είναι ελαφρύ και όλα τα κινούμενα σχέδια είναι ομαλά, αρκεί να τα χρησιμοποιείτε με μέτρο.
Σχετικά με:
Αρχική σελίδα: //scrollme.nckprsn.com/
Δημιουργήθηκε από: Nick Pearson
Εγκατάσταση: Λήψη από το Github
8. Parallax Scroll
Το Parallax Scroll είναι ένα εύκολο στη χρήση jQuery plugin που σας επιτρέπει να δημιουργήσετε το φαινόμενο κύλισης εικόνας parallax που βρίσκεται σε ιστοσελίδες όπως το Spotify. Είναι πολύ απλό στη χρήση - απλά καθορίστε τις απαιτούμενες τάξεις CSS για τους κατόχους εικόνων. Αντί να χρησιμοποιείτε ετικέτες, για να χρησιμοποιήσετε αυτό το πρόσθετο, πρέπει να χρησιμοποιήσετε στοιχεία τα οποία έχουν οριστεί ως φόντο φόντου (χρησιμοποιώντας την ιδιότητα CSS `background-image`) Μπορείτε να κάνετε τα στοιχεία να ανταποκρίνονται χρησιμοποιώντας ερωτήματα CSS @media.
Σχετικά με:
Αρχική σελίδα: //parallax-scroll.aenism.com/
Δημιουργήθηκε από: Aen
Εγκατάσταση: Λήψη από το Github
9. Jarallax
Το Jarallax είναι μια βιβλιοθήκη CSS και Javascript που ειδικεύεται στα εφέ κύλισης parallax. Το Jarallax έχει ρυθμιστεί χρησιμοποιώντας τη Javascript (Δεν υπάρχει jQuery, απλά καθαρή βανίλια JS). Υποστηρίζει τα λεγόμενα χαρακτηριστικά κύλισης, χαλάρωση και animation παράλλαξης. Το Jarallax υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης, σε πλατφόρμες. Η ιστοσελίδα του Jarallax διαθέτει άριστη τεκμηρίωση σχετικά με τον τρόπο προσαρμογής του Jarallax για τις ανάγκες σας. Το Jarallax έχει επίσης εκπαιδευτικά βίντεο που δείχνουν πώς να ρυθμίσετε το Jarallax για τον ιστότοπό σας και πώς να ξεκινήσετε.
Σχετικά με:
Αρχική σελίδα: //www.jarallax.com/
Δημιουργήθηκε από: Jarallax
Εγκατάσταση: Κατεβάστε από την ιστοσελίδα του Jarallax
10. Superscrollorama
Το Superscrollorama είναι ένα plugin βασισμένο σε jQuery που υποστηρίζει κινούμενα σχέδια κύλισης. Τροφοδοτείται από το TweenMax και το Greensock Tweening Engine, το οποίο αυξάνει την απόδοση κινούμενης εικόνας και την ομαλότητα. Τα animations Superscrollorama ονομάζονται μέσω jQuery και μπορείτε επίσης να χρησιμοποιήσετε τις περισσότερες λειτουργίες του TweenMax.js. Δυστυχώς, αυτά τα κινούμενα σχέδια δεν υποστηρίζονται πλήρως από τις κινητές συσκευές (επειδή οι συσκευές οθόνης αφής χειρίζονται με διαφορετικό τρόπο την κύλιση). Ωστόσο, χρησιμοποιώντας τη μέθοδο setScrollContainerOffset, τα εφέ Superscrollorama μπορούν να αποκτήσουν πρόσβαση σε κινητές συσκευές.
Εδώ είναι ο κώδικας για να γίνει αυτό:
.setScrollContainerOffset(x, y)
(x: η μετατόπιση x του scrollcontainer, y: το x offset του scrollcontainer)
Σχετικά με:
Αρχική σελίδα: //johnpolacek.github.io/superscrollorama/
Δημιουργήθηκε από: johnpolacek
Εγκατάσταση: Λήψη από το Github
ΒΛΕΠΕ ΕΠΙΣΗΣ: 10 καλύτερες γεννήτριες στατικών ιστότοπων
![Τι εάν οι διάσημοι ιστότοποι ήταν άνθρωποι [ζωηρός βίντεο]](https://gadget-info.com/img/more-stuff/804/what-if-famous-websites-were-people.jpg)
