Κείμενο ανίχνευσης Star Wars - CSS-Κόλπα

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

Μπορούμε να επιτύχουμε παρόμοιο αποτέλεσμα με HTML και CSS! Αυτή η ανάρτηση αφορά περισσότερο το πώς να αποκτήσετε αυτό το εφέ συρόμενου κειμένου αντί να προσπαθήσετε να δημιουργήσετε ξανά την πλήρη ακολουθία ανοίγματος Star Wars ή να ταιριάξετε τα ακριβή στυλ που χρησιμοποιούνται στην ταινία, οπότε ας φτάσουμε σε ένα μέρος όπου αυτό είναι το τελικό αποτέλεσμα:

Δείτε το Pen Star Wars Intro του Geoff Graham (@geoffgraham) στο CodePen.

Το βασικό HTML

Αρχικά, ας δημιουργήσουμε HTML για το περιεχόμενο:

Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

Αυτό μας δίνει όλα τα κομμάτια που χρειαζόμαστε:

• Ένα κοντέινερ που ονομάζεται star-warsπου θα χρησιμοποιήσουμε για να τοποθετήσουμε το περιεχόμενο Αυτό είναι επίσης απαραίτητο γιατί θα χρησιμοποιούμε την perspectiveιδιότητα CSS, όπου η ύπαρξη γονικού στοιχείου είναι ένας χρήσιμος τρόπος για να προσθέσετε βάθος ή να παρακάμψετε την transformιδιότητα ενός παιδικού στοιχείου .
• Ένα κοντέινερ που ονομάζεται crawlπου θα διατηρεί το πραγματικό κείμενο και θα είναι το στοιχείο στο οποίο εφαρμόζουμε το animation CSS.
• Το περιεχόμενο!

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

Το βασικό CSS

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

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

body ( /* Force the body to fill the entire screen */ width: 100%; height: 100%; /* Hide elements that flow outside the viewable space */ overflow: hidden; /* Black background for the screen */ background: #000; )

Τώρα μπορούμε να προχωρήσουμε στο στυλ του star-warsκοντέινερ μας , το οποίο είναι το γονικό στοιχείο για την επίδειξη:

.star-wars ( /* Flexbox to center the entire element on the screen */ display: flex; justify-content: center; /* This is a magic number based on the context in which this snippet is used and effects the perspective */ height: 800px; /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */ perspective: 400px; /* The rest is totally up to personal styling preferences */ color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; text-align: justify; )

Στη συνέχεια, μπορούμε να εφαρμόσουμε στυλ στο crawlστοιχείο. Και πάλι, αυτό το στοιχείο είναι σημαντικό επειδή περιέχει τις ιδιότητες που θα μετατρέψουν το κείμενο και θα είναι κινούμενο.

.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Making sure the text is fully off the screen at the start and end of the animation */ top: -100px; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; )

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

Κινουμένων σχεδίων!

Αυτό είναι που πραγματικά σας ενδιαφέρει, σωστά; Πρώτον, θα ορίσουμε το @keyframesγια το κινούμενο σχέδιο. Το animation κάνει κάτι περισσότερο από το animation για εμάς, γιατί πρόκειται να προσθέσουμε τις transformιδιότητές μας εδώ, ειδικά για την κίνηση κατά μήκος του Z-axis. Θα ξεκινήσουμε την κινούμενη εικόνα στο 0%σημείο όπου το κείμενο είναι πιο κοντά στο πρόγραμμα προβολής και βρίσκεται κάτω από την οθόνη, εκτός θέασης και, στη συνέχεια, θα τερματίσουμε την κινούμενη εικόνα στο 100%σημείο που είναι μακριά από το πρόγραμμα προβολής και ρέει πάνω και πάνω από την κορυφή της οθόνης.

/* We're calling this animation "crawl" */ @keyframes crawl ( 0% ( /* The element starts below the screen */ top: 0; /* Rotate the text 20 degrees but keep it close to the viewer */ transform: rotateX(20deg) translateZ(0); ) 100% ( /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */ top: -6000px; /* Slightly increasing the rotation at the end and moving the text far away from the viewer */ transform: rotateX(25deg) translateZ(-2500px); ) )

Τώρα, ας εφαρμόσουμε αυτό το κινούμενο σχέδιο στο .crawlστοιχείο:

.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; /* Adds the crawl animation, which plays for one minute */ animation: crawl 60s linear; )

Διασκεδαστικοί χρόνοι με λεπτό συντονισμό

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

.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )

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

Το πλήρες παράδειγμα

Εδώ είναι ο πλήρης κωδικός από αυτήν την ανάρτηση.

Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

body ( width: 100%; height: 100%; background: #000; overflow: hidden; ) .fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; ) .star-wars ( display: flex; justify-content: center; position: relative; height: 800px; color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; perspective: 400px; text-align: justify; ) .crawl ( position: relative; top: 9999px; transform-origin: 50% 100%; animation: crawl 60s linear; ) .crawl > .title ( font-size: 90%; text-align: center; ) .crawl > .title h1 ( margin: 0 0 100px; text-transform: uppercase; ) @keyframes crawl ( 0% ( top: 0; transform: rotateX(20deg) translateZ(0); ) 100% ( top: -6000px; transform: rotateX(25deg) translateZ(-2500px); ) )

Άλλα παραδείγματα

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

Ο Tim Pietrusky έχει μια όμορφα ενορχηστρωμένη έκδοση που χρησιμοποιεί topγια την κίνηση και opacityγια να δημιουργήσει το εξασθενισμένο αποτέλεσμα:

Δείτε το άνοιγμα του Pen Star Wars από το 1977 του Tim Pietrusky (@TimPietrusky) στο CodePen.

Το Yukulélé χρησιμοποιεί marginγια να μετακινήσει το κατά μήκος της οθόνης:

Δείτε το άνοιγμα του Pen Pure CSS Star Wars από τον Yukulélé (@yukulele) στο CodePen.

Ο Karottes χρησιμοποιεί transformπαρόμοια ανάρτηση, αλλά βασίζεται περισσότερο στην TranslateYμετακίνηση του κειμένου κατά μήκος του Y-axis.

Δείτε το Pen Star Wars Crawl από τον Karottes (@Karottes) στο CodePen.