Μπορείτε να το ονομάσετε τζιμίκι, μπορείτε να το ονομάσετε καραμέλα μάτι, αλλά το φαινόμενο parallax στο web design είναι εδώ για να μείνει. Είναι ένα στοιχείο που θα δώσει στον ιστότοπό σας τον παράγοντα "WOW". Ενώ το αποτέλεσμα έχει περάσει εδώ και αρκετό καιρό, και υπάρχουν πολλές τοποθεσίες που το έχουν εφαρμόσει στο σχεδιασμό τους, είναι ακόμα δροσερό.

Εάν είστε έτοιμοι να συμμετάσχετε στο κίνημα και να προσθέσετε το αποτέλεσμα στην ιστοσελίδα σας WordPress, παραμείνετε συντονισμένοι.

Τι είναι το Parallax;

Για όσους δεν είναι εξοικειωμένοι με τον όρο, το λεξικό ορίζει τη λέξη "parallax" ως " το αποτέλεσμα με το οποίο η θέση ή η κατεύθυνση ενός αντικειμένου φαίνεται να διαφέρουν όταν βλέπουμε από διαφορετικές θέσεις. "

Στην ιστοσελίδα σχεδιασμού του κόσμου η παράλλαξη είναι μια τεχνική όπου οι εικόνες φόντου κινούνται με διαφορετική ταχύτητα, συνήθως πιο αργή από τις εικόνες του προσκηνίου. Ο σκοπός είναι να δημιουργηθεί μια ψευδαίσθηση βάθους (faux 3D effect) σε ένα περιβάλλον 2D.

Η εφαρμογή του parallax ήταν γύρω από τη δεκαετία του 1980 στον κόσμο των τυχερών παιχνιδιών, αλλά οι σχεδιαστές ιστοσελίδων μόλις άρχισαν να ενσωματώνουν το αποτέλεσμα ευρέως το 2011 χρησιμοποιώντας HTML5 και CSS3.

Πρώτο μονοπάτι: Θέματα WordPress

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

Υπάρχουν τόνοι θεμάτων WP έτοιμων με παράλλαξες, τόσο δωρεάν όσο και πληρωμένα. Μια γρήγορη αναζήτηση στο Google και στο χώρο αποθήκευσης θεμάτων WordPress θα σας δώσει περισσότερες επιλογές που μπορείτε να χειριστείτε ποτέ.

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

1. Πλαίσιο παραλλαξ

2. Marvy

3. SimpleShift

4. Eleganto

5. Ενσωματωμένη

6. Zeal

7. Juniper

8. Και μην ξεχνάτε το τελευταίο επίσημο θέμα από το WordPress, Twenty Seventeen, υποστηρίζει επίσης μια κεφαλίδα parallax.

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

Κάθε θέμα είναι διαφορετικό, αλλά συνήθως μπορείτε να προσαρμόσετε την εικόνα παράλλαξης φόντου μέσω του μενού "Εμφάνιση -> Προσαρμογή" και να επιλέξετε το συγκεκριμένο μενού σύμφωνα με τις ρυθμίσεις θεμάτων.

Δεύτερο μονοπάτι: Plugins WordPress

Εάν θέλετε να εφαρμόσετε το εφέ στις περιοχές της επιλογής σας, πρέπει να χρησιμοποιήσετε πρόσθετα. Παρόλο που ο αριθμός δεν είναι τόσο μεγάλος όσο με τα θέματα, υπάρχουν ακόμα πολλά plugins του WordPress parallax που μπορείτε να δοκιμάσετε. Εδώ είναι μερικές από αυτές από την αποθήκη plugin: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider και Aesop Story Engine.

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

Εφόσον συζητήσαμε το Aesop Story Engine, η δυνατότητα εισαγωγής του parallax και όλες οι δυνατότητές του είναι στο Build Interactive Longform Storytelling Contents στο WordPress ebook, έτσι για το σκοπό αυτού του άρθρου, ας δούμε ένα διαφορετικό plugin ως παράδειγμα.

Στο Parallax Scroll, για παράδειγμα, μπορείτε να δημιουργήσετε μια νέα παράλλαξη παρόμοια με τη δημιουργία μιας νέας ανάρτησης. Η διεπαφή επεξεργασίας φαίνεται επίσης παρόμοια. Για να προσθέσετε την εικόνα φόντου παράλλαξης, χρησιμοποιήστε την επιλογή "Ορισμός εμφανιζόμενης εικόνας". Το περιεχόμενο τίτλου και μετά δημοσιεύεται προαιρετικά.

Υπάρχουν πολλές επιλογές που μπορείτε να τικνίσετε με κάτω από το πλαίσιο περιεχομένου, αλλά είναι επίσης προαιρετικές.

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

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

Ένα μικρό κόλπο για να προσθέσετε στο οπλοστάσιό σας: κανείς δεν είπε ότι δεν μπορείτε να συνδυάσετε το θέμα και το plugin. Η χρήση περισσότερων από ένα plugin είναι επίσης νόμιμη. Θα μπορούσατε, για παράδειγμα, να χρησιμοποιήσετε το Twenty Seventeen για το θέμα σας και να εγκαταστήσετε το Aesop Story Engine μαζί με το Parallax Scroll ως το πρόσθετο spicing στη διαδικτυακή σας συνταγή.

Τώρα μπορείτε να πάτε σε ένα ταξίδι parallax και wow τους επισκέπτες σας κατά μήκος του τρόπου.