Εδώ είναι μια τεράστια λίστα προσθηκών κύλισης jQuery για τον ιστότοπό σας. Διάφορα κόλπα κύλισης ήρθαν σε εμάς από το εξωτερικό πριν από λίγο καιρό και απέκλεισαν μια σειρά από σύγχρονες πύλες και ιστότοπους που ήθελαν να ξεχωρίσουν. Η εργασία στην κατακόρυφη κύλιση θα μπορούσε κάλλιστα να βελτιώσει τις μετατροπές και αναμφίβολα την εμπειρία χρήστη. Χάρη στις ενδιαφέρουσες προσεγγίσεις JS + CSS3, μπορείτε να βελτιώσετε τη διεπαφή του ιστότοπού σας. Αν προσθέσετε λίγη φαντασία, μπορείτε να αποκτήσετε κάτι μοναδικό για τον ιστότοπό σας από οποιοδήποτε πρόσθετο. Εξάλλου, κάθε ιστότοπος προσπαθεί να ξεχωρίσει από τη γκρίζα μάζα διαφορετικοί τρόποι. Χάρη στην κύλιση, ορισμένες σελίδες μπορούν να μεταφερθούν σε μια σελίδα με εφαρμοσμένη προσθήκη, η οποία θα βελτιώσει την απόδειξη σημαντικές πληροφορίεςχρήστης. Αυτή η τεχνολογίακαταλληλότερο για διάφορα χαρτοφυλάκια ή επιδείξεις προϊόντων κ.λπ.

Ας πάμε κατευθείαν στο θέμα.

Πονηρός

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

jQuery ScrollPath

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

παράθυρα

Κινούμενη κύλιση

Το AnimateScroll είναι ένα πρόσθετο jQuery που σας επιτρέπει να κάνετε κύλιση σε οποιοδήποτε μέρος της σελίδας καλώντας απλώς τη συνάρτηση animatescroll() με το αναγνωριστικό ή την κλάση του στοιχείου στο οποίο θέλετε να πραγματοποιήσετε κύλιση.

scrollme

Καθώς η σελίδα κυλάει, το ScrollMe μπορεί να κλιμακώσει, να περιστρέψει, να μεταφράσει και να αλλάξει τη διαφάνεια των στοιχείων στη σελίδα. Είναι εύκολο να ρυθμιστεί και δεν απαιτεί ούτε μια γραμμή Javascript.

μένω πιστός σε κάτι

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

μπλοκ κύλισης

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

Starscroll

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

κατάστρωμα κύλισης

κυλιόγραφο

κυλιόγραφοείναι ένα πρόσθετο jQuery για τη δημιουργία ενός απλού συστήματος autocue/teleprompter για κύλιση γραμμών κειμένου.

scrollorama

Stellar.js

Το Stellar.js είναι ένα πρόσθετο jQuery που παρέχει εφέ κύλισης παράλλαξης σε οποιοδήποτε στοιχείο κύλισης.

super scroll orama

Παράλλαξη

Αποκριτική κύλιση 3d Fold

jQuery Scrollify

Μια προσθήκη jQuery που σας βοηθά να κάνετε κύλιση και να μεταβείτε σε ενότητες. Συμβατό με Touch.

vivus.js

Το Vivus είναι μια ελαφριά κλάση JavaScript (χωρίς εξαρτήσεις) που σας επιτρέπει να κάνετε κίνηση SVG δίνοντάς τους τη δυνατότητα να σχεδιάζουν.

jQuery SlimScroll

slimScrollείναι ένα μικρό (4,6 KB) πρόσθετο jQuery που μετατρέπει οποιοδήποτε div σε μια περιοχή με δυνατότητα κύλισης με μια όμορφη γραμμή κύλισης.

jQRangeSlider

jQuery pin

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

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

Άπειρη κύλιση AJAX

Overscroll

Overscrollείναι ένα πρόσθετο jQuery και polyfill για το στυλ κύλισης του Safari για κινητά. Προορίζεται για χρήση σε προγράμματα περιήγησης επιτραπέζιου υπολογιστή με τελευταία έκδοση jQuery.

jQuery.localScroll

Parallax ImageScroll - Πρόσθετο jQuery

