Σε κίνηση, παράλλαξη σημαίνει μια αλλαγή στη θέση ενός αντικειμένου σε κάποιο φόντο σε σχέση με έναν παρατηρητή που βρίσκεται στη θέση του. Αυτός ο όρος έχει κερδίσει δημοτικότητα στο Διαδίκτυο. Συγκεκριμένα, ο ιστότοπος φαίνεται ενδιαφέρον, στο σχεδιασμό του οποίου υπάρχουν δυναμικά στοιχεία. Το Parallax είναι μια τεχνική σχεδίασης ιστοσελίδων που χρησιμοποιείται από webmasters για να προσελκύσουν μεγάλο αριθμό επισκεπτών.
Πώς είναι η παράλλαξη
Η κύλιση Parallax μπορεί να χρησιμοποιηθεί κάθετα αλλά και σε ευθεία γραμμή. Η Nintendo είναι το καλύτερο παράδειγμα. Πολλοί από εμάς θυμούνται με νοσταλγία παιχνίδια στον υπολογιστή, που αντιπροσωπεύονται από την κίνηση των κύριων χαρακτήρων από την αριστερή πλευρά της οθόνης προς τα δεξιά. Είναι επίσης δυνατή η μετακίνηση προς τα κάτω, που πραγματοποιείται κατά μήκος μιας κάθετα τοποθετημένης ευθείας γραμμής. Το φαινόμενο παράλλαξης στον Ιστό χρησιμοποιείται συχνά. Μπορείτε να χρησιμοποιήσετε JavaScript ή CSS για να δημιουργήσετε ένα κατακόρυφο ρυθμιστικό 3.
Το περιγραφόμενο τρισδιάστατο χωρικό αποτέλεσμα είναι απλώς χαρακτηριστικό τους. Οι δημιουργοί των παιχνιδιών χρησιμοποίησαν πολλά επίπεδα φόντου. Διαφέρουν ως προς την υφή, ενώ η κίνηση πραγματοποιείται με διαφορετικήταχύτητα.
Μην νομίζετε ότι η παράλλαξη είναι απλώς ένα τρισδιάστατο εφέ. Στη σελίδα, μπορείτε να μετακινήσετε τα υπάρχοντα εικονίδια. Επιπλέον, φαίνεται αρκετά ελκυστικό. Μια ιδιαίτερα καλή επιλογή είναι να χρησιμοποιήσετε μια μεμονωμένη τροχιά για καθένα από αυτά. Σε αυτήν την περίπτωση, χρησιμοποιούνται διαφορετικά εικονίδια που κινούνται κατά μήκος διαφορετικών τροχιών. Αυτό το σχέδιο τραβάει την προσοχή.
Η εικόνα ζωντανεύει
Είναι δύσκολο να βρεις έναν ιστότοπο χωρίς εικόνες. Υψηλής ποιότητας και ενδεικτικά σχέδια προσελκύουν επισκέπτες. Αλλά η μεγαλύτερη προσοχή τραβιέται σε διάφορα είδη δυναμικών εικόνων. Πράγματι, αν υπάρχει κίνηση κατά την επίσκεψη σε έναν ιστότοπο, τότε αυτό προσελκύει την προσοχή. Αυξάνει σημαντικά την πιθανότητα ο επισκέπτης να επιστρέψει σε έναν πόρο σε μια δυναμική εικόνα. Φαινόταν να κινείται ή όχι; Επομένως, για να προσελκύσετε επισκέπτες στον ιστότοπο, αξίζει να μελετήσετε κάτι όπως το φαινόμενο παράλλαξης.
Παραδείγματα τοποθεσίας κινούμενης εικόνας:
- hvorostovsky.com;
- www.kagisointeractive.com.
Όπως φαίνεται στα παραδείγματα, η εμπειρία βελτιώνεται με αναπτυσσόμενα μενού σε υποστοιχεία. Ένα τέτοιο στοιχείο εξοικονομεί χρόνο για τους επισκέπτες, επομένως είναι ελκυστικό για αυτούς.
jQuery βιβλιοθήκη
Ο όρος jQueryParallax ορίζει την ομώνυμη βιβλιοθήκη. Χάρη σε αυτό, είναι εύκολο να επιτευχθεί το αποτέλεσμα της κίνησης σε μορφή 3D. Στη βιβλιοθήκη jQuery, η τρισδιάστατη αντίληψη δημιουργείται με διάφορους τρόπους. Ένα από αυτά συνίσταται στην οριζόντια ταυτόχρονη κίνηση αντικειμένων φόντου μεδιαφορετική ταχύτητα. Αυτή η βιβλιοθήκη χαρακτηρίζεται από την παρουσία ενός μεγάλου αριθμού διαφορετικών ειδών ιδιοτήτων. Και η μετατόπιση που περιγράφεται εδώ είναι μόνο ένα μικρό μέρος των δυνατοτήτων του.
Ο ιστότοπος φαίνεται αρκετά ελκυστικός, για τη δημιουργία του οποίου χρησιμοποιήθηκαν διάφορα μοντέρνα στοιχεία. Ένα από αυτά είναι η παράλλαξη. Παραδείγματα ιστότοπων μπορεί να μοιάζουν με αυτό:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
Το jParallax αντιπροσωπεύεται από επίπεδα που κινούνται με το ποντίκι. Τα δυναμικά στοιχεία χαρακτηρίζονται από απόλυτη τοποθέτηση (θέση:απόλυτο;). Κάθε ένα από αυτά χαρακτηρίζεται από το δικό του μέγεθος και κίνηση με ξεχωριστή ταχύτητα. Μπορεί να είναι κείμενο ή εικόνα (κατόπιν αιτήματος των δημιουργών του πόρου).
Αντίληψη του επισκέπτη του ιστότοπου
Μετά από αυτό, ένα άτομο συνήθως δίνει προσοχή στο γεγονός ότι η σελίδα έχει σχεδιαστεί με υψηλή ποιότητα, βολική και ενημερωμένη. Αυτό το γεγονός είναι συνήθως σεβαστό. Συμβαίνει να προκύψει περιέργεια να δοκιμάσετε άλλα στοιχεία. Υπάρχει ένας τεράστιος αριθμός πανομοιότυπων τοποθεσιών στο Διαδίκτυο. Πώς να κάνετε τον πόρο σας ξεχωριστό;
Αν σας αρέσει το σχέδιο, ο επισκέπτης θα μείνει για μεγαλύτερο χρονικό διάστημα. Έτσι, αυξάνεται η πιθανότητα να τον ελκύσουν οι αναρτημένες πληροφορίες, θα δείξει ενδιαφέρον. Ως αποτέλεσμα, ένα άτομο θα χρησιμοποιήσει την προσφερόμενη υπηρεσία, το προϊόν ή την προωθητική προσφορά.
Αγαπημένα παλιά παιχνίδια
Η έννοια της «παράλλαξης» πρέπει να είναι γνωστή σε όλουςοπαδοί κονσόλας των 80s και 90s. Αυτό ισχύει για παιχνίδια:
- Mario Bros.
- Mortal Kombat.
- Streets of Rage.
- Moon Patrol.
- Χελώνες στο χρόνο.
Δηλαδή, η παράλλαξη είναι μια τεχνική που χρησιμοποιείται για αρκετά μεγάλο χρονικό διάστημα. Αυτά τα παιχνίδια θυμούνται πραγματικά με λίγη νοσταλγία. Άλλωστε, φαίνεται να είναι εμποτισμένοι με τον χαρακτήρα εκείνης της περιόδου.
Οι εικόνες στην οθόνη δημιουργούνται χρησιμοποιώντας μια τεχνική όπως η κύλιση παράλλαξης. Δεν υπάρχει τίποτα περίεργο στο γεγονός ότι αυτή η τεχνική έχει κερδίσει τη δημοτικότητα που της αξίζει. Αυτή η σχεδιαστική ιδέα γίνεται δεκτή με θέρμη από όσους έπαιξαν τη δεκαετία του '80-90 ή παρακολουθούσαν τον ελεύθερο χρόνο των φίλων τους.
Κύλιση Parallax
Οι έμποροι των κορυφαίων εμπορικών σημάτων του κόσμου έχουν από καιρό χρησιμοποιήσει κάθε είδους τεχνική πρόοδο. Έτσι, καθίσταται δυνατό να ενδιαφέρει ακόμη και έναν περιστασιακό επισκέπτη στον ιστότοπο.
Η κύλιση Parallax έχει χρησιμοποιηθεί με μεγάλη επιτυχία από τη Nike. Η αρχική ιστοσελίδα της εταιρείας σχεδιάστηκε από τους Weiden και Kennedy. Αλλά αυτό το σχέδιο δεν επιβίωσε. Ο πόρος ενημερώθηκε σταδιακά, σύμφωνα με τις τάσεις της εποχής μας. Το Activatedrinks.com είναι ένα παράδειγμα ιστότοπου του οποίου ο σχεδιασμός θυμίζει αυτόν που χρησιμοποιούσαν οι έμποροι της Nike εκείνης της περιόδου.
Τα ηχεία δεν πρέπει να είναι πάρα πολλά
Μην ξεχνάτε ότι ο σχεδιασμός του ιστότοπου είναι συχνά το βασικό κριτήριο που καθοδηγεί τον επισκέπτη. Κακή εκτέλεσηο πόρος συνήθως αφήνει τον χρήστη με την εντύπωση της επιπολαιότητας της ιδιοκτήτριας εταιρείας. Αλλά ένας ιστότοπος με όλα τα είδη ελκυστικών σχεδιαστικών στοιχείων υποδηλώνει την επιθυμία των ιδιοκτητών του οργανισμού να ενδιαφέρουν τους επισκέπτες.
Εδώ αξίζει να θυμηθούμε για την παράλλαξη. Αυτό είναι ένα υπέροχο εργαλείο. Αλλά και αυτοί δεν πρέπει να παρασυρθούν πολύ. Επειδή η σελίδα, στην οποία υπάρχει μεγάλος αριθμός διαφόρων ειδών κινούμενων στοιχείων, είναι αρκετά δύσκολο να γίνει αντιληπτή. Είναι καλύτερο να κάνετε το σχέδιο μετρίως κομψό και κατανοητό.
Το δυναμικό πρέπει να είναι μεμονωμένα στοιχεία που απαιτούν επιλογή. Μπορεί επίσης να υπάρχει μια εικόνα που δημιουργείται χρησιμοποιώντας επίπεδα που μετακινούνται το ένα σε σχέση με το άλλο. Μην ξεχνάτε ότι ο ιστότοπος χρήστη έχει σχεδιαστεί κυρίως για επισκέπτες. Δεν χρειάζεται να είναι ένα αριστούργημα ενός webmaster που έχει βάλει όλες τις γνώσεις του σε αυτό. Σε τελική ανάλυση, μια τέτοια προσέγγιση θα περιπλέξει μόνο την αντίληψη.
Πώς να δημιουργήσετε μια πλοήγηση ιστότοπου
Πώς να κάνετε παράλλαξη; Αυτή η ερώτηση ενδιαφέρει πολλούς κατασκευαστές ιστότοπων. Δεν είναι απαραίτητο να γνωρίζουμε τις περιπλοκές της σύνταξης ετικετών. Είναι πολύ βολικό να χρησιμοποιείτε ειδικούς πόρους στο Διαδίκτυο. Από τον μεγάλο αριθμό των διαθέσιμων προτάσεων, διακρίνονται οι ακόλουθοι βοηθοί:
- Το Plax είναι ένα πρόγραμμα που είναι αρκετά εύκολο στη χρήση. Τείνει να κάνει τη σελίδα ρευστή μετακινώντας το ποντίκι.
- jQuery Parallax Image Slider - Μια προσθήκη jQuery που χρησιμοποιείται για τη δημιουργία ρυθμιστικών εικόνων.
- Jquery Image Parallax - κατάλληλο για το σχεδιασμό διαφανών σχεδίων. Μέσω της χρήσης του PNG, τα-g.webp" />
- Το Curtain.js χρησιμοποιείται για τη δημιουργία σελίδας με σταθερά πλαίσια. Σε αυτή την περίπτωση παρατηρείται το αποτέλεσμα του ανοίγματος των κουρτινών.
- Scrolling Parallax: Ένα πρόσθετο jQuery δημιουργεί ένα εφέ παράλλαξης κατά την κύλιση του τροχού του ποντικιού.
Μερικά ακόμη χρήσιμα πρόσθετα
Όπως γνωρίζετε, οι πληροφορίες έχουν τη μεγαλύτερη αξία. Και όσο μεγαλύτερος είναι ο αριθμός των τρόπων για να επιτευχθεί το επιθυμητό είναι γνωστό, τόσο πιο κοντά είναι η πιθανότητα να επιτευχθεί το σωστό αποτέλεσμα. Χρήσιμα πρόσθετα που χρησιμοποιούνται για τη δημιουργία δυναμικών:
- jQuery Scroll Path - χρησιμοποιείται για την τοποθέτηση αντικειμένων στην καθορισμένη διαδρομή.
- Το Scrollorama είναι ένα πρόσθετο jQuery. Χρησιμοποιείται ως εργαλείο για ελκυστικό σχεδιασμό υλικών. Σας επιτρέπει να "αναβιώσετε" το κείμενο στη σελίδα χάρη στην άνετη κύλιση.
- Το Scrolldeck είναι μια προσθήκη jQuery. Είναι μια εξαιρετική λύση παρουσίασης για ιστοσελίδες μιας σελίδας.
- jParallax αντιπροσωπεύει την κίνηση των επιπέδων ανάλογα με την κίνηση του δείκτη του ποντικιού.
- Το Stellar.js είναι ένα πρόσθετο με το οποίο σχεδιάζεται οποιοδήποτε στοιχείο με την προσθήκη ενός εφέ κύλισης παράλλαξης.
Parallax αγκυροβολημένο στον δρομέα
Αυτή η παράλλαξη φαίνεται αρκετά εντυπωσιακή. Ακίνητος με την πρώτη ματιάΤα αντικείμενα της σελίδας του ιστότοπου μετακινούνται όταν πλησιάζει ο δρομέας του ποντικιού. Φαίνεται να ζωντανεύει και ακολουθεί το στοιχείο που μετακινείται.
Πρώτα, θα πρέπει να σταματήσετε στην εικόνα. Η απαιτούμενη εικόνα τοποθετείται σε πλαίσιο, ενώ οι άκρες της πρέπει να είναι κρυφές. Η μέθοδος είναι πολύ απλή και το σχέδιο που προκύπτει φαίνεται αρκετά ελκυστικό.
Το εφέ Parallax για τον ιστότοπο είναι ένας υπέροχος τρόπος σχεδιασμού. Η χρήση του δείχνει ότι δόθηκε η δέουσα προσοχή στη δημιουργία του πόρου. Ως εκ τούτου, αξίζει να δώσετε προσοχή στις προσφερόμενες υπηρεσίες ή στις πληροφορίες για ανάγνωση. Τέτοιοι ιστότοποι φαίνονται πιο πλεονεκτικοί στο φόντο πανομοιότυπων, αλλά απλά σχεδιασμένων πόρων.
