Js ομαλή κύλιση στην άγκυρα. Scrollissimo – πρόσθετο για ομαλή κύλιση κινούμενων εικόνων

Πρόσφατα, τα κινούμενα σχέδια που αναπαράγονται καθώς κάνετε κύλιση στη σελίδα έχουν γίνει όλο και πιο δημοφιλή. Ωστόσο, παρατήρησα ότι η συντριπτική πλειοψηφία των προγραμμάτων περιήγησης δεν έχει σχεδιαστεί για τέτοια κινούμενα σχέδια. Η κύλιση των σελίδων με το ποντίκι δεν γίνεται ομαλά (όπως στον Firefox), αλλά σε βήματα. Ως αποτέλεσμα, τα κινούμενα σχέδια κύλισης στις σελίδες παίζουν επίσης σπασμωδικά. Κατά τη γνώμη μου, το πρόβλημα εδώ δεν είναι καθόλου με τα προγράμματα περιήγησης, αλλά με τα πρόσθετα που χρησιμοποιούνται για τη δημιουργία αυτών των κινούμενων εικόνων. Γιατί είναι αυτοί που επιτρέπουν τα ξαφνικά άλματα. Πιστεύω ότι για οποιοδήποτε κινούμενο σχέδιο θα πρέπει να υπάρχει κάποια μέγιστη ταχύτητα αναπαραγωγής με την οποία το animation θα είναι ομαλό και ο χρήστης θα μπορεί να καταλάβει τι συνέβη στη σελίδα. Αν συμφωνείτε μαζί μου, τότε κινηθείτε ομαλά και χωρίς τραντάγματα κάτω από τη γάτα.

Σε αυτό το άρθρο θα μιλήσουμε για ένα πρόσθετο για τη δημιουργία κινούμενων ελεγχόμενων με κύλιση, το οποίο ονόμασα Scrollissimo. Το πλησιέστερο ανάλογό του είναι το πρόσθετο ScrollMagic. Αυτό που έχουν κοινό είναι ο σκοπός τους και το γεγονός ότι η Greensock επιλέχθηκε ως μηχανή κινουμένων σχεδίων. Εάν για κάποιο λόγο δεν είστε ακόμη εξοικειωμένοι με αυτό, τότε ίσως για να κατανοήσετε πλήρως όλα όσα συμβαίνουν θα πρέπει να διαβάσετε άρθρα για το Greensock που έχουν ήδη δημοσιευτεί στο Habré. Για παράδειγμα .

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

Πώς να το χρησιμοποιήσετε για να ξεκινήσετε να χρησιμοποιείτε το Scrollissimo, πρέπει να κάνετε δύο πράγματα. Πρώτα, συνδέστε το Greensock. Μπορείτε να συνδέσετε μόνο τις ελάχιστες απαιτούμενες βιβλιοθήκες (TweenLite, TimelineLite και CSS):

ή, συνδέστε μια βιβλιοθήκη που περιέχει όλα τα παραπάνω:

Και δεύτερον, συνδέουμε το ίδιο το Scrollissimo. Η βιβλιοθήκη είναι διαθέσιμη από το αποθετήριο. Και για χρήστες bower είναι επίσης δυνατή η εγκατάσταση με την εντολή

Bower εγκατάσταση scrollissimo
Έγινε λήψη, συνδεθείτε τώρα:

Μπορείτε προαιρετικά (αλλά όχι απαραίτητα) να συμπεριλάβετε το jQuery για δική σας διευκόλυνση. Αργότερα στο άρθρο θα γράψω κώδικα χρησιμοποιώντας τον για μεγαλύτερη αναγνωσιμότητα.

Έχω προβλέψει τη δυνατότητα ενεργοποίησης του Scrollissimo όχι μόνο κατά την κύλιση ολόκληρης της σελίδας, αλλά και σε οποιοδήποτε άλλο συμβάν, αλλά στη συντριπτική πλειονότητα των περιπτώσεων πρέπει να εγγραφείτε στο συμβάν κύλισης σελίδας:

$(window).scroll(function())( Scrollissimo.knock(); ));
Τώρα, κάθε φορά που συμβαίνει ένα συμβάν κύλισης, το Scrollissimo θα υπολογίζει την τρέχουσα πρόοδο της κινούμενης εικόνας και θα την αναπαράγει.

ΣΗΜΕΙΩΣΗ: Εάν δεν χρειάζεστε την προσθήκη για να μετρήσετε την ίδια την κύλιση της σελίδας, μπορείτε να μεταβιβάσετε την τιμή της ιδιότητας scrollTop στη μέθοδο knock(). η σελίδα 1000 pixel .