jQuery και μια προσθήκη συμβατή με amd για τη δημιουργία ενός εφέ παράλλαξης, όπως φαίνεται στο spotify.com.

fullPage.js

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

Parallax.js

Jarallax

Jarallaxείναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα πηγαίος κώδικας, που απλοποιεί ρύθμιση cssμε βάση την αλληλεπίδραση. Το Jarallax διευκολύνει τη δημιουργία ιστότοπου με κύλιση parallax

jInvertScroll

jQuery fullContent.js

Πλήρες περιεχόμενο jQueryσας επιτρέπει να δημιουργείτε πλήρως ιστοσελίδες.

jQuery Κύλιση μίας σελίδας

Δημιουργήστε έναν ιστότοπο με κύλιση μιας σελίδας (ιστότοπος iPhone 5S) με προσθήκη κύλισης μιας σελίδας.

Πρόσθετο jQuery Parallax

Το jQuery Parallax είναι ένα σενάριο που προσομοιώνει το εφέ παράλλαξης όπως φαίνεται στο nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

Χαρτοφυλάκια

Χαρτοφυλάκιαείναι ένα ελαφρύ πρόσθετο jQuery γκαλερίγια την όμορφη οριζόντια κύλιση εικόνων που υποστηρίζει προγράμματα περιήγησης για υπολογιστές, tablet και κινητά.

Πρόσθετο Scrolling Parallax

Scrolling Parallaxείναι ένα νέο πρόσθετο jQuery που συνδέει το εφέ parallax με τις γραμμές κύλισης και τον τροχό του ποντικιού. Αυτό επιτρέπει εικόνα φόντουή οτιδήποτε άλλο για κύλιση με διαφορετικό ρυθμό από την ιστοσελίδα όταν ο χρήστης κάνει κύλιση. Το φαινόμενο παράλλαξης που προκύπτει είναι ένας εύκολος τρόπος για να δημιουργήσετε την ψευδαίσθηση του βάθους στον ιστότοπό σας.

καρτέλα κύλισης

κυλιόμενος

κύλισης

Ξεχωριστή βιβλιοθήκη κύλισης parallax για κινητές συσκευές(Android + iOS) και υπολογιστή. Χωρίς jQuery. Απλά απλό JavaScript (και λίγη μαγεία).

SMINT

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

Προσαρμοσμένο πρόγραμμα κύλισης περιεχομένου jQuery

Ένα εξαιρετικά προσαρμόσιμο πρόσθετο κύλισης jQuery. Τα χαρακτηριστικά περιλαμβάνουν κάθετη ή/και οριζόντια γραμμή κύλισης, προσαρμοσμένη ορμή κύλισης, τροχό ποντικιού (μέσω της προσθήκης ποντικιού jQuery), υποστήριξη πληκτρολογίου και οθόνη αφήςέτοιμα προς χρήση θέματα και προσαρμογή με χρησιμοποιώντας CSS, υποστήριξη για κατεύθυνση RTL, ρυθμίσεις επιλογών για πλήρη έλεγχο των λειτουργιών κύλισης, μέθοδοι ενεργοποίησης ενεργειών όπως κύλιση, ενημέρωση, καταστροφή κ.λπ.

Πρόσθετο ScrollUp Bar

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

StickyTableHeaders

jQuery panelSnap

isInViewport.js

υδατόπτωση

πρόσθετο jquery υδατόπτωση, όπως Pinterest, huaban.com, faxianla.com

κύλινδρος

jQuery.SerialScroll

jscroll

jscrollείναι ένα jQuery infinite scroll plugin γραμμένο από τον Philip Klausinsky. Άπειρη κύλιση. γνωστός και ως τεμπέλης φόρτωση, άπειρη κύλιση, αυτοπειρατισμός, άπειρες σελίδες κ.λπ.

FoldScroll

scrollUp πρόσθετο jQuery

μετακινηθείτε προς τα επάνωείναι ένα ελαφρύ πρόσθετο jQuery για τη δημιουργία μιας προσαρμοσμένης δυνατότητας Scroll Up που θα λειτουργεί εύκολα με οποιονδήποτε ιστότοπο.

multiScroll.js

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

Οποιοδήποτε πρόγραμμα κύλισης λίστας

