4 σύγχρονα τεχνάσματα για να δοκιμάσετε
Φαίνεται ότι, ως συστατικό ενός σχεδίου, τα υπόβαθρα ζουν στις σκιές. Ωστόσο, αυτό δεν είναι απολύτως αληθές. Σε περιόδους κατά τις οποίες η CSS άρχισε να κάνει τα πρώτα της βήματα προς την παγκόσμια κατάκτηση, το υπόβαθρο είχε ήδη αναλάβει το ρόλο του κύριου διακοσμητικού στοιχείου της ιστοσελίδας.
Σήμερα η κατάσταση δεν έχει αλλάξει δραστικά. Στις περισσότερες περιπτώσεις, χρησιμεύει ως κύρια οπτική κινητήρια δύναμη που συμβάλλει σημαντικά στο γενικό θέμα.
Παραδοσιακά, οι φωτογραφίες και τα βίντεο είναι οι πρώτες επιλογές για ένα σκηνικό. Το γεγονός είναι ότι είναι απλώς υπερπληθυσμένα τμήματα ήρωας: κάθε άλλη ιστοσελίδα χαιρετίζει το online κοινό με φόντο είτε με βάση την εικόνα είτε με ταινία. Και αυτό κάνει τον Ιστό (και τη διεπαφή σας ιδιαίτερα) αρκετά παρόμοιο με αποτέλεσμα την αναμενόμενη εμπειρία του χρήστη.
Μια διέξοδος είναι η εξεύρεση νέων λύσεων με την αξιοποίηση των ολοκαίνουργιων τεχνικών και το παιχνίδι με τα CSS3, HTML5 και JavaScript. Στην πραγματικότητα, υπάρχει μια εμφανής τάση να προχωρήσουμε για αυτές τις επιλογές. Υπάρχουν τουλάχιστον τέσσερα διαφορετικά σύγχρονα δυναμικά υπόβαθρα που συμμετέχουν σε διαγωνισμό για να κερδίσουν τη θέση τους στον ήλιο αυτές τις μέρες.
Ας δούμε τους:
Κινούμενα σωματίδια
Η ζωτικότητα των σωματιδίων είναι μια από τις πιο δημοφιλείς επιλογές τώρα. Τα φορτία των ιστότοπων έχουν υιοθετήσει με επιτυχία αυτήν την κομψή λύση που εμπνέεται από το σύμπαν. Λειτουργεί καλά σε συνδυασμό με απλό στερεό έγχρωμο καμβά, εικονογράφηση, σχέδια διάνυσμα, ακόμα και φωτογραφίες.
Επιπλέον, η κινούμενη εικόνα ποικίλλει. Μπορεί να είναι μια δέσμη από χαοτικά κινούμενες κουκίδες που είναι διάσπαρτες σε ολόκληρη τη σελίδα για να μιμούνται τον αστέρα του ουρανού ή τη βροχή των αστεριών, ή μια λύση με θέμα το αστερισμό, όπου μπορείτε να συνδέσετε κύκλους με λεπτές γραμμές. Και δεν είναι όλα αυτά. μερικές φορές συνδυάζεται με τα εφέ που προκαλούνται από τα γεγονότα του ποντικιού: στην περίπτωση αυτή, είστε σε θέση να οδηγήσετε τα σωματίδια μακριά, να στρέψετε από αυτά, να τα συνδέσετε με το δρομέα ως μονοπάτι κ.λπ.
Huub είναι ένα παράδειγμα της τυπικής κίνησης σωματιδίων. Διαθέτει μια τακτοποιημένη κινούμενη ομάδα κουκίδων που ταιριάζει απόλυτα με ένα σκοτεινό χρωματισμό και ένα χάρτη τοποθετημένο στην πλάτη. Χρησιμοποιήστε το δρομέα του ποντικιού για να διασκεδάσετε.
Συμβουλή: Αν θέλετε να αντιμετωπίσετε το δυναμικό φόντο της κεφαλίδας του Huub, τότε θα πρέπει να ρίξετε μια ματιά στο έργο που δημιουργήθηκε από τον Dominic Kolbe που ονομάζεται ποντίκι parallax demo . Φαίνεται σχεδόν το ίδιο. Αλλά εάν χρειάζεστε μια άμεση λύση τότε βιβλιοθήκη JavaScript από Vincent Garreau που ονομάζεται Particles.js είναι αυτό που ψάχνετε.
Κύματα σωματιδίων
Ενώ στο προηγούμενο παράδειγμα, το αποτέλεσμα μπορεί να επιτευχθεί με τους έξυπους χειρισμούς με HTML5 και CSS3 και μια πρέζα μαγικών JavaScript, αυτό είναι ένα έξυπνο πείραμα με τη βιβλιοθήκη Three.js. Με τις τοξωτές μορφές του και τις ομαλές κινήσεις που μοιάζουν με κυματισμό, θυμίζει εύκολα μία από τις μικρές παλίρροιες. Δημιουργεί μια αίσθηση αναπνευστικού καμβά. Μπορείτε να χρησιμοποιήσετε το δρομέα του ποντικιού για να το περιστρέψετε σε διαφορετικές κατευθύνσεις, εξερευνώντας το τόσο οριζόντια όσο και κατακόρυφα.
StuurMen έχει ένα απλό, εκλεπτυσμένο τμήμα καλωσορίσματος. Είναι ελάχιστο, καθαρό και εξαιρετικό. Το περιεχόμενο εισέρχεται διακριτικά στο οπτικό πεδίο ενώ το παλλόμενο φόντο δημιουργεί μια σωστή διάθεση για το έργο.
Συμβουλή: Εδώ μπορείτε να βρείτε ένα πρωτότυπο σενάριο από το ThreeJS και την επιτυχημένη προσαρμογή του από το Deathfang με ένα demo που ονομάζεται τρεις καμβάδες - σωματίδια - κύματα .
Ποντίκι αιώρησης parallax
Η στοιβαγμένη παράλλαξη είναι μια άλλη αυξανόμενη τάση. Μαζί με την κίνηση των σωματιδίων, μπορεί να μεταμορφώσει ένα θαμπό στατικό υπόβαθρο σε μια σύνθεση με μια λεπτή 3D αίσθηση. Το μεγάλο πράγμα είναι ότι δεν χρειάζεται να χαλαρώσετε την αγαπημένη σας επιλογή εικόνας, απλώς χρησιμοποιήστε την παράλλαξη για να την ελαστικοποιήσετε λίγο.
Είναι πολύ ωφέλιμο όταν χρειάζεται να ζωντανέψετε τον τίτλο, το λογότυπο, τη σουρεαλιστική σκηνή ή την εικονογράφηση. Είναι επίσης κατάλληλο για διάφορα αφηρημένα κινούμενα σχέδια. Εκκινώντας από το πρότυπο δείκτη ποντικιού, δεν προσθέτει μόνο μια άλλη διάσταση, αλλά επιτρέπει επίσης στους χρήστες να παίζουν με το περιβάλλον.
Το προσωπικό χαρτοφυλάκιο του Αλεξάντερ Ρόκε έχει μια εξαιρετική σελίδα εκκίνησης. Όχι μόνο η συμπεριφορά τραβήξει το μάτι, αλλά και το paralllax του ποντικιού κάνει τα γράμματα να αλλάζουν.
Συμβουλή: Υπάρχουν πολλές βιβλιοθήκες και βιώσιμα αποσπάσματα κώδικα για τη δημιουργία παράλλαξης. Ένα από τα πιο δημοφιλή είναι ένα plugin που ονομάζεται Matthew Wagerfield Parallax.js . Ωστόσο, αν θέλετε να το δείτε στην πράξη, ειδικά για την τυπογραφία, τότε μπορείτε να εξερευνήσετε ένα στυλό από το Frontnerd που χαρακτηρίζει τη λήψη του σε μια 3d παράλλαξη στο ποντίκι .
Τα πειράματα WebGL
Τα πειράματα WebGL είναι, φυσικά, μια παραλλαγή για εξελιγμένους σκληρούς προγραμματιστές και πελάτες με γενναιόδωρο προϋπολογισμό. Μπορούν να είναι λαμπρά, εμπνευσμένα από δέος και λίγο πομπώδη. Αξίζει κάθε δεκάρα. Ωστόσο, υπάρχει πάντα μια μύγα στην αλοιφή. Με μεγάλη δύναμη έρχεται μεγάλη ευθύνη και με το WebGL δεν πρέπει να ξεχνάτε ποτέ το ποσό των πόρων που καταναλώνει και την έλλειψη πλήρους συμβατότητας του προγράμματος περιήγησης.
Solarin είναι για μια αξέχαστη και συναρπαστική εμπειρία χρήστη. Πρόκειται για ένα πείραμα 3D WebGL που είναι πλούσιο σε πολυάριθμα συναρπαστικά και καινοτόμα χαρακτηριστικά. Το φόντο κεφαλίδας είναι μια τεράστια φουτουριστική σφαίρα που ανταποκρίνεται στον δρομέα του ποντικιού και δημιουργεί μια τεράστια εντύπωση.
Συμβουλή: Παρόλο που μιμούνται όσες μεγαλοφυΐες στο MediaMonks έχουν γίνει πολύ περίπλοκες, στο διαδίκτυο, μπορείτε πάντα να βρείτε ένα σημείο εκκίνησης που θα σας δώσει τροφή για σκέψη. Σκεψου το API WebGL , και αυτός ο κωδικός από τον Yoichi Kobayashi ο οποίος έχει καταλήξει σε ένα έργο που ονομάζεται Η σφαίρα " .
συμπέρασμα
Ενώ η αξιοποίηση των εικόνων και των βίντεο είναι ένας δοκιμασμένος και λιγότερο οδυνηρός τρόπος για την ομαλοποίηση του φόντου, εξακολουθούν να υπάρχουν και άλλες υποσχόμενες και πειραματικές επιλογές που μπορούν να επιτύχουν το επιθυμητό αποτέλεσμα. Η παραμονή μακριά από τις κοινότητες είναι δύσκολη και ακόμη και χρήσιμη, αλλά τα μέτρα αυτά είναι δικαιολογημένα και αρκετά λογικά.
Είτε πρόκειται για ένα απλό αλλά κομψό animation σωματιδίων είτε για ένα αξιοσημείωτο πείραμα WebGL, εισάγει νέα ζωή σε μια βασική λεπτομέρεια της διασύνδεσης, δίνοντας στον ιστοχώρο σας ένα ξεκίνημα.