ΣΗΜΕΙΩΣΗ: Για την υποστήριξη συσκευών αφής, υπάρχει ένας προσαρμογέας αφής scrollissimo.touch.js, ο οποίος καταπολεμά το πάγωμα της σελίδας κατά την κύλιση.

Αυτό ήταν, τώρα μπορείτε να κάνετε απευθείας κίνηση! Το Scrollissimo μπορεί να εμψυχώσει δίδυμα (μεμονωμένα κινούμενα σχέδια) και χρονοδιαγράμματα (ουρά μεμονωμένων κινούμενων εικόνων). Ας ξεκινήσουμε με τα δίδυμα.

Το απλούστερο κινούμενο σχέδιο Ας πούμε ότι έχουμε ένα όμορφο κόκκινο div που ονομάζεται Divy. Θέλει πολύ να μεγαλώσει, αλλά μέχρι στιγμής έχει μόνο 50 pixel πλάτος και ύψος.

#Divy(θέση: σταθερό; επάνω: 0; αριστερά: 0; ύψος: 50 px; πλάτος: 50 px; φόντο: κόκκινο; )
Ας το κάνουμε έτσι ώστε ήδη μετά τα 1000 pixel από την αρχή της σελίδας να γίνει πλάτος 300 pixel. Για να το κάνουμε αυτό, θα δημιουργήσουμε πρώτα το αντίστοιχο tween, σαν να κάνουμε ένα κανονικό animation χρησιμοποιώντας το Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, ( πλάτος: 300 ));
ΣΗΜΕΙΩΣΗ: Όπως παρατηρήσατε, η μόνη διαφορά από την τυπική κινούμενη εικόνα Greensock είναι ότι καθορίζουμε τη διάρκεια της κίνησης όχι σε δευτερόλεπτα, αλλά σε pixel (στην περίπτωσή μας, 1000).

Μεγάλος! Το μόνο που μένει είναι να δώσουμε αυτό το δίδυμο να το καταβροχθίσει ο Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Τώρα ας επιβραδύνουμε και ας δούμε αυτή τη γραμμή. Το πρώτο επιχείρημα είναι το ίδιο tween που δημιουργήσαμε. Το δεύτερο επιχείρημα είναι από ποια θέση να ξεκινήσει η κινούμενη εικόνα. Στην περίπτωσή μας, αυτή είναι η αρχή της σελίδας (0 pixel). Το τρίτο επιχείρημα παραμένει. Εδώ φτάνουμε στο κύριο χαρακτηριστικό που ξεχωρίζει το Scrollissimo από τα συνηθισμένα πρόσθετα. Το τρίτο όρισμα είναι η μέγιστη ταχύτητα αναπαραγωγής κινούμενων εικόνων. Αυτή η ταχύτητα μετριέται σε αφηρημένες αδιάστατες μονάδες και επιλέγεται «με το μάτι». Θα απαντήσω αμέσως στην ερώτηση "Τι θα συμβεί αν δεν καθορίσετε την τρίτη παράμετρο;" Εάν δεν καθορίσετε τη μέγιστη ταχύτητα, τότε δεν θα υπάρχει. Αυτό το κινούμενο σχέδιο θα παίζεται με τον ίδιο τρόπο που θα παιζόταν από κανονικά πρόσθετα.