qpScroll

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

jQuery Κολλήστε τα

Parallax.js

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

Slinky.js

Slinky.jsείναι ένα πρόσθετο jQuery για τη δημιουργία όμορφων κυλιόμενων λιστών πλοήγησης με στοίβαξη κεφαλίδων.

Infinity.js

Infinity.jsείναι ένα UITableView για τον Ιστό: επιταχύνει την κύλιση σε μεγάλες λίστες και διατηρεί τις ατελείωτες ροές σας ομαλές και σταθερές για τους χρήστες σας. Είναι μικρό, δοκιμασμένο στο χρόνο και εξαιρετικά αποδοτικό.

Αυθαίρετη Άγκυρα

Σημεία διαδρομής

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

jQuery.kinetic

Γραμμή προόδου κύλισης

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

jQuery Smooth Div Scroll

Ομαλή κύλιση Divείναι ένα πρόσθετο jQuery που κάνει κύλιση περιεχομένου οριζόντια προς τα αριστερά ή προς τα δεξιά.

jQuery Story Tale

Ένα απλό πρόσθετο jQuery που επεκτείνει το πρόσθετο animateScroll με δυνατότητες μίας σελίδας.

jQuery Animation Scroll Plugin

jQuery.ScrollTo

Πρόσθετο Endless Scroll jQuery

Η άπειρη κύλιση (ή άπειρη κύλιση) είναι μια δημοφιλής τεχνική μεταξύ των ιστοτόπων 2.0, όπως το Google Reader και η Αναζήτηση ζωντανής εικόνας, όπου αντί να σελιδοποιεί στοιχεία χρησιμοποιώντας την παραδοσιακή τεχνική σελιδοποίησης, η σελίδα απλώς φορτώνει νέα στοιχεία που επισυνάπτονται στο τέλος.

Τα τελευταία χρόνια, η δημοτικότητα των ιστοτόπων μιας σελίδας (κύλισης) έχει αυξηθεί σοβαρά. Παρόλο αυτό το είδοςτοποθεσίες και όχι για όλους, εξακολουθεί να είναι χρήσιμο να γνωρίζουμε πώς λειτουργούν. Σήμερα θα δείξω πώς να δημιουργήσετε έναν απλό ιστότοπο μιας σελίδας (κύλισης).χρησιμοποιώντας jQuery.

Πριν ξεκινήσουμε, μπορείτε να παρακολουθήσετε το Demo.

Λοιπόν, ας ξεκινήσουμε...

Θα δημιουργήσουμε τα εξής:

HTML

Η σήμανση (HTML) της σελίδας θα είναι εξαιρετικά απλή.

Ας δημιουργήσουμε πρώτα την πλοήγηση.

Τι κάναμε: το στοιχείο nav έχει πλάτος 100%, οπότε το πλάτος του θα είναι ίσο με το πλάτος γονικό στοιχείο. Για την πλοήγηση, η ιδιότητα θέσης έχει οριστεί σε σταθερή , επομένως κατά την κύλιση της σελίδας, το στοιχείο πλοήγησης θα βρίσκεται πάντα μπροστά στα μάτια του χρήστη. Για να δημιουργήσουμε πλοήγηση, τοποθετήσαμε μια ετικέτα ul στην ετικέτα πλοήγησης.

Πλεονεκτήματα:

1. Εάν ο χρήστης έχει απενεργοποιήσει τη Javascript, οι σύνδεσμοι εξακολουθούν να λειτουργούν.
2. Στο Βοήθεια jQueryθα διαβάζουμε το χαρακτηριστικό href από κάθε σύνδεσμο.

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

Όπως μπορείτε να δείτε, η σήμανση είναι εξαιρετικά απλή. Αποτελείται από ένα μπλοκ περιεχομένου που περιέχει τις παραγράφους (p). Κάθε παράγραφος έχει ένα αναγνωριστικό που σχετίζεται με έναν σύνδεσμο στην πλοήγησή μας.

css

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

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

