Fixed Background Video στο WordPress: Η custom λύση που δημιουργήσαμε για το dodoanddo.com

Όταν ξεκινήσαμε να σχεδιάζουμε τη νέα ιστοσελίδα του dodoanddo.com, υπήρχε μια πολύ συγκεκριμένη δημιουργική απαίτηση: Τα videos να παραμένουν σταθερά στο background, ενώ το περιεχόμενο της σελίδας θα κινείται μπροστά τους κατά το scrolling.

Όχι ένα απλό video background. Όχι ένα συνηθισμένο parallax effect. Αυτό που θέλαμε ήταν κάθε section να λειτουργεί σαν ένα παράθυρο, μέσα από το οποίο ο επισκέπτης θα βλέπει ένα video που παραμένει σταθερό στην οθόνη.

Στην πράξη, όμως, το συγκεκριμένο fixed background video effect στο WordPress δεν υπήρχε έτοιμο στις επιλογές του Breakdance Builder. Το ίδιο ισχύει και για τους περισσότερους δημοφιλείς WordPress editors, όπως το Elementor. Έτσι, αντί να περιορίσουμε το design σε ό,τι μπορούσε να κάνει ο page builder, δημιουργήσαμε μια δική μας custom λύση με PHP, JavaScript και CSS.

Η ιδέα πίσω από το effect

Στα περισσότερα websites, ένα background video βρίσκεται μέσα σε ένα section και μετακινείται μαζί του. Καθώς ο χρήστης κάνει scroll, το section ανεβαίνει και το video ακολουθεί κανονικά την κίνησή του.

Στο dodoanddo.com θέλαμε να συμβαίνει κάτι διαφορετικό.

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

Γιατί δεν μπορούσαμε να το κάνουμε μόνο μέσα από το Breakdance

Το Breakdance διαθέτει κανονικά επιλογές για background videos, autoplay, mute, loop, overlays και κάλυψη ολόκληρου του section.

Αυτές οι δυνατότητες είναι αρκετές για ένα κλασικό hero video ή ένα συμβατικό video section. Δεν μπορούσαν, όμως, να δημιουργήσουν το fixed video effect που χρειαζόμασταν. Το background-attachment: fixed, που συχνά χρησιμοποιείται για σταθερές εικόνες, δεν εφαρμόζεται με τον ίδιο τρόπο σε πραγματικά HTML video elements.

Παράλληλα, η απλή χρήση του position: fixed δημιουργεί νέα προβλήματα. Το video παύει να ακολουθεί τα όρια του section και μπορεί να εμφανίζεται σε ολόκληρη τη σελίδα, να καλύπτει το περιεχόμενο ή να επικαλύπτει άλλα sections. Επομένως, δεν αρκούσε να κάνουμε απλώς το video fixed.

Έπρεπε να δημιουργήσουμε έναν μηχανισμό που να γνωρίζει συνεχώς:

• πού βρίσκεται το section μέσα στην οθόνη,
• ποιο μέρος του video πρέπει να είναι ορατό,
• πότε το video βρίσκεται εκτός viewport,
• ποια στοιχεία πρέπει να εμφανίζονται μπροστά του,
• και πώς πρέπει να συμπεριφέρεται σε διαφορετικές συσκευές.

Η custom WordPress λύση που δημιουργήσαμε

Η λογική που αναπτύξαμε εντοπίζει αυτόματα τα background videos των κατάλληλων sections στο frontend της ιστοσελίδας.

Το video τοποθετείται σταθερά σε σχέση με το viewport, ενώ η JavaScript υπολογίζει σε πραγματικό χρόνο το ακριβές σημείο στο οποίο βρίσκεται το αντίστοιχο section. Στη συνέχεια, το video περιορίζεται οπτικά ώστε να εμφανίζεται μόνο μέσα στα όρια αυτού του section. Με απλά λόγια, το video παραμένει σταθερό στην οθόνη, αλλά ο επισκέπτης το βλέπει μόνο μέσα από το «παράθυρο» που δημιουργεί κάθε section.

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

Το δύσκολο σημείο: ομαλό scroll χωρίς jitter

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

