Ο ιστότοπος DayTrip χρησιμοποιεί ένα καθαρό εφέ στην κεφαλίδα της σελίδας του που παραμορφώνει την εικόνα φόντου με μια κινούμενη, κοκκώδη υφή. Το αποτέλεσμα είναι λεπτό αλλά δημιουργεί μια σκονισμένη, ρετρό ατμόσφαιρα.
Το αποτέλεσμα είναι πολύ λεπτό. Μπορείτε να δείτε τη διαφορά όπου το εφέ βρίσκεται στη δεξιά θέση και απενεργοποιείται στα αριστερά:
Μπορούμε να δημιουργήσουμε το ίδιο ρουστίκ εφέ με μία μόνο εικόνα και λίγο CSS.
Βήμα 1: Ρύθμιση των πραγμάτων
Αρχικά, ας ρυθμίσουμε την κεφαλίδα της σελίδας μας. Θα χρησιμοποιήσουμε ένα κοινό μοτίβο όπου μια εικόνα φόντου καταλαμβάνει ολόκληρο το χώρο.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Ακολουθεί ένα παράδειγμα για να ξεκινήσετε:
Δείτε το στυλό RpLKdx από τον Geoff Graham (@geoffgraham) στο CodePen.
Βήμα 2: Επιλογή υφής
Στη συνέχεια, χρειαζόμαστε μια εικόνα με κοκκώδη υφή. Μπορείτε να το δημιουργήσετε μόνοι σας. Το Subtle Patterns έχει επίσης πολλές ωραίες επιλογές, συμπεριλαμβανομένης αυτής που θα χρησιμοποιήσουμε για το demo μας. Σημειώστε ότι η εικόνα δεν χρειάζεται να είναι τεράστια. Κάτι στη γειτονιά της 400pxπλατείας θα κάνει το κόλπο.
Η ιδέα είναι ότι θα επικαλύψουμε την κοκκώδη υφή στην κορυφή του .page-header. Μπορούμε να χρησιμοποιήσουμε το :afterψευδο-στοιχείο .page-headerέτσι ώστε να μην χρειάζεται να δημιουργήσουμε άλλο στοιχείο.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Σημειώστε ότι τοποθετήσαμε ένα heightκαι widthστο ψευδο-στοιχείο καθώς και ένα topκαι leftέτσι ώστε να υπερβαίνει στην πραγματικότητα το όριο της κεφαλίδας της σελίδας και να είναι κεντραρισμένο σε αυτό. Θέλουμε να το κάνουμε έτσι ώστε το κοκκώδες στρώμα υφής να έχει χώρο για να κινείται χωρίς να εκτίθεται το επίπεδο κεφαλίδας σελίδας από κάτω. Αυτό σημαίνει ότι τα επίπεδα είναι διατεταγμένα έτσι:
Τώρα έχουμε μια ωραία κεφαλίδα μεγάλης σελίδας με κοκκώδη εικόνα στην κορυφή:
Δείτε το Pen evGvKg από τον Geoff Graham (@geoffgraham) στο CodePen.
Βήμα 3: Κινούμενη εικόνα του Grainy Layer
Το τελευταίο πράγμα που πρέπει να κάνουμε είναι να ζωγραφίσουμε το κοκκώδες στρώμα. Αυτό είναι το αποτέλεσμα που επιδιώκουμε και δίνει στην κεφαλίδα της σελίδας την αναδρομική, αναλογική έκκληση.
Ο ιστότοπος DayTrip χρησιμοποιεί τα ακόλουθα για να καθορίσει τα βασικά καρέ κινούμενων σχεδίων:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Είναι κάπως δύσκολο να φανταστεί κανείς τι σημαίνει αυτός ο κώδικας, αλλά βασικά μετακινεί το πάνω κοκκώδες στρώμα σε ένα μοτίβο ζιγκ-ζαγκ. Ακολουθεί μια εικόνα του πώς μοιάζει σε μικρότερη κλίμακα:
Τώρα το μόνο που πρέπει να κάνουμε είναι να εφαρμόσουμε τα βασικά καρέ για .page-header:afterνα το δούμε να ισχύει. Θα ρυθμίσουμε την κινούμενη εικόνα για 8 δευτερόλεπτα και θα βρούμε απεριόριστα:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Βάζοντας τα όλα μαζί
Εδώ είναι το πλήρες απόσπασμα με όλα τα κομμάτια στη θέση τους. Σημειώστε ότι υποθέτουμε τη χρήση του Autoprefixer για όλα τα προθέματα προμηθευτών.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Δείτε το Pen Animated Grainy Effect από τον Geoff Graham (@geoffgraham) στο CodePen.