Το σύγχρονο CSS έχει επαναπροσδιορίσει την ανάπτυξη ιστού με τις ισχυρές λειτουργίες και τις εξαιρετικές δυνατότητές του. CSS είναι ένα εργαλείο γενικής χρήσης που προσφέρει εξαιρετικές επιλογές για να κάνει τις ιστοσελίδες εξαιρετικά διαδραστικές και ελκυστικές. Είτε πρόκειται για την ευελιξία στη σχεδίαση, τη γρήγορη προσαρμογή, τις εξαιρετικές επιλογές μορφοποίησης, είτε για το προηγμένο περιβάλλον εργασίας χρήστη (UI) — το CSS προσφέρει ολοκληρωμένες λύσεις για όλες τις ανάγκες ανάπτυξης και μορφοποίησης ιστού. Πάνω απ' όλα, χρησιμοποιώντας CSS και HTML, μπορείτε να προσθέσετε κινούμενα σχέδια και εφέ γράφοντας μόνο λίγες γραμμές κώδικα, κάτι που διαφορετικά θα ήταν επίπονο με τη χρήση JavaScript.
Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε στα βήματα δημιουργίας ενός εφέ κύλισης parallax με CSS στο Chrome.
Προαπαιτούμενα
Για να παρακολουθήσετε αυτό το σεμινάριο, πρέπει να έχετε μια βασική κατανόηση των HTML και CSS.
Βήμα 1: Δημιουργία νέου έργου
Ας ξεκινήσουμε με τη δημιουργία ενός νέου φακέλου έργου και αρχείων χρησιμοποιώντας τη διεπαφή γραμμής εντολών. Ανοίξτε το τερματικό σας και πληκτρολογήστε την ακόλουθη εντολή για να δημιουργήσετε έναν νέο φάκελο έργου:
|
1 |
mkdir css-parallax |
Χρησιμοποιήστε την εντολή cd για να αλλάξετε τον κατάλογο στον φάκελο css-parallax :
|
1 |
cd css-parallax |
Στη συνέχεια, δημιουργήστε ένα αρχείο HTML στον φάκελο css-parallax όπου θα τοποθετήσουμε όλους τους κώδικες HTML. Ονομάστε το αρχείο index.html και ανοίξτε το χρησιμοποιώντας την εντολή nano :
|
1 |
nano index.html |
Μόλις έχουμε έτοιμο το αρχείο index.html μας, ας προχωρήσουμε και ας δομήσουμε την ιστοσελίδα προσθέτοντας τους εισαγωγικούς κώδικες HTML .
Βήμα 2: Δομή της βασικής HTML
Σε αυτό το βήμα, θα σχεδιάσουμε την ιστοσελίδα μας προσθέτοντας τους κώδικες HTML . Προσθέστε τις ακόλουθες γραμμές κώδικα στο αρχείο index.html :
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Εφέ Κύλισης Parallax με CSS</title> </head> <body></body> </html> |
Αφού δημιουργήσετε τη βασική δομή των ιστοσελίδων μας, δημιουργήστε τρεις κλάσεις ενοτήτων – δύο για τις εικόνες φόντου και μία για το στατικό απλό φόντο. Στη συνέχεια, προσθέστε τις ακόλουθες γραμμές κώδικα στην ετικέτα <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Πριν το Εφέ Κύλισης Parallax</h1> </section> <section class="section static"> <h1>Καλώς ήρθατε στο Parallax Scrolling</h1> </section> <section class="section parallax bg2"> <h1>Μετά το Εφέ Κύλισης Parallax</h1> </section> </main> ... </body> |
Η εισαγωγή των κωδίκων HTML στην ετικέτα <body> ολοκληρώνει τη βασική ρύθμιση του αρχείου html. μας. Στα επόμενα βήματα, θα εισαγάγουμε το CSS και θα ορίσουμε επιλογές μορφοποίησης για το καθένα.
Step 3: Introduction to CSS
Ας μορφοποιήσουμε τον ιστότοπο προσθέτοντας το αρχείο CSS και δημιουργώντας το εφέ parallax. Αρχικά, δημιουργήστε ένα αρχείο CSS στον φάκελο css-parallax φάκελος όπου θα τοποθετήσουμε όλους τους κώδικες CSS που απαιτούνται για τη δημιουργία του εφέ κύλισης parallax. Μετά από αυτό, εισαγάγετε ένα styles.css αρχείο στον css-parallax φάκελό σας χρησιμοποιώντας την nano εντολή:
|
1 |
nano styles.css |
Θα μορφοποιήσουμε την ιστοσελίδα μας ξεκινώντας με την .wrapper κλάση. Η .wrapper κλάση ορίζει τις ιδιότητες προοπτικής και κύλισης για ολόκληρη τη σελίδα. Ξεκινήστε με την κλάση wrapper και καθορίστε το ύψος, την υπερχείλιση και την προοπτική της. Ορίστε το ύψος του wrapper σε μια σταθερή τιμή για να λειτουργήσει το εφέ κύλισης parallax. Σε αυτόν τον οδηγό, έχουμε ορίσει την τιμή του viewport χρησιμοποιώντας το 100vh για να λάβετε το πλήρες ύψος του viewport της οθόνης. Μπορείτε να τροποποιήσετε την τιμή vh με βάση τις ανάγκες του έργου σας. Στη συνέχεια, απενεργοποιήστε την οριζόντια γραμμή κύλισης της οθόνης ορίζοντας την ιδιότητα overflow-x ως hidden. Επίσης, καθορίστε την τιμή της ιδιότητας perspective ως 3px. Ας προσθέσουμε τις ακόλουθες γραμμές κώδικα στο styles.css αρχείο:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Βήμα 4: Προσθήκη στυλ για την κλάση .section
Δίπλα στην κλάση wrapper, προσθέστε στυλ στην .section κλάση. Η .section κλάση ορίζει τις ιδιότητες μεγέθους, εμφάνισης και κειμένου για τις κύριες ενότητες. Ορίστε τη θέση ως relative για να ευθυγραμμίσετε μια σχετική τοποθέτηση του θυγατρικού στοιχείου .parallax::after και του γονικού στοιχείου .section. Κρατήστε το view-height(vh) ως 100 για να λάβετε το πλήρες ύψος του viewport της οθόνης. Προσθέστε, τροποποιήστε και μορφοποιήστε τις άλλες παραμέτρους σύμφωνα με τις ανάγκες σας.
Μέσα στο styles.css αρχείο σας προσθέστε τον ακόλουθο κώδικα δίπλα στην κλάση wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Στη συνέχεια, θα προσθέσουμε ένα ψευδοστοιχείο και θα το μορφοποιήσουμε για να δημιουργήσουμε το εφέ parallax και να το θέσουμε σε λειτουργία.
Βήμα 5: Προσθήκη στυλ για την κλάση .parallax
Σε αυτό το βήμα, θα προσθέσουμε ένα ψευδοστοιχείο στο .parallax. Αυτό το ψευδοστοιχείο θα είναι το τελευταίο παιδί του στοιχείου και θα προσθέσει ένα ::after ψευδοστοιχείο στην εικόνα φόντου που είναι υπεύθυνη για την έναρξη του εφέ parallax. Στο πρώτο μισό του κώδικα, ρυθμίζεται η βασική προδιαγραφή εμφάνισης και η τοποθέτηση του ψευδοστοιχείου. Στο επόμενο μισό, θα προσθέσουμε την ιδιότητα transform χρησιμοποιώντας τη συνάρτηση CSS translateZ() και θα την κρατήσουμε ως (-1px). Επιπλέον, προσθέστε ένα z-index για να ελέγξετε την κατακόρυφη στοίβαξη.
Προσθέστε τον ακόλουθο κώδικα κάτω από την .section κλάση:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Βήμα 6: Προσθήκη εικόνων και φόντου για κάθε ενότητα
Ας προσθέσουμε τις τελικές ιδιότητες CSS στις εικόνες φόντου και στο χρώμα φόντου της στατικής ενότητας. Ξεκινήστε προσθέτοντας ένα συμπαγές χρώμα φόντου στη .static ενότητα. Ορίστε το χρώμα φόντου ως aqua και προσθέστε τον ακόλουθο κώδικα μετά την .parallax::after κλάση:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
Η κλάση .static προσθέτει ένα υπόβαθρο στο στατικό τμήμα που δεν έχει εικόνα. Τα άλλα δύο τμήματα με την κλάση .parallax έχουν μοναδικές κλάσεις που προορίζονται για τη συγκράτηση εικόνων υποβάθρου. Προσθέστε τις διευθύνσεις URL των εικόνων υποβάθρου στις κλάσεις .bg1 και .bg2 αντίστοιχα.
Σε αυτόν τον οδηγό, χρησιμοποιούμε τυχαίες εικόνες από το Unsplash. Μπορείτε επίσης να χρησιμοποιήσετε εικόνες από άλλους ιστότοπους όπως το Pixapay, Placekitten, και Pexels, για να αναφέρουμε μερικά, και να τα προσαρμόσετε όπως θέλετε. Προσθέστε τον ακόλουθο κώδικα στην κλάση .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Βήμα 7: Σύνδεση CSS με HTML
Τώρα που προσθέσαμε όλο τον κώδικα για το εφέ κύλισης parallax, ας συνδέσουμε το αρχείο styles.css με το αρχείο index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Εφέ Κύλισης Parallax με CSS</title> </head> ... |
Ανοίξτε το index.html που δημιουργήσαμε στο Βήμα 2 και στο πρόγραμμα περιήγησης Chrome:
Συμπέρασμα
Σε αυτόν τον οδηγό, περάσαμε από τα βήματα της δημιουργίας μιας λειτουργικής ιστοσελίδας χρησιμοποιώντας μια βασική δομή. Υπάρχουν πολλές άλλες ενδιαφέρουσες επιλογές και δυνατότητες προσαρμογής με τις οποίες μπορείτε να πειραματιστείτε. Μπορείτε δοκιμάσετε να προσθέσετε εφέ σκιών, να τροποποιήσετε την κύλιση των εικόνων και άλλες προσαρμογές για να κάνετε τη μάθησή σας διασκεδαστική και συναρπαστική.
Για να εμβαθύνετε περισσότερο σε θέματα ανάπτυξης ιστού, δείτε αυτούς τους πόρους από το ιστολόγιό μας:
- Ένας οδηγός για την προσθήκη JavaScript σε HTML
- Εργασία με τη JavaScript: Τι είναι τα αντικείμενα
- Τι είναι το jQuery και πώς μπορείτε να το χρησιμοποιήσετε
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.