Πώς να δημιουργήσετε μια στρωματοποιημένη παράλλαξη επίδραση στον ιστότοπό σας

Sep 14, 2025

πως να

(Credit Image: www.beargryls.com)

Parallax Motion, η έννοια των κινούμενων στρωμάτων σε διαφορετικές ταχύτητες, έχει χρησιμοποιηθεί για χρόνια σε κινούμενα σχέδια. Η επίσημη ιστοσελίδα της Bear Grylls (ένα από τα αγαπημένα μας Παραλαβή ιστοσελίδων κύλισης ), παίρνει το αποτέλεσμα σε νέες και ενδιαφέρουσες κατευθύνσεις. Τα βουνά του φόντου κλιμακώνονται στη θέση τους, ενώ ξεθωριάζει έτσι ώστε να γίνουν πλήρως αδιαφανές, και στο βάθος της σελίδας, το κείμενο «περιπέτεια» ανεβαίνει στη θέση τους πίσω από τα βουνά καθώς στεγάζει.

Για πιο εμπνευσμένα αποτελέσματα κίνησης, ελέγξτε τον οδηγό μας για το καλύτερο CSS κινούμενα σχέδια και πώς να τους κωδικοποιήσετε .

Η σχεδίαση της ιστοσελίδας Bear Grylls είναι το έργο της Οργανισμού Δημιουργικού Μάρκετινγκ του Ηνωμένου Βασιλείου Προφυλακή , και με ένα κοινό-στόχο που κυμαίνεται από 16 έως 55 ετών, και πάνω από 7 εκατομμύρια οπαδούς παγκοσμίως, είχαν ένα σοβαρό έργο στα χέρια τους.

"Το κύριο χαρακτηριστικό της ιστοσελίδας ήταν η αρχική σελίδα, θέλαμε τους επισκέπτες να πηδούν κυριολεκτικά στην οθόνη και να ενταχθούν στην αρκούδα στις περιπέτειές του", εξηγεί ο συνιδρυτής Chris Wilcock και δημιουργικός σκηνοθέτης Dan Williams. "Για να επιτευχθεί αυτό, χρησιμοποιήσαμε μερικές έξυπνες μεταβάσεις, σε συνδυασμό με τα επεξεργασμένα βίντεο, τις δραματικές εικόνες και τη συνολική γλώσσα στην περιοχή."

Δείτε τον ιστότοπο σε δράση στο www.beargryls.com . Σε αυτό το άρθρο, θα εξηγήσουμε πώς να αναδημιουργήσουμε την επίδραση στους δικούς σας ιστότοπους. Ξεκινήστε από Λήψη των αρχείων φροντιστηρίων .

01. Δημιουργήστε το αποτέλεσμα κλιμάκωσης

Η δομή που επιτρέπεται σε όλη την περιεκτικότητα σε κινούμενα ζώα να λειτουργήσει είναι σχετικά απλή. Ένα περιτύλιγμα κρατά τα πάντα και κρύβει οποιοδήποτε περιεχόμενο υπερχείλισης. Στη συνέχεια, υπάρχουν ουσιαστικά τρία στρώματα των Div Tags πάνω από την κορυφή.

 & lt; div class = "wrapper" & gt;
& lt; div class = "pos text" & gt; / div & gt;
& lt; div class = "pos mountain1" & gt; / div & gt;
& lt; div class = "pos mountain2" & gt; / div & gt;
& lt; / div & gt;

02. Ξεκινήστε το CSS

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

 Σώμα {
Περιθώριο: 0;
Padding: 0;
Ύψος: 100%.
Ιστορικό: URL (img / bg.jpg)
κέντρο κέντρο;
Ιστορικό μέγεθος: κάλυψη;
}
.Wrapper {
Πλάτος: 100VW;
Ύψος: 100VH;
Θέση: συγγενής.
Overflow: Κρυμμένο?
}

03. Τοποθετήστε κάθε στρώμα

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

