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

Sep 14, 2025

πως να

(Image Credit: Renaud Rohlinger)

Οι ιστότοποι με την παράλληλη κύλιση συνεχίζουν να είναι δημοφιλείς για κάποιο λόγο: δημιουργούν μια ευχάριστη και εμπλοκή εμπειρία περιήγησης για τον χρήστη. Έχουμε ήδη εξετάσει την καλύτερη εκπληκτική Παράλληλα κύλιση Ιστοσελίδες για να σας εμπνεύσει, αλλά τι κάνετε αν θέλετε να κάνετε ένα δικό σας;

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

Θα μπορούσατε επίσης να δοκιμάσετε ένα από αυτά Οικοδόμοι ιστοτόπων , και ενώ εξετάζετε την απόδοση του ιστότοπού σας, ελέγξτε το δικό σας web hosting Η υπηρεσία εργάζεται για εσάς. Πήρε ένα βαρύ site; Δημιουργία αντιγράφων ασφαλείας με αξιόπιστη αποθήκευση σύννεφων .

01. Καθορίστε το πλαίσιο εγγράφων HTML

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

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; parallax φόντο & lt; / τίτλος & gt;
& lt; link rel = "styleshet" type = "κείμενο / css"
href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
   *** Βήμα 2 εδώ
& lt; / Body & GT;
& lt; / html & gt;

02. Προσδιορίστε το περιεχόμενο HTML

Το περιεχόμενο του σώματος αποτελείται από το κείμενο εμφάνισης και ένα div δοχείο χρησιμοποιώντας το δεδομένα-parallax Χαρακτηριστικό. Είναι αυτό το στοιχείο εμπορευματοκιβωτίων που θα χρησιμοποιηθεί για το φόντο παράλλαξης, με κάθε ένα από τα στοιχεία του παιδιού του να είναι στυλ με τις απαιτούμενες εικόνες φόντου. Σε αυτό το παράδειγμα, το δοχείο διαθέτει τρία στρώματα εικόνας που θα δημιουργηθούν από τα στοιχεία του παιδιού.

 & lt; h1 & gt; hello! & Lt; / h1 & gt;
& lt; div data-parallax & gt;
   & lt; div & gt; / div & gt;
   & lt; div & gt; / div & gt;
   & lt; div & gt; / div & gt;
& lt; / div & gt;

03. Δημιουργήστε ένα δοχείο CSS Parallax

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

 html, σώμα {
   Χρώμα: #FFF;
}
[Δεδομένα-Parallax] {
   Θέση: Σταθερή.
   Πλάτος: 100VW;
   Ύψος: 100VH;
   Κορυφή: 0;
   Αριστερά: 0;
   Z-Index: -1;
   Ιστορικό-Χρώμα: # 000;
}

04. Ρυθμίστε τα στρώματα Parallax CSS

Κάθε μία από τις στιβάδες εικόνων έχει οριστεί για να χρησιμοποιεί απόλυτη τοποθέτηση με μέγεθος για να ταιριάζει με το παράθυρο του προγράμματος περιήγησης. Η εικόνα παράλλαξης σε αυτό το παράδειγμα θα βασίζεται σε ένα συγκεκριμένο μέγεθος μεγέθους που έχει ρυθμιστεί ώστε να επαναλαμβάνεται. Μπορείτε να επιλέξετε να επαναλάβετε μόνο την εικόνα κάθετα χρησιμοποιώντας επαναλήψεις-y ή να χρησιμοποιήσετε οριζόντια τη χρήση επαναλήψεων x.

 [Data-Parallax] & GT; * {
   Θέση: Απόλυτη.
   Πλάτος: 100VW;
   Ύψος: 100VH;
   Ιστορικό-Επαναλάβετε: Επαναλάβετε?
   Μέγεθος 20VW 20VW;
}

05. Χρησιμοποιήστε τα στρώματα φόντου CSS

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

 [Data-Parallax] & GT; *: nth-παιδί (1) {
   εικόνα φόντου:
      γραμμική κλίση (δεξιά, # 333 1px,
  διαφανές 1px),
      Γραμμική κλίση (προς τα κάτω, # 333 1px,
  διαφανές 1px);
}
[Δεδομένα-Parallax] & GT; *: nth-παιδί (2) {
   εικόνα φόντου:
      Γραμμική κλίση (δεξιά, # 777 1px,
διαφανές 1px),
      Γραμμική κλίση (προς τα κάτω, # 777 1px,
διαφανές 1px).
}
[Δεδομένα-Parallax] & GT; *: nth-παιδί (3) {
   εικόνα φόντου
      γραμμική κλίση (δεξιά, #fff,
διαφανές 1px),
      γραμμική κλίση (προς τα κάτω, #fff 1px,
 διαφανές 1px);
}

06. Εκτελέστε την έναρξη στρώματος Javascript

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

 window.addeventListener ("φορτίο", λειτουργία () {
   VAR Container = Έγγραφο.
Queryselector ("[Data-Parallax]");
   var childnodes = εμπορευματοκιβώτιο.
   για (var n = 0, n & lt; lightnodes.length, n ++) {
      Παιδότοποι [n] .Setattribute ("δείκτης δεδομένων", N + 1).
   }
   **** Βήμα 7 εδώ
}) ·

07. Υπολογίστε την κίνηση του ποντικιού Javascript

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

 Container.addeventListener ("mousemove",
 λειτουργία (e) {
   var elms = αυτά τα παιδιά?
   για (var c = 0, c & lt; elms.length, C ++) {
      VAR MOTION = PARSSENT (ELMS [C].
getAttribute ("δείκτης δεδομένων")) / 10;
      var x = ((e.clientx) * κίνηση) + "px".
      var y = ((e.Clienty) * κίνηση) + "px"; Elms [c] .Style.Backgosition = x +
"" + y;
   }
}) ·

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 290 τώρα.

Σχετικά Άρθρα:

10 καλύτερα πλαίσια CSS το 2019
Πώς να προσθέσετε κινούμενα σχέδια στο SVG με το CSS
52 Εργαλεία σχεδίασης ιστοσελίδων για να σας βοηθήσουν να εργαστείτε πιο έξυπνα το 2019

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

01. Καθορίστε το πλαίσιο εγγράφων HTML

02. Προσδιορίστε το περιεχόμενο HTML

03. Δημιουργήστε ένα δοχείο CSS Parallax

04. Ρυθμίστε τα στρώματα Parallax CSS

05. Χρησιμοποιήστε τα στρώματα φόντου CSS

06. Εκτελέστε την έναρξη στρώματος Javascript

07. Υπολογίστε την κίνηση του ποντικιού Javascript

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

Πώς να επιταχύνετε και να βελτιστοποιήσετε τις ιστοσελίδες του Wordpress

Πώς να χρησιμοποιήσετε την αντιδράσει την άνοιξη για να ζωντανέψει συστατικά

Πώς να χρησιμοποιήσετε υφές στο Photoshop

Δημιουργήστε σύννεφα με Fumefx για το 3DS Max

Δημιουργήστε μια εικόνα πολλαπλών έκθεσης με το Adobe CC

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

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

Δημιουργήστε έναν χαρακτήρα με στυλιζαρισμένο ρεαλισμό

Κατηγορίες