Χρονολόγια Έτσι, το Divy έχει αυξηθεί σε πλάτος. Πώς μπορούμε να τον βοηθήσουμε να αυξηθεί σε ύψος; Αλυσίδες κινούμενων σχεδίων ή, με όρους Greensock, χρονοδιαγράμματα θα μας βοηθήσουν εδώ. Εάν τα έχετε χρησιμοποιήσει στο παρελθόν για να δημιουργήσετε κινούμενα σχέδια, τότε αυτό δεν είναι κάτι καινούργιο για εσάς. Με τον ίδιο τρόπο που κάναμε με το δίδυμο παραπάνω, το κάνουμε και με τη γραμμή χρόνου. jsFiddle

Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 (πλάτος: 300 )); divyTimeline.to($("#Divy"), 1000, ( ύψος: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Συμπέρασμα Αυτό είναι το μόνο που χρειάζεστε για να δημιουργήσετε με επιτυχία κινούμενα σχέδια κύλισης χρησιμοποιώντας το Scrollissimo. Εδώ μάλλον θα τελειώσω το άρθρο. Εν κατακλείδι, θα πω ότι το πρόσθετο βρίσκεται υπό ενεργό ανάπτυξη, έχει περιθώρια ανάπτυξης και βελτίωσης. Ως εκ τούτου, θα χαρώ να λάβω τυχόν ερωτήσεις, συμβουλές και αιτήματα για δυνατότητες.

Διάταξη, εμψύχωση!

Γεια σας, αγαπητοί φίλοι!

Σήμερα θέλουμε να σας ενημερώσουμε για την ομαλή κύλιση της σελίδας προορισμού στο επιθυμητό στοιχείο.

Η ομαλή κύλιση (ή ομαλή κύλιση) επιτρέπει στον επισκέπτη της σελίδας προορισμού να μετακινείται μεταξύ των ενοτήτων χωρίς να χάνει την οπτική επαφή με το περιεχόμενο της προσφοράς.

Μπορείτε να δείτε ένα παράδειγμα από. Σε αυτήν τη σελίδα, ενεργοποιείται η ομαλή κύλιση όταν κάνετε κλικ στο κουμπί "Παραγγελία παράδοσης".

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

Επομένως, προτείνουμε να χρησιμοποιήσετε έναν λεπτομερή εικονογραφημένο οδηγό για τη δημιουργία ομαλής κύλισης για ένα στοιχείο:

1) Ανοίξτε τη σελίδα προορισμού στο οπτικό πρόγραμμα επεξεργασίας LPgenerator

2) Αντιγράψτε τον κωδικό:

jq_144("#block-newID a").click(function(e)( // αντικαταστήστε το #block-newID με το αναγνωριστικό του στοιχείου στο οποίο κάνουμε κλικ στο e.preventDefault(); jq_144("body, html"). animate(( scrollTop: jq_144("#block-newID").offset().top ), 1000 // αντικατάσταση #block-newID με το αναγνωριστικό του στοιχείου που μετακινείται ));

3) Χρησιμοποιώντας το εργαλείο "Σενάρια", επικολλήστε τον αντιγραμμένο κώδικα στη σελίδα

Ορίστε τη θέση του κώδικα: "Πριν από την ετικέτα":

4) Γράψτε στον κωδικό το αναγνωριστικό του κουμπιού, όταν το κάνετε κλικ θα μετακινηθεί. Το αναγνωριστικό είναι γραμμένο μέσα σε μεμονωμένα εισαγωγικά.

5) Μπορείτε να δείτε το αναγνωριστικό του στοιχείου στις εκτεταμένες ιδιότητές του στα δεξιά:

6) Προσοχή:εάν το στοιχείο που ενεργοποιεί την κύλιση όταν κάνετε κλικ δεν είναι κουμπί, αφαιρέστε το γράμμα «a» στον κώδικα:

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

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

Προσοχή: η ομαλή κύλιση δεν λειτουργεί για τμήματα. Επομένως, μην προσδιορίζετε αναγνωριστικά ενοτήτων στον κωδικό.

8) Από προεπιλογή, ο χρόνος κύλισης στο καθορισμένο στοιχείο είναι 1000 ms = 1 δευτερόλεπτο. Μπορείτε να κάνετε την κύλιση πιο αργή (π.χ. 5000 ms = 5 δευτερόλεπτα).

Εισαγάγετε τον απαιτούμενο χρόνο στον κωδικό:

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

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

Τι είναι ένας σύνδεσμος αγκύρωσης Πώς να δημιουργήσετε έναν σύνδεσμο αγκύρωσης HTML

Οι σύνδεσμοι αγκύρωσης δημιουργούνται σε γλώσσα σήμανσης υπερκειμένου. Η δημιουργία μιας άγκυρας σε HTML δεν είναι καθόλου δύσκολη. Το μόνο που χρειάζεστε είναι λίγη γνώση αυτής της γλώσσας και κατανόηση του τρόπου λειτουργίας της. Εάν δεν έχετε κανένα πρόβλημα με αυτό, τότε μπορείτε να το κάνετε χωρίς μεγάλη δυσκολία. Έτσι, για να δημιουργήσετε μια άγκυρα σε μια σελίδα HTML, πρέπει να γράψετε κάτι σαν το παρακάτω στον κώδικα.

Και για να μεταβείτε σε αυτό το μέρος στη σελίδα όπου υποδεικνύεται αυτή η ετικέτα, πρέπει να γράψετε αυτό στον σύνδεσμο:

Μετάβαση σε μια ετικέτα σε μια σελίδα

Μετάβαση σε μια ετικέτα σε μια σελίδα

Με αυτήν την προσέγγιση, η μετάβαση θα πραγματοποιηθεί με ένα στιγμιαίο άλμα από το ένα μέρος στο άλλο