Το δύσκολο είναι να παραμένει ομαλό. Κατά το scrolling, η θέση του section αλλάζει συνεχώς. Αν οι υπολογισμοί και οι αλλαγές στην εμφάνιση του video γίνονται με λάθος τρόπο, το αποτέλεσμα μπορεί να παρουσιάζει jitter, μικρές καθυστερήσεις ή απότομα κοψίματα. Για να το αποφύγουμε, συγχρονίσαμε τις ενημερώσεις με τον κύκλο rendering του browser.

Αντί να εκτελείται η ίδια διαδικασία πολλές φορές για κάθε μικρή κίνηση του scroll, οι αλλαγές συγκεντρώνονται και εφαρμόζονται στο επόμενο διαθέσιμο frame. Αυτό βοήθησε ώστε το fixed background video να παραμένει σταθερό και η κίνηση του περιεχομένου να είναι όσο το δυνατόν πιο ομαλή.

Παράλληλα, όταν ένα video βρίσκεται εκτός του ορατού μέρους της σελίδας, αποκρύπτεται προσωρινά. Έτσι, ο browser δεν χρειάζεται να επεξεργάζεται συνεχώς κάτι που ο επισκέπτης δεν βλέπει.

Η σειρά των στοιχείων έπρεπε να παραμείνει σωστή

Ένα video background σχεδόν ποτέ δεν βρίσκεται μόνο του μέσα σε ένα section.

Συνήθως υπάρχουν από πάνω:

→ χρωματικά overlays,
→ gradients,
→ τίτλοι,
→ κείμενα,
→ κουμπιά,
→ φωτογραφίες,
→ λογότυπα,
→ και άλλα γραφικά στοιχεία.

Κατά τη μετατροπή του video σε fixed element, έπρεπε να διασφαλίσουμε ότι όλα αυτά τα στοιχεία θα συνέχιζαν να εμφανίζονται στη σωστή σειρά.

Το video έπρεπε να βρίσκεται χαμηλότερα από όλα τα υπόλοιπα στοιχεία. Το overlay έπρεπε να παραμένει πάνω από το video, ενώ το βασικό περιεχόμενο έπρεπε να εμφανίζεται πάνω από το overlay. Αν αυτή η σειρά δεν ελεγχθεί σωστά, ένα video μπορεί εύκολα να καλύψει κείμενα ή κουμπιά και να κάνει ολόκληρο το section μη λειτουργικό. Για αυτό δημιουργήσαμε συγκεκριμένη λογική επιπέδων, προσαρμοσμένη στη δομή που χρησιμοποιεί το Breakdance.

Η μεγαλύτερη πρόκληση ήταν στα κινητά

Στο desktop, ένα fixed video background είναι σχετικά προβλέψιμο. Στα smartphones, τα πράγματα είναι πιο περίπλοκα. Η address bar του mobile browser εμφανίζεται και εξαφανίζεται καθώς ο χρήστης κάνει scroll. Αυτό αλλάζει συνεχώς το πραγματικό διαθέσιμο ύψος της οθόνης.

Σε μια πρόχειρη υλοποίηση, αυτή η συμπεριφορά μπορεί να δημιουργήσει:

• κενό στο κάτω μέρος του video,
• απότομες αλλαγές στο μέγεθος,
• λάθος cropping,
• μετακινήσεις κατά το scrolling,
• ή διαφορετικό αποτέλεσμα ανά browser.

Στη δική μας λύση λάβαμε υπόψη το πραγματικό ύψος του mobile viewport, ώστε το video να συνεχίζει να καλύπτει ολόκληρη την οθόνη ακόμη και όταν εμφανίζονται ή κρύβονται τα controls του browser. Προσθέσαμε επίσης χειρισμό για την αλλαγή προσανατολισμού της συσκευής. Όταν ο χρήστης γυρίσει το κινητό από portrait σε landscape ή το αντίστροφο, η θέση και τα όρια του video υπολογίζονται ξανά.

Δεν έπρεπε όλα τα videos να λειτουργούν με τον ίδιο τρόπο

Παρόλο που θέλαμε η λειτουργία να εφαρμόζεται αυτόματα, χρειαζόμασταν και τη δυνατότητα να εξαιρούμε συγκεκριμένα videos. Σε μια ιστοσελίδα μπορεί να υπάρχουν videos που λειτουργούν ως απλό περιεχόμενο ή ως κανονικό background χωρίς fixed συμπεριφορά. Για αυτό δημιουργήσαμε έναν απλό τρόπο εξαίρεσης. Όταν ένα video διαθέτει τη συγκεκριμένη κλάση που έχουμε ορίσει, ο μηχανισμός το αγνοεί και το αφήνει να λειτουργήσει κανονικά.

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

