Δημιουργήστε μια σελίδα προορισμού WebGL 3D

Η δημιουργία μιας σελίδας προορισμού WebGL 3D είναι ένας τρόπος για να κάνετε μια μεγάλη πρώτη εντύπωση με το κοινό σας. Με το WebGL, μπορείτε να παραδώσετε το οπτικό περιεχόμενο υψηλής ποιότητας στο πρόγραμμα περιήγησης. Μπορείτε να το κάνετε χωρίς plugins ή σε οποιεσδήποτε ειδικές απαιτήσεις. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το WebGL, μαζί με τις κινητές συσκευές και τα δισκία. Το WebGL σας δίνει τη δυνατότητα να δημιουργείτε απίστευτες τρισδιάστατες σκηνές. Μπορεί να τροφοδοτήσει εμπειρίες webvr, να χειριστεί βίντεο, να κάνει γραφικά shaders και πολλά άλλα.

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

Θα χρησιμοποιήσετε μόνο τα περιεχόμενα χαρακτηριστικά των τριών.Js, η ισχυρή βιβλιοθήκη 3D rendering για τον ιστό. Μπορείτε να χρησιμοποιήσετε τις δικές σας εικόνες ως υφές για να το κάνετε μοναδικό. Θα μάθετε επίσης για τη χρήση των ματιών, του φωτισμού και των υφών για την ενίσχυση της λεπτομέρειας της επιφάνειας, πώς να χρησιμοποιήσετε περιβαλλοντικούς χάρτες και πώς να προσθέσετε στρώματα για βάθος και ενδιαφέρον.

Θα πρέπει να υπάρχει περισσότερο από αρκετό για να ξεκινήσετε και πολλά να τροφοδοτήσετε τα επόμενα έργα σας.

Πριν ξεκινήσεις, Κατεβάστε τα αρχεία για αυτό το σεμινάριο .

01. Βασική εγκατάσταση HTML

Για να ξεκινήσετε, χρειάζεστε κάπου για να δείτε την 3D σκηνή σας. Ρυθμίστε ένα βασικό αρχείο HTML και συμπεριλάβετε έναν σύνδεσμο με τρεις.js. Αυτό μπορεί να φιλοξενηθεί εξωτερικά ή να προστεθεί από το Three.js αποθετήριο εδώ: . Προσθέστε μερικά απλά CSS για να κάνετε τη σελίδα πλήρη οθόνη και να αφαιρέσετε τυχόν γραμμές κύλισης. Αποθηκεύστε το αρχείο σας στον τοπικό ιστοσελίδα σας, ώστε να μπορείτε να εξυπηρετήσετε το HTML όταν είστε έτοιμοι να δοκιμάσετε. Προσθέστε τον ακόλουθο κώδικα για να ξεκινήσετε.

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; Τίτλος & GT; Σχετικά Στούντιο & LT; / Title & GT;
& lt; script src = "libs / threemin.js" & gt; / script & gt;
& lt; στυλ & gt;
html, σώμα {περιθώριο: 0; Padding: 0; Overflow: Κρυμμένο? }
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// ο κωδικός 3D πηγαίνει εδώ
& lt; / script & gt;
& lt; / Body & GT;
& lt; / html & gt; 

02. Προσθέστε παγκόσμιες παραλλαγές

Θα χρειαστείτε μερικές μεταβλητές για αναφορές καθ 'όλη τη διάρκεια του υπόλοιπου κώδικα. Ορίστε τους μέχρι τώρα. Αυτό θα περιλαμβάνει έναν πίνακα για να κρατήσει τα σωματίδια, μια μεταβλητή ενός Tetrahedron, του ποντικιού, του Raycaster και τα φώτα σας.

Μέσα στις ετικέτες δέσμης ενεργειών σας, ξεκινήστε προσθέτοντας τον ακόλουθο κώδικα.

 // VARS
var num = 30;
var αντικείμενα = [];
var raycaster = νέος τριών.Raycaster ();
var ποντίκι = νέα τρία.Vector2 ();
var light, t; 

03. Προσθέστε μια σκηνή, κάμερα και καθιστούν

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