Ομαλή κύλιση στην άγκυρα

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" >$(document) .ready (function () ( $("a" ) .click (function () ( elementClick = $(this ) .attr ( "href" ) ; προορισμός = $(elementClick) .offset () .top ; if ($.browser .safari ) ($("body") .animate ( ( scrollTop: προορισμός ) , 1100 ) ;) else ($( "html" ) .animate ( ( scrollTop: προορισμός ) , 1100 ;) επιστροφή false ) ;

$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); προορισμός = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: προορισμός), 1100); )else( $("html").animate(( scrollTop: προορισμός), 1100); επιστροφή ψευδής ));

Υπάρχουν τρεις τρόποι σύνδεσης αυτού του σεναρίου. Το πρώτο είναι να το εισαγάγετε στη σελίδα μεταξύ των ετικετών κεφαλής. Το δεύτερο είναι να το βάλετε σε ένα ξεχωριστό αρχείο και να το συνδέσετε ξεχωριστά ως εξής:

Κάντε ετικέτα στη σελίδα για να μεταβείτε σε αυτήν

Δεύτερον, εάν θέλετε να υπάρχει ομαλή κύλιση όχι για όλα τα άγκυρα, αλλά μόνο για ορισμένα, πρέπει να αλλάξετε την τρίτη γραμμή του σεναρίου ως εξής:

Μετάβαση σε μια ετικέτα σε μια σελίδα

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

#άγκυρα

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

Πιθανότατα έχετε δει παρόμοια επίδραση σε άλλες σελίδες προορισμού. Σήμερα θα μάθετε πώς να το εφαρμόσετε.

Ομαλή κύλιση στην άγκυρα χρησιμοποιώντας javascript

Σε ένα από τα έργα, η εργασία ήταν να υλοποιηθεί ένα παρόμοιο εφέ με ομαλή κύλιση σε ένα συγκεκριμένο στοιχείο όταν κάνετε κλικ σε ένα από τα στοιχεία μενού.

Ας ξεκινήσουμε συνδέοντας τη βιβλιοθήκη jquery στο έργο μας και προσδιορίζοντας τη διαδρομή προς το σενάριο που είναι υπεύθυνο για την ομαλή κύλιση:

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

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

• Εξοπλισμός καθαρισμού
• Κατασκευαστικός εξοπλισμός
• Στοκ

Όπως μπορείτε να δείτε, όλα είναι στάνταρ και χωρίς κόλπα. Στη συνέχεια δημιουργήθηκαν μπλοκ που αντιστοιχούν στο μενού στη σελίδα προορισμού. Αποκάλυψαν μια συγκεκριμένη υπηρεσία. Ήταν απαραίτητο να γίνει μια ομαλή μετάβαση σε αυτά τα μπλοκ.

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

• Εξοπλισμός καθαρισμού
• Κατασκευαστικός εξοπλισμός
• Στοκ

Τώρα πρέπει να ορίσετε τα αναγνωριστικά "καθαρισμός", "οικοδόμηση", "ενέργειες" στα αντίστοιχα μπλοκ. Για μένα φαινόταν κάπως έτσι:

Δώστε προσοχή στην ιδιότητα name="cleaning". Πρέπει να ταιριάζει με την ταυτότητα. Εδώ είναι το ίδιο το σενάριο:

$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") ας προορισμός = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: προορισμός ), 1100 ));

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

Λάβετε υπόψη ότι στην αρχή του άρθρου υποδείξαμε το όνομα και τη διαδρομή του σεναρίου ως εξής:

Δηλαδή, πρέπει να δημιουργήσετε έναν φάκελο στη ρίζα του ιστότοπού σας που ονομάζεται js και να τοποθετήσετε ένα αρχείο με το όνομα perehod.js σε αυτόν. Και μετά εισάγετε τον ίδιο τον κώδικα σεναρίου σε αυτό. Αυτός είμαι εγώ, για παν ενδεχόμενο. Κι αν κάποιος δεν καταλαβαίνει;

Και αυτό είναι όλο για σήμερα. Τώρα ξέρετε πώς να εφαρμόσετε ένα τόσο ωραίο εφέ όπως η ομαλή κύλιση σελίδας στην άγκυρα. Αντίο σε όλους!

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

Αυτή η μέθοδος έχει ένα μειονέκτημα, δεν λειτουργεί καλά με το wow.js, το οποίο χρησιμοποιήσαμε για να δημιουργήσουμε το κινούμενο σχέδιο στο άρθρο. Ορισμένα κινούμενα σχέδια δεν παίζουν και υπάρχει κενός χώρος στη θέση τους. Αν κάποιος ξέρει πώς να το διορθώσει, γράψτε στα σχόλια ή μέσα

