JQuery Parallax Παραδείγματα. Απλή τεχνική επίδειξης παράλλαξης
, Χελώνες εγκαίρως. ή πρωτότυπο παιχνίδι Σελήνη περιπολία . Σε αυτά τα παιχνίδια, η τεχνική Parallax παρατηρείται αυτή τη στιγμή όταν πολλά Στρώματα φόντου Με διαφορετικές υφές, που μετακινούνται σε διαφορετικές ταχύτητες, οι οποίες δημιουργούν την επίδραση του τρισδιάστατου χώρου.
Γιατί άρχισα να μιλάω για παιχνίδια ρετρό στο άρθρο ανάπτυξης ιστοσελίδων; Η απλούστερη απάντηση θα μπορούσε να είναι "επειδή είναι δροσερό", αλλά όχι. Η κύλιση Pararalax είναι μια έννοια σχεδιασμού στην τάξη που κάνει το δρόμο του στον κόσμο του σχεδιασμού ιστοσελίδων. Η Nike ήταν μεταξύ των πρώτων που χρησιμοποίησε αυτή την τεχνική με μεγάλη επιτυχία όταν προσέλαβαν τον Weiden και τον Kennedy Marketing Giants για να αναπτύξουν την αρχική τους Nike Better World. Η ιστοσελίδα Nike Better World έχει ενημερωθεί από εκείνη την εποχή και αντικατασταθεί με ένα νέο, ωστόσο, υπάρχει ένας άλλος ιστότοπος, αρκετά παρόμοιος με το πρώτο Parallax Design από τη Nike - Site After Sports Drinks Activate.
Πιθανώς, παρατηρήσατε ότι κατά τη διάρκεια της κύλισης της σελίδας τοποθεσίας κάτω τα λίγα διαφορετικά στοιχεία σε αυτή τη σελίδα κινούνται σε διαφορετικές ταχύτητες. Ας πάρουμε τη σελίδα που εμφανίζεται στην εικόνα από πάνω. Δεδομένου ότι η σελίδα μετακινείται προς τα κάτω, θα δείτε ότι οι μπλε κουκίδες στο παρασκήνιο (εκείνοι που είναι λίγο θολές) κινούνται με την ίδια ταχύτητα με το scrollbar. Επίσης, θα δείτε ότι μια ομάδα μπλε κουκκίδων, τα οποία είναι πιο εστιασμένα και βρίσκονται στο προσκήνιο, κινούνται με λίγο μεγαλύτερη ταχύτητααπό τη γραμμή κύλισης. Ταχύτερα αυτά τα σημεία μετακινούνται κείμενο "0 ζάχαρη | 0 θερμίδες | Φυσικά γλυκιά "και τον κύριο τίτλο της σελίδας" Προϊόντα ". Και τέλος, υπάρχουν εικόνες του ίδιου του προϊόντος, τόσο μικρά όσο και τα αποπροσανατολισμένα στο παρασκήνιο και το μεγάλο, εστιασμένο και ξαπλωμένο στο προσκήνιο. Οι εικόνες των προϊόντων μετακινούνται με την ίδια ταχύτητα με το κείμενο, ενώ οι εικόνες του προϊόντος στο προσκήνιο κινούνται ταχύτερα από αυτό το κείμενο. Είναι όλα και είναι μια ιδανική επίδειξη της παράλληλης κύλισης, όταν τα διαφορετικά στρώματα των εικόνων είναι επάνω ο ένας στον άλλο και όλοι μετακινούνται σε διαφορετικές ταχύτητες κατά την κύλιση της σελίδας, δημιουργώντας ένα αποτέλεσμα τριών διαστάσεων.
Η κύλιση Parallax δεν περιορίζεται στην κατακόρυφη κύλιση της σελίδας ή κύλιση σε ευθεία γραμμή. Θα δώσουμε το δικαίωμα της Nintendo να επιδείξει ένα ιδανικό παράδειγμα που επιβεβαιώνει αυτή τη δήλωση. Θυμηθείτε τα πρώτα παιχνίδια της Nintendo, όπου οι ήρωές μας συνήθως κινούνται οριζόντια από αριστερά προς τα δεξιά κατά μήκος της οθόνης και δεν είναι κατακόρυφα κάτω, όπως το έχουμε δει στον ιστότοπο ενεργοποίησης παραπάνω. Βγείτε στο Markiokart Wii και ας μιλήσουμε για κάποια δροσερά πράγματα που μπορούμε να δούμε εκεί.
Το πρώτο πράγμα που θα παρατηρήσετε είναι η κατεύθυνση της κύλισης σελίδας - δεν είναι κατακόρυφος, αλλά όπως λέγεται παραπάνω, αλλά αρχικά οριζόντια. Φυσικά, είναι δροσερό, αλλά δεν είναι επίσης μια νέα ιδέα. Επίσης, θα παρατηρήσετε το Parallax Effect με το Dinosaur Yoshi και τα κοχύλια στο παρασκήνιο, το Mario και το Luigi στο προσκήνιο και το κύριο περιεχόμενο που μετατοπίζεται σε διαφορετικές ταχύτητες κατά την κύλιση. Αλλά μόλις φτάσετε στις σελίδες #highlights και #attack, η τροχιά της μετατόπισης θα σταματήσει να είναι απολύτως οριζόντια. Το ίδιο ισχύει και για τη μετάβαση μεταξύ σελίδων #SRESSOVER και #SNES. Οι εικόνες όχι μόνο διατηρούν τους Διαφορετική ταχύτητα Μετατοπίσεις, αλλά αλλά και αλλαγή της γενικής κατεύθυνσης από οριζόντια έως κάθετη.
Αξίζει επίσης να σημειωθεί ότι η χρήση του αποτελέσματος Parallax στον ιστότοπό σας δεν πρέπει να περιορίζεται μόνο από τη δυνατότητα δημιουργίας ενός τεχνητού αποτελέσματος 3D. Ο ιστότοπος του γερμανικού ιστού σχεδιασμού στούντιο στούντιο είναι ένα παράδειγμα του τρόπου με τον οποίο μπορείτε να χρησιμοποιήσετε το PararalLax για να προσθέσετε διαφορετικά εφέ στη σελίδα του ιστότοπου, όπως η κίνηση των εικονιδίων σε διαφορετικές τροχιές, η αύξηση και η μείωση τους ως κύλιση ιστότοπου.
Η κύλιση Parallax μπορεί επίσης να βοηθήσει στην αναζωογόνηση του ιστότοπου στην οποία δεν υπάρχει πολύ περιεχόμενο. Τι γίνεται αν το σύνολο του ιστότοπού σας αποτελείται από μια δήλωση αποστολής ή ένα τμήμα των Σχετικά με εμάς, καθώς και πληροφορίες επικοινωνίας; Πιθανότατα, θα μπορούσατε να το κάνετε μια σελίδα και υπό ορισμένες συνθήκες θα έχετε μια καλή τοποθεσία μιας σελίδας, αλλά θα θυμόμαστε από επισκέπτες; Πιθανότατα όχι. Αλλά τι γίνεται αν προσθέσετε λίγο παράλλαξη σε αυτόν, πώς έκαναν οι άνθρωποι την άνοιξη / το καλοκαίρι;
Η πρώτη μου εντύπωση ήταν "Ω, αυτός ο ιστότοπος φαίνεται όμορφος". Αλλά όταν άρχισα να το κλείσω, η εντύπωση ήταν αμέσως "wow, αυτός ο ιστότοπος είναι δροσερός!". Προσθέτοντας ένα απλό αποτέλεσμα παράλλαξης, κάνει τη διαφορά μεταξύ δεν είναι κακή και αξέχαστη.
Το Pararalax κύλισης είναι ένα καλό τέχνασμα που μπορεί να διατηρηθεί στο μανίκι. Και μπορεί πάντα να εφαρμοστεί ανεξάρτητα από το αν κάνετε μια πολύπλοκη πολυφωνική τοποθεσία ή μια απλή ιστοσελίδα επαγγελματικών καρτών μιας σελίδας.
Παραδείγματα τοποθεσιών με παράλλαξη
Μερικοί από αυτούς είναι πολύ δροσεροί, συστήνω εξοικείωση:Γεια σε όλους. Σήμερα θα σας πω για ένα μικρό σενάριο για να δημιουργήσετε ένα απλό αποτέλεσμα parallax.
Το άρθρο θα είναι σύντομο, αλλά ενημερωτικό, έτσι ώστε μετά από 15 λεπτά να προσθέσετε pararalax στην εξάντληση σας. Εάν έχετε καιρό καιρό ήθελε να προσθέσετε αυτή την ενδιαφέρουσα επίδραση στον ιστότοπο, στη συνέχεια να διαβάσετε ...
Τι είναι η παράλλαξη στην περιοχή
Ας σας πω πρώτα για το τι είναι καθόλου. Έτσι, η επίδραση Paraludex στο σχεδιασμό ιστοσελίδων είναι μια τέτοια δεξίωση στην οποία η εικόνα φόντου κινείται πιο αργά από τα στοιχεία που είναι πάνω από αυτό. Για πιο έμπειρους κάνουν μια κράτηση που δεν θα "συνδέσουμε" την επίδραση της παράλλαξης στον κέρσορα του ποντικιού. Και απλά δημιουργήστε παράλλαξη φόντο. Ας προχωρήσουμε.
Πώς να κάνετε μια παράλληλη επίδραση στην περιοχή
Έτσι, το πρώτο πράγμα που συνδέουμε τη βιβλιοθήκη JQuery. Ως συνήθως, μεταξύ των ετικετών κεφαλής:
Τώρα, πρέπει να κατεβάσετε το Script Simple Parallax Scrolling. Σας συνιστώ να χρησιμοποιήσετε αμέσως μια συμπιεσμένη έκδοση, αφού Επιπρόσθετες ρυθμίσεις Μέσα στο σενάριο δεν χρειάζεται:
Τώρα, ας το καταλάβουμε ότι πρέπει να εγγραφείτε στη σελίδα HTML για να κερδίσετε το Effect PararAllax.
Smartlanding.
Δημιουργία σελίδας προορισμού
Δεδομένα-parallax \u003d "κύλιση"
Image-image-src \u003d "διαδρομή προς εικόνα / bg.png"
Παρακαλείστε να σημειώσετε ότι η εικόνα δεν τοποθετείται στην κεφαλίδα χρησιμοποιώντας την ετικέτα IMG και έχει οριστεί απευθείας στο χαρακτηριστικό στο δοχείο στο οποίο θέλουμε να εφαρμόσουμε παράλλαξη.
Σε αυτό, κατ 'αρχήν, μπορείτε να τελειώσετε, αλλά μερικές λέξεις:
- Εάν δεν υπάρχουν άλλα στοιχεία στην κατάδυση στην οποία πρέπει να εφαρμοστεί η παράλλαξη, τότε είναι απαραίτητο να του ζητήσετε ένα ύψος, διαφορετικά δεν θα δείτε τίποτα.
- Σε περίπτωση χρήσης, όχι Προσαρμοστικός σχεδιασμόςΜπορείτε να ορίσετε το πλάτος και το ύψος της εικόνας απευθείας στο HTML χρησιμοποιώντας τα χαρακτηριστικά φυσικού και φυσικούTheight.
- Μπορείτε να μετακινήσετε εικόνες χρησιμοποιώντας το χαρακτηριστικό θέσης δεδομένων. Αυτή είναι μια αναλογική θέση στο CSS.
Με τις υπόλοιπες επιλογές μπορείτε να βρείτε στην επίσημη σελίδα του έργου, η οποία υποδεικνύεται παραπάνω.
Η επίδραση της Parallax είναι μια πολύ ενδιαφέρουσα τεχνική. Όταν η κύλιση, η εικόνα φόντου κινείται πιο αργά από το περιεχόμενο και το αποτέλεσμα είναι η ψευδαίσθηση του 3D χώρου. Σε αυτό το μάθημα, θα δείξουμε απλές και Αποτελεσματική μέθοδος Πάρτε ένα θαυμάσιο αποτέλεσμα.
Βαθμολόγηση
Αυτή η τεχνική βασίζεται στον έλεγχο της ταχύτητας της κινούμενης εικόνας φόντου. Δημιουργήστε σήμανση HTML που περιέχει δύο τμήματα με χαρακτηριστικά "τύπου δεδομένων" και "Ταχύτητα δεδομένων". Η ανάθεση χαρακτηριστικών θα αποκαλύψει λίγο αργότερα:
Ετικέτες
Σύμφωνα με τις προδιαγραφές, τυχόν χαρακτηριστικά που ξεκινούν με τα δεδομένα - θα υποβληθούν σε επεξεργασία ως αποθήκευση ιδιωτικών δεδομένων. Επιπλέον, δεν επηρεάζουν το πρότυπο.
Δεδομένου ότι πρέπει να ελέγξουμε την ταχύτητα των εικόνων φόντου κύλισης, για βασικές παραμέτρους, θα χρησιμοποιήσουμε τύπο δεδομένων \u003d "φόντο" και ταχύτητα δεδομένων \u003d "10".
Στη συνέχεια προσθέστε ετικέτα
Θα μετακινήσουμε το φόντο της ετικέτας
CSS.
Πριν από τη μετακίνηση στο JQuery Magic προσθέστε εικόνες φόντου για κάθε στοιχείο
#Home (φόντο: URL (home.jpg) 50% 0 Επαναλάβετε σταθερή; min-Ύψος: 1000px;) #Bout (Ιστορικό: URL (About.jpg) 50% 0 No-Repeat Min-Ύψος: 1000px;)
Και ορίζουμε τα στυλ για τα υπόλοιπα στοιχεία της σελίδας επίδειξης.
#Home (Ιστορικό: URL (home-bg.jpg) 50% 0 Επαναλάβετε σταθερή; min-Ύψος: 1000px; Ύψος: 1000px; περιθώριο: 0 auto; πλάτος: 100%; max-πλάτος: 1920px; θέση: συγγενής;) #Home Άρθρο (Ύψος: 458px; Θέση: Απόλυτη; Κείμενο-Ευθυγράμμιση: Κέντρο; Κορυφή: 150px; πλάτος: 100%;) #Bout (Ιστορικό: URL (περίπου-bg.jpg) 50% 0 Επαναλάβετε σταθερή; min-Ύψος : 1000px; Ύψος: 1000px; περιθώριο: 0 auto; πλάτος: 100% · max-πλάτος: 1920px · θέση: συγγενής · -webkit-box-σκιά: 0 50px RGBA (0,0,0,0,0,0,8) · Σκιά κουτιού: 0 0 50px RGBA (0,0,0,0,0,8).) # Άρθρο Άρθρο (Ύψος: 458px; Θέση: Απόλυτη; Κείμενο-Ευθυγράμμιση: Κέντρο; Κορυφή: 100%; )
Μαγικός κώδικας
Χρησιμοποιήστε το JQuery. Ας ξεκινήσουμε με το πρότυπο Document.Ready () μέθοδο για να είστε εμπιστοσύνη σχετικά με το φορτίο της σελίδας και την ετοιμότητά του για χειραγώγηση.
$ (έγγραφο) .Ready (λειτουργία () ());
Τώρα χρειάζεστε προσοχή. Το πρώτο πράγμα συμβαίνει εδώ - επανάληψη σε όλα τα στοιχεία
$ (έγγραφο) .REARY (Λειτουργία ($ ("τμήμα"). Κάθε (λειτουργία () (var $ bgobj \u003d $ (αυτό); // ορίστε ένα αντικείμενο));)).
Σε λειτουργία.each () Προσθέστε μια άλλη λειτουργία .Κλείστε (), το οποίο καλείται κατά τη στιγμή της έναρξης της κύλισης.
$ (Παράθυρο) .scroll (λειτουργία () () (
Πρέπει να καθορίσετε πόσο ο χρήστης μετακινήθηκε η σελίδα και, στη συνέχεια, διαιρέστε την προκύπτουσα τιμή με την τιμή που ορίζεται στο χαρακτηριστικό ταχύτητας δεδομένων.
Var ypos \u003d - ($ window.scrolltop () / $ bgobj.data ("ταχύτητα"));
$ window.ScrollTOP () - Παίρνουμε την τρέχουσα τιμή κύλισης από πάνω. $ bgobj.data ("ταχύτητα") αναφέρεται στο χαρακτηριστικό ταχύτητας δεδομένων στο σήμα. YPOS - η τελική τιμή που χρησιμοποιείται για την κύλιση. Ωστόσο, χρησιμοποιείται αρνητική τιμή, καθώς το φόντο μετατοπίζεται προς την αντίθετη κατεύθυνση σε σχέση με την κύλιση του χρήστη.
Στο παράδειγμά μας, το χαρακτηριστικό ταχύτητας δεδομένων είναι 10. Ας υποθέσουμε ότι το παράθυρο του προγράμματος περιήγησης μετακινείται κατά 57px. Αυτό σημαίνει ότι 57px χωρίζεται σε 10 \u003d 5.7px.
// Συλλέξτε τη θέση του VAR Counters \u003d "50%" + YPOS + "PX". // Shift $ bgobj.css υπόβαθρο ((bedformposition: Controls));
Τώρα πρέπει να συλλέξετε όλα τα δεδομένα σε μία τιμή. Για να αποθηκεύσετε τη θέση οριζόντιας στατικής θέσης, χρησιμοποιούμε μια τιμή 50% για την ιδιοκτησία Xposition. Στη συνέχεια, προσθέστε το YPOS ως την αξία της ιδιοκτησίας YPOPITION και, στη συνέχεια, ορίστε τις συντεταγμένες του φόντου
Στην τελική μορφή, ο κώδικας θα μοιάζει με αυτό:
$ (Έγγραφο) .Ready (λειτουργία ("ενότητα". Ο καθένας (λειτουργία () () (var $ bgobj \u003d $ (αυτό); // Αντιστοίχιση $ (παράθυρο) .Scroll (Λειτουργία () (var ypos \u003d - Window.ScrollTOP () / $ bgobj.data ("ταχύτητα")); // Συλλέξτε την τιμή των συντεταγμένων φόντου μαζί VAR Counter \u003d "50%" + ypos + + ypos + "px"; // Shift $ bgobj.css ((( ΙΔΙΟΚΤΗΤΗΣΗ: ΣΥΣΚΕΥΕΣ)))))) ·)) ·) ·) ·
Σταθεροποιητής για δηλαδή.
Ένα σημείο παραμένει: Οι εκδόσεις παλαιών δηλαδή δεν μπορούν να αποσύρουν ετικέτες
// Δημιουργία στοιχείων για το IE Document.createrelement ("άρθρο"). έγγραφο.createelement ("τμήμα") ·
Επιπλέον, χρησιμοποιούμε το αρχείο επαναφοράς CSS έτσι ώστε όλα τα προγράμματα περιήγησης να εμφανίζονται εξίσου.
Παράλλαξη(Parallax, Ελληνικά. Αλλαγή, εναλλαγή) - Αυτή είναι μια αλλαγή στην ορατή θέση του αντικειμένου σε σχέση με το απομακρυσμένο υπόβαθρο, ανάλογα με τη θέση του παρατηρητή. Από την προτεραιότητα, ο όρος αυτός χρησιμοποιήθηκε για φυσικά φαινόμενα, στην αστρονομία και τη γεωδαισία. Για παράδειγμα, μια τέτοια μετατόπιση του ήλιου σε σχέση με τη θέση όταν αντανακλάται στο νερό και υπάρχει pararalax στη φύση.
Στο σχεδιασμό ιστοσελίδων pararallaks-effect ή pararallax κύλιση - Αυτή είναι μια ειδική τεχνική όταν η εικόνα φόντου στο μέλλον κινείται πιο αργά από τα στοιχεία του προσκηνίου. Αυτή η τεχνολογία εξακολουθεί να εφαρμόζεται πιο συχνά, καθώς φαίνεται πραγματικά θεαματική και δροσερό.
Αυτή η επίδραση τρισδιάστατου χώρου επιτυγχάνεται με διάφορα στρώματα, τα οποία υπερβαίνουν ο ένας στον άλλο και κινούνται κατά την κύλιση Διάφορες ταχύτητες. Με αυτή την τεχνολογία, μπορείτε να δημιουργήσετε όχι μόνο ένα τεχνητό τρισδιάστατο αποτέλεσμα, μπορείτε να το εφαρμόσετε σε εικονίδια, εικόνες και άλλα στοιχεία της σελίδας.
Μειονεκτήματα του Effect Pararalax
Το κύριο μείον PARALLAX- Αυτά είναι προβλήματα με την απόδοση του ιστότοπου. Κοιτάζει όλα τα όμορφα και κομψά, αλλά η χρήση του JavaScript / jquery, με τη βοήθεια της οποίας δημιουργείται η επίδραση της Parallax, παίρνει σημαντικά τη σελίδα και μειώνει σημαντικά την ταχύτητα της φόρτωσής του. Αυτό συμβαίνει επειδή βασίζεται σε πολύπλοους υπολογισμούς: Το JavaScript πρέπει να ελέγχει τη θέση κάθε εικονοστοιχείου στην οθόνη. Σε ορισμένες περιπτώσεις, η κατάσταση περιπλέκεται επίσης από τα προβλήματα με το CrossBruster και Cross-Platform. Πολλοί προγραμματιστές συνιστούν τη χρήση του αποτελέσματος Parallax σε σχέση με τα δύο βασικά στοιχεία της σελίδας.
Εναλλακτική λύση
Με την εμφάνιση του CSS 3, η εργασία είναι λίγο απλουστευμένη. Με αυτό, μπορείτε να δημιουργήσετε ένα πολύ παρόμοιο αποτέλεσμα που θα είναι πολύ πιο οικονομικό από την άποψη των πόρων. Η ουσία είναι ότι το περιεχόμενο του ιστότοπου δημοσιεύεται σε μία σελίδα και η κίνηση σε υποπιστές συμβαίνει από τη μέθοδο CSS 3-μετάβαση. Αυτό είναι το ίδιο pararallax, αλλά με κάποια διάκριση: το γεγονός είναι ότι είναι αδύνατο να επιτευχθεί η μετάβαση σε κίνηση σε διαφορετικές ταχύτητες χρησιμοποιώντας μόνο CSS 3, είναι αδύνατο. Επιπλέον, αυτό το πρότυπο δεν υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Επομένως, υπάρχουν δυσκολίες εδώ.
Παραγωγή
Η επίδραση της Parallax, αν και δημοφιλής, αλλά όχι όλοι βρίσκονται σε βιασύνη για να το χρησιμοποιήσουν κατά τη δημιουργία ενός ιστότοπου λόγω των παραπάνω προβλημάτων. Προφανώς, ενώ χρειάζεστε μόνο χρόνο, ώστε οι τεχνολογίες να μπορούν να ξεπεράσουν τις δυσκολίες που έχουν προκύψει. Εν τω μεταξύ, αυτή η επιλογή μπορεί να χρησιμοποιηθεί σε ιστότοπους μονής σελίδων: έτσι θα θυμηθεί με ακρίβεια και μπορεί να διατηρήσει τον χρήστη.
PararalLax στο JavaScript.
- jquery.-EFECT PARALLAX κύλιση - plugin που δεσμεύει την επίδραση της παράλλαξης στην κίνηση του τροχού του ποντικιού
- Scrolldeck.- plugin για να δημιουργήσετε ένα παράλληλο αποτέλεσμα
- jparalax- Ενεργοποιεί τα στοιχεία της σελίδας σε απολύτως τοποθετημένα στρώματα που κινούνται σύμφωνα με το ποντίκι
| 29.09.2014
Καλή μέρα, Αγαπητοι αναγνωστες! Η σημερινή βαθμολογία που αποτελείται από 10 θέσεις είναι αφιερωμένη σε μη συνηθισμένους ιστότοπους. Οι ιστότοποι σε αυτή τη λίστα Top-10 έχουν ένα κοινό χαρακτηριστικό - το αποτέλεσμα της παράλλαξης.
Ειδικά για όσους εξακολουθούν να μην γνωρίζουν τι είναι, θα πούμε σύντομα για αυτό το αποτέλεσμα που έχει ήδη αρχίσει να κερδίζει εντατικά ορμή και γίνεται όλο και πιο δημοφιλής στον τομέα του σχεδιασμού ιστοσελίδων.
Έτσι, το αποτέλεσμα Parallax ή η κύλιση Pararalax είναι μια ειδική τεχνική στην οποία τα αντικείμενα στο παρασκήνιο κινούνται πιο αργά από τα αντικείμενα στο προσκήνιο. Λόγω αυτού, δημιουργείται το εφέ 3D, εμφανίζεται ένα αίσθημα τρισδιάστατου χώρου. Parallax κύλιση - Πολύ καλός τρόπος Προσθέστε ένα κενό σε έναν ιστότοπο μιας σελίδας, αναβιώστε infographics, πείτε στο ιστορικό ή επιδείξτε ένα χαρτοφυλάκιο. Και ορισμένα έργα των σύγχρονων σχεδιαστών μπορούν να ονομάζονται πλήρη εμπιστοσύνη με έργα τέχνης ... Ωστόσο, είναι καλύτερο να βλέπετε μία φορά, παρά να ακούσετε περισσότερα από εκατό φορές - δείτε τις κορυφαίες 10 τοποθεσίες μας και ρίξτε μια ματιά!
Σημείωση: Ορισμένες τοποθεσίες με κύλιση Parallax είναι επινοητικά λόγω μιας ποικιλίας αποτελεσμάτων, επομένως δεν αποκλείει "βασανιστήρια" σε ορισμένους υπολογιστές και φορητές συσκευές.
Grab & go.
Το δέκατο μέρος στην αξιολόγησή μας καταλαμβάνει την περιοχή Grab & Go, όπου το παράλληλο αποτέλεσμα χρησιμοποιείται ως διακόσμηση και αναζωογονεί την εικόνα. Όταν μετακινήσετε το δρομέα, μπορείτε να παρατηρήσετε πώς ταυτόχρονα κινείται στο σπίτι και τα δέντρα στο πίσω φόντο. Συμφωνώ, σε βάρος αυτής της σταφίδας υπάρχει μια πιθανότητα ότι ο ιστότοπος θυμόταν καλύτερα στον επισκέπτη.
Digitalhands.
Στην ιστοσελίδα DigitalHands, καταλαμβάνοντας την 9η θέση, το αποτέλεσμα Parallax χρησιμοποιείται επίσης για να σταθεί όμορφα και να θυμάστε τους επισκέπτες. Μετακινήστε το δρομέα του ποντικιού και απολαύστε ένα ειδικό αποτέλεσμα.
Madwell.
Η δημιουργική υπηρεσία της Νέας Υόρκης Madwell επιδεικνύει το χαρτοφυλάκιό του Κύρια σελίδα Τοποθεσία, με δυνατότητα επιδέξιας που χρησιμοποιεί παράλληλα. Το αίσθημα του 3D δεν αφήνει τον χρήστη καθ 'όλη τη διάρκεια της κύλισης χρόνου.
Oakley.
Οποιοδήποτε προϊόν χρειάζεται τη σωστή ιδέα. Στην ιστοσελίδα του δικτυακού τόπου κύλισης Oakley Pararallax, χρησιμοποιείται για να αποδείξει τα πλεονεκτήματα του AirBrake MX. Αποδείχθηκε αρκετά εντυπωσιακή και ενημερωτική επειδή τα προϊόντα μπορούν να ληφθούν υπόψη και να διερευνηθούν από όλες τις πλευρές, απλά χρησιμοποιώντας το κύλινδρο.
Κάνε τα χρήματά σας
Λίγοι άνθρωποι δεν ενδιαφέρονται για την προσωπική χρηματοδότηση. Ο ιστότοπος κάνει τα χρήματά σας, που πήρε την 6η θέση της βαθμολογίας μας, σε μια προσιτή μορφή αποκαλύπτει το κοινό τα πλεονεκτήματα της πιστωτικής ένωσης και λέει για τους μείον των τραπεζών. Εδώ μπορείτε να χρησιμοποιήσετε την αριθμομηχανή, η οποία θα δείξει πώς οι τράπεζες λαμβάνουν τράπεζες λόγω των επενδύσεων των πελατών, καθώς και στην εύρεση υποκαταστημάτων πιστωτικών συνεταιρισμών στον δείκτη ταχυδρομικών αποστολών.
Διαστημική βελόνα
Θα θέλατε να εξερευνήσετε το Σιάτλ από ύψος 184 μέτρων; Ο ιστότοπος της βελόνας διαστήματος θα σας στείλει μια εικονική βόλτα κατά μήκος των πιο αναγνωρίσιμων αξιοθέατων της βελόνας του χώρου της πόλης, η οποία είναι στα αγγλικά σημαίνει "κοσμική βελόνα". Αυτό το ύψος του πύργου είναι 184 μ, πλάτους 42 μέτρων και ζυγίζει 9.550 τόνους αντέχει στους τυφώνες στις ταχύτητες του ανέμου στα 320 km / h και σεισμοί μέχρι 9.1 βαθμοί. Επιπλέον, ο πύργος έχει 25 βροντές. Ένα χαρακτηριστικό γνώρισμα Το Space Nidle είναι μια ιστοσελίδα επισκόπησης σε υψόμετρο 159 μέτρων, εστιατόριο Skycity και κατάστημα δώρων. Από τις κορυφές της μπορείτε να δείτε το κέντρο του Σιάτλ, το ηφαίστειο Rainier, τα βουνά του Cascade, τον κόλπο Eliot και τα γύρω νησιά.
PEUGEOT HYBRID4 - Γραφικό μυθιστόρημα
Το μεγαλύτερο γαλλικό αυτοκινητοβιομηχανία PEUGEOT είναι αρκετά έκτακτη παρουσίαση του υβριδικού συστήματος κίνησης Hybrid4. Πριν από τα μάτια μας, ανοίγει ένας συναρπαστικός κόμικς (ο οποίος, παρεμπιπτόντως, μπορεί να τεθεί σε αυτόματη αναπαραγωγή), όπου το καθήκον του κύριου χαρακτήρα είναι να πάρει μυστικά δεδομένα και να φύγει, χωρίς να πάρει το πρόβλημα. Για να εκτελέσετε με επιτυχία τη λειτουργία, αναγκάζεται να αλλάξει μεταξύ τεσσάρων διαφορετικών τρόπων κίνησης, η οποία μιμείται τεχνολογία PEUGEOT HYBRID4 - μέγιστη απόδοση και δυναμισμός (αθλητισμός), πλήρης λειτουργία κίνησης και μέγιστη ώθηση (4WD), ισορροπία μεταξύ απόδοσης και αποθήκευσης (AUTO) , Ήσυχη λειτουργία (ZEV).
Το περπάτημα νεκρό.
Έτσι, πλησίασαμε την τρίτη θέση στη λίστα των κορυφαίων χώρων μας, οι οποίες πήγαν στο Dead Dead Project. Κατά τη δημιουργία ενός ιστότοπου, η οποία πρώτα απέναντι σε πολλούς οπαδούς της σειράς "περπατώντας νεκρά", χρησιμοποίησε το HTML5, CSS3, JavaScript και, φυσικά, παράαλο αποτέλεσμα. Οι προγραμματιστές έκαναν μεγάλη δουλειά, αναγκάζοντας όλες αυτές τις τεχνολογίες μαζί και σε όλες τις πλατφόρμες. Να φτάσετε στον ιστότοπο και αρχίζοντας να μετακινηθείτε, ο χρήστης βλέπει μια κωμική ιστορία για το πώς οι ζόμπι κάνουν ηθοποιούς.
Ένα μοναδικό και μοναδικό έργο, μέρος της Sony "μετακινείται εκστρατεία" εντυπωσιακή με τον όγκο, τη δυναμική του και τη σκέψη στις μικρότερες λεπτομέρειες. Η καλύτερη παρουσίαση των προϊόντων από τη Sony είναι πιθανώς να μην βρει. Οι λέξεις είναι περιττές - απλά μετακινηθείτε προς τα κάτω και απολαύστε!
Επίπεδη vs. Ρεαλισμός
Και τέλος, φτάσαμε στην πρώτη θέση της βαθμολόγησης μας, η οποία πήρε το site flat vs. Ρεαλισμού - Ο Brainchchild του Interactive Agenction Interactive. Το έργο αυτό το νέο έτος με εντυπωσιακά γραφικά (και μουσική συνοδεία!) Είναι ένα είδος μίνι παιχνιδιού που αγωνίζεται με μια ενδιαφέρουσα προϊστορία, όπου η αντιπολίτευση εκπροσώπων δύο τύπων σχεδιασμού είναι ρεαλιστική και επίπεδη. Έχοντας επικεντρωθεί στον κύριο Holwiver του τέλους του 2013 - η αρχή του 2014, οι δημιουργοί δεν έχασαν: μετά την έξοδο, αυτή η εντυπωσιακή δουλειά προκάλεσε αμέσως τη Φούρρεα και έγινε ένα δημοφιλές θέμα της συζήτησης σε blogs και νέα.
Οι προγραμματιστές ιστότοπων κατάφεραν να ενώσουν την παράλληλη κύλιση και το παιχνίδι στο HTML5. "Θέλαμε να το κάνουμε έτσι ώστε κατά τη διάρκεια της κύλισης της τοποθεσίας από την αρχή μέχρι να τερματίσει όλες τις ενέργειες να εμφανιστούν ομαλά και χωρίς καθυστέρηση. Για να το κάνετε αυτό, εφαρμόσαμε το Ajax, το οποίο επέτρεψε την ενημέρωση των δεδομένων στο παρασκήνιο ", εξήγησε ο δημιουργικός διευθυντής του Οργανισμού Alejandro Lazos. Το έργο εκπροσωπήθηκε από το κοινό στο τέλος του 2013, πριν από το νέο έτος. Ετοιμαστείτε να μετατρέψετε το κύλινδρο, περιμένετε πολλά συναρπαστικά!