Στην ετικέτα Script προσθέστε τον ακόλουθο κώδικα.

 // Δημιουργία κάμερας
var φωτογραφική μηχανή = νέα τρία .perspectiveera
(65, window.innerwidth / window.innerheheight,
0,1, 1000).
Camera.position.Set (0,0,0,0,5).
// Δημιουργήστε μια σκηνή
var σκηνή = νέα τρία.Scene ();

// Δημιουργία renderer
var renderer = new three.webglrenderer (
{antialias: true});
renderer.Setsize (window.innerwidth, παράθυρο.
innerheight)?
Document.Body.AppendChild (renderer.domeMent
)

04. Προσθέστε ένα προβολέα

Στη συνέχεια, πρέπει να προσθέσετε ένα φως στη σκηνή. Three.js έρχεται με μια ποικιλία από φώτα, όπως σημείο, κατευθυντικό, περιβάλλον και προβολείς. Χρησιμοποιήστε ένα προβολέα για αυτό. Θα σας δώσει θέση και κατευθυντικές ιδιότητες και θα σας επιτρέψει να ρίξετε σκιές εάν επιθυμείτε αργότερα.

Προσθέστε τον ακόλουθο κωδικό δίπλα για να προσθέσετε το προβολέα.

 // Δημιουργήστε ένα σημείο φωτός
Light = Νέο τριών.Spotlight (0xccddff, .8);
light.Position.Set (0,0,5);
scene.add (φως); 

05. Προσθέστε έναν βρόχο κινούμενων σχεδίων

Ένας βρόχος κινουμένων σχεδίων, μερικές φορές ονομάζεται ένας «βρόχος», ονομάζεται ιδανικά 60 φορές ανά δευτερόλεπτο. Η ταινία τρέχει σε 24 καρέ ανά δευτερόλεπτο (FPS) και αυτό είναι αρκετά γρήγορο για να ξεγελάσει το μάτι να βλέπει σταθερή κίνηση χωρίς διακοπή. Στην animation του υπολογιστή, στοχεύουμε τουλάχιστον 30 fps, αλλά ιδανικά 60fps. Αυτό εξασφαλίζει πολύ ομαλή οπτική απόδοση, ακόμη και αν τα πλαίσια πέφτουν περιοδικά.

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

Προσθέστε αυτόν τον κώδικα για να κάνετε τη σκηνή σε ένα βρόχο κινούμενων εικόνων:

 var animate = λειτουργία () {
Αιθέσιον αιτήματος (Animate).
renderer.render (σκηνή, κάμερα);
};

// Ξεκινήστε το Loop animation
animate (); 

06. Τοποθετήστε μια υφή γείωσης

Στη συνέχεια, θα δημιουργήσετε ένα έδαφος για τη σκηνή. Για να ξεκινήσετε, πρέπει να φορτώσετε μια εικόνα που θέλετε να χρησιμοποιήσετε. Οι υφές για πράγματα όπως οι επιφάνειες του εδάφους και του τοίχου μπορούν να δημιουργηθούν λαμβάνοντας τις δικές σας φωτογραφίες και προσεκτικά περικοπή προσαρμογής των άκρων στο Photoshop CC . Απλά βεβαιωθείτε ότι μπορούν να πλακάκια όμορφα. Για να ξεκινήσετε γρήγορα, υπάρχουν και οι καλύτερες βιβλιοθήκες, δείτε το καλύτερο μας Δωρεάν υφές .

Μπορείτε να επιλέξετε οτιδήποτε θα πλακίδιο. Αυτό σημαίνει ότι οι άκρες θα συνδυάζουν απρόσκοπτα αν τα τοποθετήσατε δίπλα-δίπλα. Μπορείτε να επιλέξετε κάτι σαν πλακάκια ή πέτρα γι 'αυτό. Παρατηρήστε ότι χρησιμοποιείτε τις επιλογές περιτύλιξης υφής για να επαναλάβετε το περιτύλιγμα για αυτό. Αυτό το παράδειγμα χρησιμοποιεί επαναλαμβανόμενο 12x12. Προσαρμόστε αυτό ώστε να ταιριάζει στην εικόνα σας μόλις δοκιμάσετε τη σκηνή.

 // Τοποθετήστε μια υφή εδάφους