Τι γίνεται με τους χρήστες που έχουν ενεργοποιήσει reduced motion

Τα κινούμενα backgrounds μπορούν να δημιουργήσουν μια πολύ δυνατή οπτική εμπειρία, αλλά δεν είναι κατάλληλα για όλους τους επισκέπτες. Ορισμένοι χρήστες έχουν ενεργοποιημένη στη συσκευή τους τη ρύθμιση prefers-reduced-motion, ώστε να περιορίζονται τα animations και οι έντονες κινήσεις. Η custom υλοποίησή μας αναγνωρίζει αυτή την προτίμηση.

Σε αυτή την περίπτωση, το video δεν χρησιμοποιεί τη fixed συμπεριφορά και επιστρέφει σε μια πιο συμβατική παρουσίαση μέσα στο section. Για εμάς ήταν σημαντικό το visual effect να μη λειτουργεί εις βάρος της προσβασιμότητας και της άνεσης του χρήστη.

Ένα effect που δημιουργήθηκε για το design και όχι το αντίστροφο

Το σημαντικότερο στοιχείο αυτής της υλοποίησης δεν είναι μόνο ότι καταφέραμε να κάνουμε ένα background video να παραμένει σταθερό.

Είναι ότι η τεχνική λύση δημιουργήθηκε για να υποστηρίξει το ίδιο το design του project. Δεν επιλέξαμε ένα έτοιμο animation και στη συνέχεια προσαρμόσαμε την ιστοσελίδα γύρω από αυτό.

Ξεκινήσαμε από το αποτέλεσμα που θέλαμε να βλέπει ο επισκέπτης και στη συνέχεια δημιουργήσαμε τον μηχανισμό που χρειαζόταν για να λειτουργήσει σωστά. Στο νέο dodoanddo.com, τα fixed background videos δίνουν μεγαλύτερο βάθος στη σελίδα, συνδέουν οπτικά τα διαφορετικά sections και δημιουργούν μια πιο κινηματογραφική εμπειρία περιήγησης.

Ευχαριστούμε την ομάδα του Do Do & Do για την εμπιστοσύνη και τη δημιουργική συνεργασία σε ένα project που μας επέτρεψε να συνδυάσουμε design, video και custom WordPress development.

Όταν οι δυνατότητες του page builder δεν είναι αρκετές

Οι σύγχρονοι WordPress builders, όπως το Breakdance και το Elementor, προσφέρουν πολλές δυνατότητες και επιταχύνουν σημαντικά την κατασκευή μιας ιστοσελίδας. Υπάρχουν, όμως, περιπτώσεις όπου ένα δημιουργικό concept ξεπερνά τις έτοιμες επιλογές τους. Εκεί χρειάζεται custom ανάπτυξη. Στην Advision χρησιμοποιούμε τα διαθέσιμα εργαλεία εκεί όπου εξυπηρετούν το project, αλλά δεν περιορίζουμε το τελικό αποτέλεσμα σε όσα προσφέρει ένα έτοιμο interface. Όταν χρειάζεται, σχεδιάζουμε custom PHP, JavaScript και CSS λειτουργίες που λαμβάνουν υπόψη:

→ τη δομή της ιστοσελίδας,
→ την εμπειρία χρήστη,
→ την ταχύτητα,
→ τη λειτουργία σε mobile συσκευές,
→ την προσβασιμότητα,
→ και τη μελλοντική διαχείριση του website.

Η συγκεκριμένη λειτουργία αποτελεί custom λύση της Advision, η οποία σχεδιάστηκε και αναπτύχθηκε για τις ανάγκες του συγκεκριμένου project. Ο πηγαίος κώδικας και οι αναλυτικές οδηγίες ενσωμάτωσης δεν διατίθενται μέσω του άρθρου.

Αν σχεδιάζετε μια ιστοσελίδα με ιδιαίτερες απαιτήσεις σε video backgrounds, animations, motion effects ή custom λειτουργίες, μπορείτε να επικοινωνήσετε με την ομάδα της Advision για μια λύση προσαρμοσμένη στο δικό σας project.

Μπορείτε να δείτε την ιστοσελίδα στο www.dodoanddo.com