Scrollmagic: διασκεδαστικό web design

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

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

ScrollMagic: Διασκέδαση Web Design

Το ScrollMagic είναι μια βιβλιοθήκη που δημιουργήθηκε στο javascript για να επιτύχει αλληλεπιδράσεις όταν μετακινεί ιστοσελίδες. Πρόκειται για μια πλήρη επανεγγραφή του προκάτοχού του Superscrollorama και η αρχιτεκτονική του βασίζεται σε plugins που προσφέρουν εύκολη προσαρμογή και δυνατότητα επέκτασης.

Είναι ιδανικό αν θέλουμε να εφαρμόσουμε κάποια από τα ακόλουθα:

• Δημιουργήστε μια σελίδα με άπειρη κύλιση, χειριστείτε το περιεχόμενο με το ajax. Για να δημιουργήσετε μια σελίδα με άπειρο κύλιση, χειριστείτε το περιεχόμενο με το ajax.

ScrollMagic Χαρακτηριστικά

• Βελτιστοποιημένη απόδοση, είναι ελαφριά, ευέλικτη και επιτρέπει επέκταση, διαχείριση συμβάντων και αντικειμενοστρεφές προγραμματισμό, υποστηρίζει προσαρμοστικό σχεδιασμό ιστοσελίδων, υποστηρίζει κινήσεις και στις δύο κατευθύνσεις (οριζόντια και κάθετη), έχει υποστήριξη για κινήσεις μέσα σε δοχεία (div), ακόμα και πολλαπλάσια σε μία σελίδα.Το πρόγραμμα λειτουργεί τέλεια για προγράμματα περιήγησης: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+ .Στην αποθήκη GitHub διαθέτει λεπτομερή τεκμηρίωση και πολλά παραδείγματα εφαρμογής.

Αποκτήστε το ScrollMagic

Είναι διαθέσιμο για να το αποκτήσετε με διάφορους τρόπους.

1: GitHub

git clit: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower εγκαταστήστε scrollmagic

3: διαχειριστής πακέτων κόμβων

npm εγκατάσταση scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

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

Εγκατάσταση και χρήση

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

.

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

Αυτό θα ήταν ένα βασικό παράδειγμα:

// αρχικός ελεγκτής var controller = νέος ScrollMagic.Controller (); // δημιουργήστε μια σκηνή νέα ScrollMagic.Scene ({duration: 100, // η σκηνή πρέπει να διαρκέσει για μια απόσταση κύλισης 100px offset: 50 // ξεκινήστε αυτή τη σκηνή μετά την κύλιση για 50px}).setPin ("# my-sticky- στοιχείο ") // ακίδες του στοιχείου για τη διάρκεια της σκηνής.addTo (ελεγκτής). // ορίστε τη σκηνή στον ελεγκτή

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

$ (λειτουργία () {// περιμένετε να είναι έτοιμος για το έγγραφο // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5,: Linear.easeNone}), // build scene scree = new ScrollMagic.Scene ({triggerElement: "#multiDirect", διάρκεια: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({όνομα: "αλλαγή μεγέθους"}) // προσθέστε δείκτες (απαιτεί plugin).addTo (ελεγκτής); // init ελεγκτής οριζόντιος var controller_h = νέος ScrollMagic.Controller ({vertical: false}); tween_h = TweenMax.to ("# animate", 0.5, {περιστροφή: 360, ευκολία: Linear.easeNone}), // δημιουργία σκηνής var scene_h = νέα ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // προσθέστε δείκτες (απαιτείται plugin).addTo (controller_h);));

Μπορείτε να βρείτε πολλά άλλα παραδείγματα με τον πηγαίο κώδικα τους στην τεκμηρίωση του plugin.

Σας συνιστούμε να κάνετε μια καθαρή εγκατάσταση των Windows 10 χρησιμοποιώντας ένα stick USB