var υφή = νέος τριών.TextureLoader ().
φορτίο ("περιουσιακά στοιχεία / stone.jpg");
texture.wraps = texture.wrapt = τρία.
Επαναλαμβανόμενο.
υφή.Repeat.Set (12,12).

07. Δημιουργήστε ένα εδάφιο υλικό

Το Three.js περιλαμβάνει μια ποικιλία υλικών τύπων για χρήση. Τα υλικά θεωρούνται ως το δέρμα που καλύπτει ένα 3D αντικείμενο. Μπορείτε να χρησιμοποιήσετε βασικά υλικά που δεν αντιδρούν στα ελαφρά ή το Phong ή στο Lambert Shader υλικά που κάνουν. Μπορείτε να χρησιμοποιήσετε τα δικά σας προσαρμοσμένα υλικά Shader επίσης. Για το λόγο αυτό, χρησιμοποιήστε ένα φυσικό υλικό. Έχει μια πολύ ρεαλιστική εμφάνιση, αντιδρά στο φως πολύ καλά. Χρησιμοποιήστε την υφή που φορτώσατε ως διάχυτο χάρτη, καθώς και ως bumpmap εάν δεν έχετε συγκεκριμένη υφή γι 'αυτό.

 // Δημιουργία εδάφους υλικού
Υλικό = Νέο Τρίτη MeShphysicalMaterial ({Χάρτης: Υφή, Bumpmap: Υφή}); 

08. Δημιουργήστε ένα πλέγμα εδάφους

Όταν συνδυάζουμε το υλικό (δέρμα) με τη γεωμετρία που καθορίζει το σχήμα του αντικειμένου 3D, δημιουργούμε ένα πλέγμα. Για το έδαφος, χρειάζεστε ένα απλό σχέδιο. Το υλικό Shader και η υφή θα δημιουργήσουν την ψευδαίσθηση σύνθετων λεπτομερειών επιφάνειας.

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

 // Δημιουργήστε το πλέγμα εδάφους
var geometry = νέα τρία .Planebanometry
(100.100).
var ground = new three mesh (γεωμετρία,
υλικό);
Ground.Rotation.Z = math.pi / 180 * -45;
ground.Rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
scene.add (έδαφος); 

09. Τοποθετήστε έναν στόχο

Στη συνέχεια, θα προσθέσετε ένα κεντρικό 3D αντικείμενο για εστιακό ενδιαφέρον. Αυτό είναι το αστέρι της σκηνής σας, οπότε επιλέξτε μια υφή που σας αρέσει να το καλύψετε. Σημείωση: Θα κάνετε αυτό το αντικείμενο πολύ αντανακλαστικό, οπότε η υφή που φορτώνετε εδώ είναι μια πιο λεπτή εμφάνιση από το έδαφος ήταν.

 // Υφή φόρτωσης αντικειμένου
var υφή = νέος τριών.TextureLoader ().
φορτίο ("ενεργητικό / rock_01_diffusion.jpg"); 

10. Δημιουργήστε ένα χάρτη περιβάλλοντος

Στη συνέχεια, δημιουργήστε ένα περιβάλλον γύρω από το αντικείμενο που θα αντικατοπτρίζεται στην επιφάνεια του. Θα μπορούσατε επίσης να προσθέσετε αυτό στη σκηνή ως το scene.Background ιδιοκτησίας, αν το επιθυμείτε. Για να φορτώσετε ένα περιβάλλον, χρησιμοποιείτε ένα cubetextureeloader. Οι εικόνες που χρησιμοποιείτε θα πρέπει να είναι έξι εικόνες που δείχνουν το εσωτερικό του κύβου σας για να σχηματίσουν μια απρόσκοπτη εικόνα, που ονομάζεται χάρτες Cube.

 var ENVMAP = Νέο τρία.cubetextureLoader ()