Χαιρετισμούς, αγαπητοί φίλοι. Όπως ίσως έχετε παρατηρήσει, σχεδόν σε όλα τα προγράμματα περιήγησης, η κύλιση σε ιστότοπους είναι πολύ ευκρινή και όχι όμορφη. Και φυσικά, θα ήθελα να κάνω την κύλιση του ιστοτόπου μου πιο ομαλή, φυσικά, αυτό μπορεί να γίνει και, επιπλέον, χωρίς υπερβολική πίεση. Αυτό γίνεται χρησιμοποιώντας ένα απλό πρόσθετο jQuery και μερικούς κανόνες CSS. Και για να δείτε πώς λειτουργούν όλα, σας προτείνω να ρίξετε μια ματιά στο παρακάτω demo.

Ι

Λοιπόν, τώρα ας προχωρήσουμε στην προσάρτηση της ομαλής κύλισης στον ιστότοπό μας.

HTML

Αρχικά, θα χρειαστεί να επισυνάψουμε τη βιβλιοθήκη JQuery. Εάν το έχετε ήδη συνδεδεμένο, παραλείψτε αυτό το βήμα:

Στη συνέχεια, πρέπει να επισυνάψουμε το ίδιο το πρόσθετο JQuery, το οποίο είναι υπεύθυνο για την ομαλή κύλισή μας, και μαζί με αυτό υπάρχουν ξεχωριστοί κανόνες CSS που αλλάζουν την ίδια τη γραμμή κύλισης στον ιστότοπο. Θα μιλήσουμε περισσότερα για τη γραμμή κύλισης στο επόμενο μάθημα, αλλά προς το παρόν μόνο ομαλή κύλιση. Και εδώ είναι οι κανόνες και το πρόσθετο:

Ολοι. Τώρα έχουμε ήδη κάνει το πρώτο και σημαντικό βήμα. Τώρα πρέπει να προσθέσουμε έναν απλό κανόνα στα στυλ CSS του ιστότοπού μας.

CSS html, σώμα (ύψος: 100%; )

Αυτό είναι απαραίτητο για να ενημερώσουμε την προσθήκη μας ότι το πλάτος της σελίδας είναι τεντωμένο και είναι 100% του ύψους. Φροντίστε να προσθέσετε αυτόν τον κανόνα στο CSS σας, διαφορετικά η κύλιση δεν θα λειτουργήσει.

Γραφή

Και τώρα προτείνω να ρίξουμε μια πιο προσεκτική ματιά στο παράδειγμα επίδειξης. Και θα ξεκινήσουμε με HTML.

HTML σε επίδειξη Ομαλή κύλιση για τον ιστότοπο Περιεχόμενο Γεια σας, Αυτό είναι κείμενο που δείχνει την ομαλή κύλιση των σελίδων στον ιστότοπό σας. Πραγματικά δεν φαίνεται κακό, έτσι είναι :) Αυτό το κείμενο θα επαναληφθεί.

(function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);

Όπως μπορείτε να δείτε, εδώ χρησιμοποίησα εντελώς τυπική σήμανση HTML5, με όλα τα εισαγόμενα σενάρια και τα αρχεία CSS για τα οποία μιλήσαμε παραπάνω. Νομίζω ότι δεν υπάρχει τίποτα να εξηγήσω εδώ, εάν κάτι δεν είναι ξεκάθαρο για εσάς, φροντίστε να το ρωτήσετε στα σχόλια.

CSS από το demo @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,κυριλλικά); σώμα (χρώμα φόντου: #fff; χρώμα: #555; μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; οικογένεια γραμματοσειράς: "Bad Script", cursive; περιθώριο: 0; padding: 0; min-width: 480px; ) html, body( ύψος: 100% ) h2 (μέγεθος γραμματοσειράς: 80 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; γραμματοσειρά οικογένειας: "Αστακός", γράμμα; βάρος γραμματοσειράς: 700; στυλ γραμματοσειράς: πλάγια; χρώμα: #444; ) hr( ύψος: 0 περιθώριο: 1 εικονοστοιχείο συμπαγές #eee: 50 px; : 15px, padding-bottom: 20px)

Οι κανόνες CSS είναι επίσης πολύ απλοί και δεν υπάρχουν πολλοί από αυτούς, και μπορείτε επίσης να δείτε ότι οι γραμματοσειρές Google επισυνάπτονται εδώ για να κάνουν το demo να φαίνεται οπτικά όμορφο.