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

Sep 12, 2025

πως να

Παράλληλα κύλιση δεν είναι πλέον η εγγυημένη προσοχή-grabber που ήταν, αλλά υπάρχουν και άλλοι τρόποι χρήσης τεχνικών Parallax για να εμπλέξετε τους επισκέπτες σας και να ενισχύσετε το δικό σας εμπειρία χρήστη .

Ρίξε μια ματιά στο Ο ιστότοπος του κ. Fisk , σχεδιασμένο από Bmo , και θα παρατηρήσετε ένα διαφορετικό είδος παράλλαξης που συμβαίνει: η έντονα χρωματισμένη κύρια εικόνα κινείται σε 3D, σε απάντηση στις κινήσεις του ποντικιού σας.

5 συμβουλές για εξαιρετικά γρήγορη CSS

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

Δημιουργήστε τη δική σας εντυπωσιακή ιστοσελίδα με το τέλειο web hosting υπηρεσία και οικοδόμος ιστότοπου εργαλείο. Και, κατά μήκος του δρόμου, αποθηκεύστε τα αρχεία σχεδιασμού σας στο καλύτερο αποθήκευση σύννεφων .

01. Ξεκινήστε το HTML

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

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt · κύλιση ποντικιού & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / 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. Στοιχεία περιεχομένου

Η τεχνική θα επιτρέψει σε οποιοδήποτε δοχείο περιεχομένου χρησιμοποιώντας το χαρακτηριστικό δεδομένων Parallax για να εμφανιστεί το αποτέλεσμα. Κάθε στοιχείο παιδιού πρώτου επιπέδου θα εμφανιστεί με την παρουσίαση παράλλαξης. Αυτό το παράδειγμα ορίζει τρία παιδιά στρώματα για την παράλλαξη, αλλά μπορείτε να προσθέσετε περισσότερα αν θέλετε. Μπορείτε επίσης να προσθέσετε περιεχόμενο σε αυτά τα στρώματα, όπως κείμενο ή εικόνες. Png ή svg με διαφάνεια θα λειτουργήσει καλύτερα.

 & lt; άρθρο δεδομένων-parallax & gt;
  & lt; div & gt; / div & gt;
  & lt; div & gt; / div & gt;
  & lt; div & gt; / div & gt;
& lt; / άρθρο & gt;

03. Στυλ συσκευασίας παράλλαξης

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Styles.css'. Το πρώτο σύνολο κανόνων σε αυτό το αρχείο ρυθμίζει το προεπιλεγμένο μέγεθος του περιέκτη παράλλαξης και τη λειτουργία θέσης του. Είναι σημαντικό να χρησιμοποιήσετε σχετική τοποθέτηση έτσι ώστε τα στοιχεία των παιδιών να μπορούν να τοποθετηθούν σε σχέση με όπου και αν βρίσκεται το δοχείο. Το πλάτος και το ύψος ρυθμίζονται για να καλύψουν την πλήρη οθόνη για να επιτρέψει τη μέγιστη διαδραστικότητα.

 [Data-Parallax] {
  Θέση: συγγενής.
  Πλάτος: 100VW;
  Ύψος: 100VH;
}

04. Παρναξία Παιδιά

Κάθε ένα από τα στοιχεία πρώτου επιπέδου στο εσωτερικό του δοχείου Parallax δεδομένων έχει μέγεθος και τοποθετείται ώστε να εμφανίζεται κεντρικά. Μαζί με τη σχετική τοποθέτηση των γονέων, το ποσοστό χρησιμοποιείται ως μονάδα μέτρησης, επιτρέποντας την τοποθέτηση του μεγέθους και της τοποθέτησης σε σχέση με το δοχείο παράλλαξης. Για αυτό το παράδειγμα, χρησιμοποιείται ένα διαφανές κόκκινο φόντο για να αποδείξει το αποτέλεσμα - μπορείτε να αντικαταστήσετε αυτό με PNG ή SVG εικόνα της επιλογής σας χρησιμοποιώντας @Background: URL ("Η εικόνα σας εδώ").

 [Data-Parallax] & GT; * {
  Θέση: Απόλυτη.
  Πλάτος: 50%.
  Ύψος: 50%.
  Αριστερά: 25%.
  Κορυφή: 25%.
  σύνορα: 1px στερεό # 000;
  Ιστορικό: RGBA (255,0,0, .25)
}

05. Ξεκινήστε το JavaScript

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Code.js'. Το Javascript θα χρησιμοποιηθεί για τον έλεγχο των απαντήσεων στις αλληλεπιδράσεις του ποντικιού του χρήστη. Δεν θέλουμε το JavaScript να τρέξει οποιοδήποτε κωδικό JavaScript έως ότου η σελίδα έχει φορτωθεί πλήρως, εξ ου και ο κώδικας για τα βήματα 06 και 07 που τοποθετεί μια λειτουργία που ενεργοποιείται από το συμβάν φορτίου, το οποίο ενεργοποιεί όταν το παράθυρο έχει ολοκληρώσει τη φόρτωση.

 window.addeventListener ("φορτίο", λειτουργία () {
  *** Βήμα 6 εδώ
}) ·

06. Αναζήτηση κόμβων

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

 Ar Nodes = Document.QuerySelectorAll ("[Data-Parallax]");
για (var i = 0, i & lt; nodes.length, i ++) {
  var παιδιά = κόμβοι [i].
  για (var n = 0, n & lt, παιδιά.length, n ++) {
  Παιδιά [n] .SetAtttribute ("δείκτης δεδομένων", N + 2).
  }
  *** Βήμα 7 εδώ
}

07. Parallax ακροατές

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

 Κόμβοι [i] .addeventListener ("mousemove", λειτουργία (e) {
  var elms = αυτά τα παιδιά?
  για (var c = 0, c & lt; elms.length, C ++) {
  var divisor = parseint (Elms [c] .getattribute ("δείκτης δεδομένων"));
  var startx = this.offsetwidth / 4;
  var standy = this.offsetheight / 8;
  Elms [c] .Style.Left = startx - (((e.screenx / divisor) -e.Clientx) / 3) + "px".
  ELMS [C] .STYLE.TOP = Starty - ((E.Screeny / Divisor) -e.Clienty) / 3) + "PX".
  }
}) ·

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 272 του δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 272 εδώ ή Εγγραφείτε στο Web Designer εδώ .

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

Animate SVG με JavaScript
Δημιουργήστε υγρά αποτελέσματα με webgl
10 τρόποι αποφύγετε τα θέματα συμβατότητας του προγράμματος περιήγησης

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

01. Ξεκινήστε το HTML

02. Στοιχεία περιεχομένου

03. Στυλ συσκευασίας παράλλαξης

04. Παρναξία Παιδιά

05. Ξεκινήστε το JavaScript

06. Αναζήτηση κόμβων

07. Parallax ακροατές

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

Master The Brush Mixer στο Photoshop

Σχεδιαστής συγγένειας: Πώς να χρησιμοποιήσετε περιορισμούς

Δημιουργία ειδικών τελειωμάτων εκτύπωσης στο InDesign

Δημιουργήστε ένα μενού ολίσθησης

Κατανόηση της ιδιοκτησίας οθόνης CSS

Πώς να επηρεάσετε την κατάταξη της Google με το περιεχόμενό σας

Βάλτε ένα γούνινο πορτρέτο κατοικίδιων ζώων

Κάντε μια αφίσα από ένα πρότυπο στο Photoshop

Κατηγορίες