.Setpath ('περιουσιακά στοιχεία /')
.Lload (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
JPG ',' PZ.JPG ',' NZ.JPG ']). 

11. Προσθέστε το Tetrahedon

Three.js Έρχεται με πολλές προεπιλεγμένες γεωμετρίες που μπορείτε να χρησιμοποιήσετε για τις σκηνές σας. Ένα από τα πιο δροσερά είναι το τετραεδρόν. Χρειάζεται μια ακτίνα και μια παράμετρο "λεπτομέρεια" για να ορίσετε τον αριθμό των προσώπων του αντικειμένου.

Προσθέστε ένα στη σκηνή σας, με τον ακόλουθο κώδικα.

 // Δημιουργία Tetrahedron
var geometry = νέα τρία.
Τετραεδρονετρία (2,0).
VAR Υλικό = Νέο τριών δισεκατομμυρίωνμο
({Χάρτης: Υφή, ENVMAP: EVERMAP,
Μεταλλότητα: 1.0, τραχύτητα: 0,0});
t = νέα τρία μ.μ. (γεωμετρία, υλικό).
t.Rotation.x = math.pi / 180 * -10;
scene.add (t);

12. Προσθέστε περιστροφή και στόχο κάμερας

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

Ενημερώστε τον κινούμενο κώδικα λειτουργίας σας για να μοιάζετε με αυτό.

 Αιθέσιοι (Animate).
t.Rotation.y - = 0,005;
Camera.Lookat (t.position);
renderer.render (σκηνή, κάμερα); 

13. Προσθέστε βρόχο σωματιδίων

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

 για (i = 0, i & lt; = num; i ++) {
// ο κωδικός σωματιδίων θα πάει εδώ
} 

14. Δημιουργία ματιών σωματιδίων

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

Μέσα στο βρόχο σας προσθέστε τον ακόλουθο κώδικα.

 // Δημιουργία νέων ματιών
VAR Geometry = Νέο τριών.Sphereburomometry (.1,6,6).
VAR Υλικό = Νέο Τρίτο MeshphysicalMaterial ({ENVMAP: EnvMap, Metalness: 1.0});
VAR σωματίδιο = Νέο τρία μ.μ. (γεωμετρία, υλικό).

15. Ορίστε τυχαία θέση και απόσταση

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

 // Ορίστε τυχαία θέση
particle.position.set (math.random () * 100,0 -
50.0,0.0, math.random () * - 10.0);
// Υπολογίστε το Dissnace ως σταθερό και εκχωρήστε
αντιλέγω, διαμαρτύρομαι
var a = νέα τρία.Vector3 (0, 0, 0);
var b = σωματίδιο.
var d = a.distanceto (b);
particle.distance = d;

16. Ρυθμίστε τις γωνίες για τροχιές

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

 // Ορίστε 2 τυχαίες αλλά συνεχείς γωνίες
σε ακτίνες
particle.radians = math.random () * 360 * μαθηματικά.
PI / 180; // αρχική γωνία
particle.radians2 = math.random () * 360 * math.
PI / 180; // αρχική γωνία

17. Προσθέστε το σωματίδιο στη σκηνή και τη συλλογή

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

 // Προσθέστε αντικείμενο στη σκηνή
scene.add (σωματίδιο);
// προσθήκη στη συλλογή
Αντικειμενοσφάλιος (σωματίδιο);

18. Προσθέστε κινούμενα σχέδια σε σωματίδια

Στη συνέχεια, πρέπει να ενημερώσετε τη θέση και την περιστροφή των αντικειμένων σωματιδίων σας. Αυτές οι τροχιακές σε μια σταθερή απόσταση από το κέντρο σκηνής. Προσθέστε τον ακόλουθο κώδικα στη λειτουργία Animate.

 για (i = 0, i & lt; = num; i ++) {
var o = αντικείμενα [i];
o.Rotation.y + = 01;
Αν (i% 2 == 0) {
O.Radians + =. 005; O.Radians2 + =. 005;
} αλλιώς {
O.Radians - =. 005; O.Radians2 - =. 005;
}
o.position.x = (math.cos (O.Radians) *
o.distance);
o.position.z = (math.sin (O.Radians) *
o.distance).
o.position.y = (math.sin (O.Radians2) *
o.distance * .5);
}

19. Προσθέστε έναν τίτλο

Στη συνέχεια, προσθέστε έναν τίτλο στο κέντρο της οθόνης - ένα όνομα για να εισαγάγετε το εμπορικό σήμα σας. Η επιστολή-απόσταση για τους τίτλους δίνει μια μεγάλη κινηματογραφική εμφάνιση. Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά / στυλ που σας αρέσει, αλλά κοιτάξτε τις αναφορές τίτλου ταινιών για έμπνευση. Δείτε τη λίστα μας Δωρεάν γραμματοσειρές Για μια λίστα με τις αγαπημένες μας γραμματοσειρές που μπορείτε να κατεβάσετε.

Πρώτα προσθέστε το στοιχείο DOM για τον τίτλο σας. Προσθέστε αυτό μετά τις ετικέτες δέσμης ενεργειών πριν από την ετικέτα του σώματος κλεισίματος.

 & lt; h1 & gt · σχετικά στούντιο & lt; / h1 & gt;

Προσθέστε τα παρακάτω στυλ για τον τίτλο σας στις ετικέτες στυλ σας στην κορυφή του αρχείου σας.

H1 {Χρώμα: Λευκό; Θέση: Απόλυτη. Κορυφή: 50%.
Z-Δείκτης: 100; Πλάτος: 100%. Κείμενο-Ευθυγράμμιση: Κέντρο;
Μετασχηματισμός: Μετάφραση (0, -100%). Γραμματοσειρά:
'Raleway', Sans-Serif. Γραμματοσειρά: 100;
Επιστολή-διάσπαση: 40px; Μετασχηματισμός κειμένου:
κεφαλαία; Μέγεθος γραμματοσειράς: 16px; }

20. Προσθέστε ένα βρόχο βίντεο

Ένα ωραίο τέχνασμα για να δημιουργήσετε βάθος στην προσγείωσή σας είναι να προσθέσετε ένα μικρό βρόχο βίντεο. Μπορείτε να χρησιμοποιήσετε καπνό, σκόνη ή σωματίδια. Αυτά είναι ευρέως διαθέσιμα στο διαδίκτυο ή μέρος ενός μεγάλου αριθμού συσκευασιών βίντεο και κινηματογραφικών ταινιών. Προσθέστε την ακόλουθη ετικέτα βίντεο μετά την ετικέτα H1. Σημειώστε ότι θέλετε να το ορίσετε σε «σίγαση» και την αυτόματη αναπαραγωγή. Αυτό θα επιτρέψει επίσης στο βίντεο να αναπαράγει σε κινητές συσκευές.

 ​​& lt; Video ID = "Videobacker" Loop SRC = "Περιουσιακά στοιχεία /
Snow.mp4 "Autoplay Musted & GT; / Video & GT;

Για να στείλετε το βίντεο, προσθέστε τα παρακάτω CSS στα στυλ σας στο κεφάλι της σελίδας σας.

 ​​#Videobacker {% μέγεθος: κάλυψη;
Αντικείμενο: κάλυμμα; Z-Δείκτης: 9; αδιαφάνεια: .3;
Θέση: Απόλυτη. Κορυφή: 0px; Αριστερά: 0px;
Πλάτος: 100VW; Ύψος: 100VH; Μετάβαση: 1S
Επαναφορά αδιαφανής.

21. Προσθέστε επιστολή-πυγμαχία

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

Ξεκινήστε προσθέτοντας τα στοιχεία DIV για αυτό.

 ​​& lt; div class = 'bar-top' & gt; / div & gt;
& lt; div class = 'bar-bottom' & gt; / div & gt;

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

 ​​.Bar-top {φόντο-χρώμα: μαύρο;
Ύψος: 100px; Θέση: Απόλυτη. Κορυφή: 0;
Αριστερά: 0; Z-Index: 100; Πλάτος: 100VW;}
. Bar-bottom {φόντο-χρώμα: μαύρο?
Ύψος: 100px; Θέση: Απόλυτη. Κάτω: 0;
Αριστερά: 0; Z-Δείκτης: 100; Πλάτος: 100VW;} 

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

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

• Web Components: Ο τελευταίος οδηγός
• Πώς να δημιουργήσετε ένα στρωματοποιημένο παράλλαγμα
• Πώς να προσθέσετε κινούμενα σχέδια στο SVG μέσω CSS