Σώμα ( γραμματοσειρά-οικογένεια: arial; μέγεθος γραμματοσειράς: 15 εικονοστοιχεία; ύψος γραμμής: 25 εικονοστοιχεία; χρώμα: #515151; φόντο: #fdfdfd; ) #περιεχόμενο (πλάτος: 500 εικονοστοιχεία; περιθώριο: 0 αυτόματο; γέμιση κορυφής: 40 εικονοστοιχεία; ύψος : 2000 px; ) #content p ( margin-bottom: 25 px; )

Στο σώμα ορίζουμε τα χρώματα του κειμένου και του φόντου. το μπλοκ περιεχομένου έχει πλάτος 500 εικονοστοιχεία και στο κέντρο. Η τιμή για το padding-top του μπλοκ περιεχομένου είναι 40 px - αυτό γίνεται έτσι ώστε η πλοήγηση να μην αποκλείει τα επάνω 40 px του περιεχομένου. Το ύψος είναι 2000 px για να ταιριάζει στο περιεχόμενο και να εμφανίζεται η κύλιση. Αν και, κατά κανόνα, αυτό δεν είναι απαραίτητο. Κάθε παράγραφος έχει περιθώριο-κάτω 25 εικονοστοιχείων, ώστε να μπορείτε να δείτε πού τελειώνει μια παράγραφος και ξεκινά μια άλλη.

Τώρα ας προχωρήσουμε στην πλοήγηση:

Nav ( πλάτος: 100%; θέση: σταθερό; ύψος: 40 εικονοστοιχεία; φόντο: λευκό; περίγραμμα: 1 εικονοστοιχείο συμπαγές #CACACA; περίγραμμα κορυφής: κανένα; -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box -shadow: 0px 0px 3px 1px #ebebeb; box-shadow: 0px 0px 3px 1px #ebebeb; ) nav ul (πλάτος: 750px; περιθώριο: 0 auto; ) nav ul li( float: left; πλάτος: 150px; : κέντρο; ) nav ul li a (ύψος γραμμής: 40 εικονοστοιχεία; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; διακόσμηση κειμένου: κανένα; χρώμα: #515151; κάτω περιγράμματος: 1 εικονοστοιχείο με κουκκίδες #515151; ) nav ul li a:hover( χρώμα : #000;)

Για να κάνετε το πλοήγηση να καλύπτει όλο το πλάτος του προγράμματος περιήγησης, ορίστε το πλάτος του στο 100% . Για να διατηρείται το nav στην οθόνη κατά την κύλιση, έχει μια δήλωση θέσης:σταθερή. Το ύψος είναι 40 px, κάτι που είναι φυσιολογικό για οριζόντια επάνω μενού. Ένα απλό στυλ χρησιμοποιήθηκε για να δώσει μια χαριτωμένη εμφάνιση. Το ul είναι κεντραρισμένο και πλάτος 750 px, έτσι ώστε κάθε σύνδεσμος να έχει αρκετό χώρο. Κάθε li είναι φτιαγμένο να επιπλέει, έτσι όλοι οι σύνδεσμοι βρίσκονται στην ίδια γραμμή. Τέλος, οι σύνδεσμοι έχουν επίσης ένα απλό στυλ.

jQuery

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

Όπως πάντα, ας ξεκινήσουμε με τη συνάρτηση document.ready

$(document).ready(function()( ));

Τώρα, πριν προχωρήσουμε στη συνάρτηση κλικ, ας γράψουμε μια συνάρτηση scrollToDiv που θα κάνει κύλιση στο μπλοκ που έχουμε επιλέξει. Θα υπάρχουν 2 παράμετροι - το στοιχείο προς κύλιση και το ύψος της γραμμής πλοήγησης στο επάνω μέρος της σελίδας.

Συνάρτηση scrollToDiv(στοιχείο, ύψος πλοήγησης)( )

Τώρα περιγράφουμε τρεις μεταβλητές, θα τις χρειαστούμε για ακριβή κύλιση.

Συνάρτηση scrollToDiv(στοιχείο,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; )

Η μεταβλητή μετατόπιση είναι η μετατόπιση του στοιχείου. Χρησιμοποιείται από τη μεταβλητή offsetTop για να τραβήξει την τιμή του top. Ως αποτέλεσμα, παίρνουμε την απόσταση από την κορυφή της σελίδας στο στοιχείο. Η μεταβλητή totalScroll είναι υπεύθυνη για την απόσταση που χρειάζεται το πρόγραμμα περιήγησης για να πραγματοποιήσει κύλιση στη σελίδα. Χωρίς πάνω πάνελπλοήγησης, η τιμή κύλισης θα είναι ίση με την τιμή offsetTop. Ωστόσο, κατά τον υπολογισμό της μεταβλητής totalScroll, πρέπει να θυμόμαστε ότι η γραμμή πλοήγησής μας αποκλείει τα κορυφαία 40 εικονοστοιχεία του περιεχομένου. Η παράμετρος navheight θα μας βοηθήσει εδώ.

Τέλος, κάντε κύλιση στη σελίδα:

$("body,html").animate(( scrollTop: totalScroll ), 500);

Η λειτουργία jQuery animate θα μας επιτρέψει να εφαρμόσουμε ομαλή κύλιση στο επιθυμητό μέρος της σελίδας. Σε αυτήν την περίπτωση, το animation διαρκεί 500 χιλιοστά του δευτερολέπτου.

Η ιδιότητα scrollTop σάς επιτρέπει να ορίσετε το ποσό κατά το οποίο θέλετε να κάνετε κύλιση στη σελίδα (κάθετα).

Εδώ είναι η πλήρης συνάρτηση scrollToDiv:

Συνάρτηση scrollToDiv(στοιχείο,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $("body,html").animate(( scrollTop: totalScroll ), 500) ;)

Ας προχωρήσουμε στη λειτουργία κλικ.

$("nav ul li a").click(function()( return false; ));

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

Για να μπορέσουμε να περάσουμε ένα στοιχείο σε μια συνάρτηση, πρέπει να βρούμε ένα όνομα για αυτό.

Varel = $(this).attr("href"); var elWrapped = $(el);

Η μεταβλητή el περιέχει την τιμή του χαρακτηριστικού href. Για να χρησιμοποιήσει το jQuery τη μεταβλητή el, πρέπει να είναι τυλιγμένη σε elWrapped . Ο ακόλουθος κώδικας jQuery δεν μπορεί να εκτελεστεί:

#paragraph1.offset();

Αλλά μπορεί να κάνει αυτό:

$("#paragraph1").offset();

Γι' αυτό χρειάζεται η μεταβλητή elWrapped.

Λειτουργία πλήρους κλικ:

$("nav ul li a").click(function()( var el = $(this).attr("href"); var elWrapped = $(el); scrollToDiv(elWrapped,40); return false; ) )

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

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

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

1 2 3 4 5 6 7 8 9 10

<html > <σώμα>Πολύ περιεχόμενο εδώ...<div id="block">Κάποιο κείμενο.<τύπος εισόδου = "button" class = "but" value = "(!LANG:Κλείσιμο" / > !} </div> <div id="footer">υποσέλιδο</div> </σώμα> </html>

Πολύ περιεχόμενο εδώ...

Τώρα ας διακοσμήσουμε το κρυφό μπλοκ μας και το κουμπί του:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#block (οθόνη: κανένας; θέση: σταθερό; επάνω: 15 εικονοστοιχεία; δεξιά: 15 εικονοστοιχεία; χρώμα: #fff; φόντο: #4CAF50; γέμιση: 10 εικονοστοιχεία; ακτίνα περιγράμματος: 5 εικονοστοιχεία; πλάτος: 200 εικονοστοιχεία: 200 εικονοστοιχεία; πλαίσιο-σκιά -5 εικονοστοιχεία #3a3a3a ; οικογένεια γραμματοσειράς : Arial; στοίχιση κειμένου : κέντρο ; ) .btn( φόντο : #FF9800 ; περίγραμμα : 2 εικονοστοιχεία συμπαγές #795548 ; χρώμα : #fff ; ακτίνα περιγράμματος : 5 εικονοστοιχεία ; δρομέας : δείκτης 5 εικονοστοιχεία 10 εικονοστοιχεία ; περιθώριο κορυφής : 10 εικονοστοιχεία ; βάρος γραμματοσειράς : έντονη γραφή ; )

#block( οθόνη: κανένα, θέση: σταθερό -5 εικονοστοιχεία #3a3a3a; οικογένεια γραμματοσειράς: Arial; στοίχιση κειμένου: κέντρο; ) .btn( φόντο: #FF9800; περίγραμμα: 2 εικονοστοιχεία συμπαγές #795548; χρώμα: #fff; ακτίνα περιγράμματος: 5 εικονοστοιχεία; δρομέας: δείκτης, συμπλήρωση: 5 εικονοστοιχεία 10 εικονοστοιχεία, περιθώριο κορυφής: 10 εικονοστοιχεία, βάρος γραμματοσειράς: έντονη γραφή, )

Τώρα ας ασχοληθούμε απευθείας με αυτό που ονομάζεται κύλιση σε στοιχείο. Ακόμη αγγλική γλώσσααπαραίτητο για τον προγραμματιστή. Συμπεριλάβετε το jQuery ως τυπικό. Θα το κάνω μέσω CDN καθώς θα είναι η πιο ενημερωμένη έκδοση.

<σενάριο src= "//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Και μετά ο ίδιος ο κώδικας σεναρίου, ο οποίος θα δημιουργήσει μαγεία στη σελίδα:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready (συνάρτηση () ( var $element = $(".footer" ) ; let counter = 0 ; $(window) .scroll (function () ( var scroll = $(window) .scrollTop () + $(παράθυρο).ύψος () ; //Εάν μετακινηθείτε στο τέλος του στοιχείου //var offset = $element.offset().top + $element.height(); //Εάν μετακινηθείτε στην αρχή του στοιχείου var offset = $element.offset () .top if (scroll > offset && counter == 0 ) ( $("#block" ) .fadeIn (500 ) ; counter = 1 ; ) ) ); $(".btn" ) .κλικ (συνάρτηση () ( $("#block" ) .slideUp () ; ) ); ) ) ;

$(document).ready(function()( var $element = $(".footer"); let counter = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop() + $(window).height(); //Αν κύλιση στο τέλος του στοιχείου //var offset = $element.offset().top + $element.height(); //Αν κύλιση στην αρχή του στοιχείο var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500); counter = 1; ) )); $(".btn ").click(function ()( $("#block").slideUp(); )); ));

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

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

Reg.ru: τομείς και φιλοξενία

Ο μεγαλύτερος καταχωρητής και πάροχος φιλοξενίας στη Ρωσία.

Πάνω από 2 εκατομμύρια ονόματα τομέα σε υπηρεσία.

Προώθηση, mail για domain, λύσεις για επιχειρήσεις.

Περισσότεροι από 700 χιλιάδες πελάτες σε όλο τον κόσμο έχουν ήδη κάνει την επιλογή τους.

Bootstrap Framework: Γρήγορη απόκριση διάταξη

Βήμα προς βήμα μάθημα βίντεο για τα βασικά προσαρμοστική διάταξηστο πλαίσιο Bootstrap.

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

Φτιάξτε κατά παραγγελία και λάβετε χρήματα.

*Μετακίνηση του ποντικιού για παύση της κύλισης.

Πίσω μπροστά

Ομαλή κύλιση σελίδας με jQuery

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

Είναι συχνά βολικό να χρησιμοποιείτε έναν σύνδεσμο "Επιστροφή στην κορυφή" όταν βρίσκεστε πιο κοντά στο κάτω μέρος μιας σελίδας.

Είναι δυνατή η εφαρμογή αυτής της δυνατότητας αποκλειστικά με HTML και CSS, αλλά σε αυτό το βίντεο θα σας δείξω πώς μπορείτε να βελτιώσετε αυτήν τη δυνατότητα και να την κάνετε πιο βολική χρησιμοποιώντας τη βιβλιοθήκη jQuery.

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

Εμφανίζονται μόνο όταν η σελίδα μετακινείται προς τα κάτω κατά έναν ορισμένο αριθμό pixel, τα οποία μπορείτε να ορίσετε μόνοι σας.

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

Επίδειξη του σεναρίου και λεπτομερής ανάλυσηΔείτε τον κώδικα στο παρακάτω βίντεο.

Μια σύντομη επισκόπηση του μαθήματος (για όλες τις λεπτομέρειες, δείτε το βίντεο):

index.html

1. Πρώτοναυτό που χρειαζόμαστε είναι ένα αρχείο που θα περιέχει τον ίδιο τον σύνδεσμο "Επιστροφή στην κορυφή". Ας είναι index.html.

Για να λειτουργήσουν όλα, στην ενότητα κεφάλιέγγραφο, πρέπει να συμπεριλάβουμε ένα αρχείο στυλ και δύο αρχεία JavaScript (περισσότερα για αυτά αργότερα):

Αρχικά, συμπεριλαμβάνουμε τη βιβλιοθήκη jQuery και μετά το αρχείο script.js με τον κώδικα που γράφουμε μόνοι μας.

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

Μπλουζα

script.js

2. Δεύτερονείναι το αρχείο script.js, στο οποίο γράφουμε τις συναρτήσεις που εκτελούν τις κύριες ενέργειες:

$(document).ready(function()( $(function ()( $("#back-top").hide(); $(window).scroll(function ()( if ($(this).scrollTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); $("#back-top a" ).click(function ()( $("body,html").animate(( scrollTop:0), 800); return false; )); )); ));

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

Στη συνέχεια, καταγράφουμε το συμβάν κύλισης παραθύρου και εάν η κύλιση μειωθεί κατά 700 pixel ή περισσότερα, τότε εμφανίζουμε ομαλά το κουμπί "Επάνω" χρησιμοποιώντας τη μέθοδο ξεθωριάζω. Διαφορετικά, το κρύβουμε με τη μέθοδο fadeOut.

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

στυλ.css

3. Και τρίτονείναι ένα αρχείο στυλ. Στο παράδειγμά μας, δεν υπάρχει τίποτα περιττό σε αυτό, επομένως υπάρχουν λίγα στυλ:

Κύριο μέρος ( μέγεθος γραμματοσειράς: 13 εικονοστοιχεία, ύψος γραμμής: 1,65 εκ.; οικογένεια γραμματοσειράς: Verdana, sans-serif; ) p ( περιθώριο-αριστερά: 150 εικονοστοιχεία; ) /* Επάνω κουμπί */ #back-top( position:fixed; κάτω: 10 εικονοστοιχεία; αριστερά: 0 εικονοστοιχεία; ) #back-top a (πλάτος: 55 εικονοστοιχεία; εμφάνιση: μπλοκ; στοίχιση κειμένου: κέντρο; γραμματοσειρά: 11 εικονοστοιχεία/100% Arial, Helvetica, sans-serif; μετατροπή κειμένου: κεφαλαία; κείμενο -διακόσμηση:κανένα;χρώμα φόντου: διαφανές; -webkit-transition:1s; -moz-transition:1s; transition:1s; ) /* γραφικό βέλος */ #back-top span(πλάτος:55px; ύψος:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -webkit-transition:1s; -moz-transition:1s; transition:1s ; ) #back-top a:hover span(χρώμα φόντου: rgba(0, 0, 0, 0.3);)

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

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

Εδώ είναι το σενάριο που θα χρειαστούμε.

Το σενάριο αποτελείται από μια συνάρτηση της οποίας η μόνη παράμετρος είναι μια μεταβλητή με την τιμή id του μπλοκ όπου θέλετε να κάνετε μια ομαλή μετάβαση.

Μέσα στη συνάρτηση, στην πρώτη γραμμή, δημιουργείται η μεταβλητή offset με τιμή 0.

animate - σας επιτρέπει να εκτελέσετε μια προσαρμοσμένη κινούμενη εικόνα με βάση την αλλαγή Ιδιότητες CSSγια τα επιλεγμένα στοιχεία.

scrollTop - Λαμβάνει την τιμή πλήρωσης κύλισης για το πρώτο στοιχείο του σετ.

Όπου είναι το 1000, υποδεικνύεται ο χρόνος διάρκειας μετάβασης. Αλλάζοντας αυτή τη φορά επιταχύνετε ή επιβραδύνετε την κύλιση.

Πως δουλεύει?

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

Ζητήστε μια κλήση!

Εδώ απλό HTMLδείγμα.

Για να λειτουργήσει το σενάριο, πρέπει να συμπεριλάβετε τη βιβλιοθήκη jquery.

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

Ζητήστε μια κλήση!

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