. {
Θέση: Απόλυτη.
Κορυφή: 0;
Αριστερά: 0;
Πλάτος: 100VW;
Ύψος: 100VH;
}

04. Προσθέστε το κείμενο

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

 .Text {
Ιστορικό: URL (img / text.png)
κέντρο κέντρο;
Ιστορικό μέγεθος: κάλυψη;
Μετασχηματισμός: Translate3d (0, 30px, 0).
αδιαφάνεια: 0;
Κινούμενα σχέδια: Μετακίνηση 1.8s Ευκολία.
Κινούμενα σχέδια-πλήρωση: Προώθηση.
}

05. Ζωντανός το πρώτο βουνό

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

 .muntain1 {
Ιστορικό: URL (img / mountain1.png)
κέντρο κέντρο;
Ιστορικό μέγεθος: κάλυψη;
Μετασχηματισμός: Scale3D (1.1, 1.1, 1.1).
αδιαφάνεια: 0,2;
Animation: Scaler 1s Ευκολία.
Κινούμενα σχέδια-πλήρωση: Προώθηση.
}

06. Εισάγει το βουνό του προσκήνιο

Το βουνό για το προσκήνιο είναι σχεδόν πανομοιότυπο με το άλλο βουνό - απλά κάνει πολύ περισσότερο από μια κλίμακα στη θέση του. Και τα δύο βουνά μοιράζονται τα κλειδιά "Scaler" για το κινούμενο σχέδιο τους.

 .Mount2 {
Ιστορικό: URL (img / mountain2.png)
κέντρο κέντρο;
Ιστορικό μέγεθος: κάλυψη;
Μετασχηματισμός: Scale3D (1.3, 1.3, 1.3).
αδιαφάνεια: 0,1;
Κινούμενα σχέδια: Scaler 1.2s Ευκολία.
Κινούμενα σχέδια-πλήρωση: Προώθηση.
}

07. Προσθέστε animation keyframe

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

 @keyframes moveup {
100% {
Μετασχηματισμός: Translate3D (0, 0, 0);
αδιαφάνεια: 1;
}
}

@keyframes scaler {
100% {
Μετασχηματισμός: Κλίμακα3D (1, 1, 1).
αδιαφάνεια: 1;
}
}

generate CSS — Πάρτε ένα εισιτήριο για να δημιουργήσετε το CSS τώρα για μια μεγάλη έκπτωση (Πιστωτική πίστωση: μέλλον)

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 289 του Σχεδιαστής ιστοσελίδων - Πωλείται τώρα . Εγγραφείτε εδώ .

Διαβάστε περισσότερα:

Πώς να προσθέσετε κινούμενα σχέδια στο SVG με το CSS
Dos και don'ts για ευχάριστα κινούμενα σχέδια ιστού
Πώς να σχεδιάσετε με τα σχήματα CSS: Εισαγωγή

Πώς να δημιουργήσετε μια στρωματοποιημένη παράλλαξη επίδραση στον ιστότοπό σας

01. Δημιουργήστε το αποτέλεσμα κλιμάκωσης

02. Ξεκινήστε το CSS

03. Τοποθετήστε κάθε στρώμα

04. Προσθέστε το κείμενο

05. Ζωντανός το πρώτο βουνό

06. Εισάγει το βουνό του προσκήνιο

07. Προσθέστε animation keyframe

πως να - Τα πιο δημοφιλή άρθρα

Ένας οδηγός για το όραμα σύννεφο της Google

Βήμα-βήμα: Πώς να μιμείται το χρώμα πετρελαίου στο ζωγράφο Corel

Εισαγωγή στις προσαρμοσμένες ιδιότητες CSS

5 Συμβουλές για Super-Fast CSS

Σχεδιάστε ένα σχήμα σε κάτω από πέντε λεπτά

Πώς να δημιουργήσετε χαρακτήρες γείτονα καρτούν

Δημιουργήστε τέλεια μηνύματα σε όλους τους πελάτες ηλεκτρονικού ταχυδρομείου

Εισαγωγή στη δοκιμασία χρηστικότητας

Κατηγορίες