Pembukaan Star Wars sangat ikonik. Efek teks yang bergulir ke atas dan menjauh dari layar adalah efek khusus yang sangat keren untuk sebuah film pada tahun 1977 dan gaya tipografi keren yang baru pada saat itu.
Kita dapat mencapai efek serupa dengan HTML dan CSS! Posting ini lebih banyak tentang cara mendapatkan efek teks geser daripada mencoba membuat ulang urutan pembukaan Star Wars lengkap atau mencocokkan gaya persis yang digunakan dalam film, jadi mari kita ke tempat di mana ini adalah hasil akhirnya:
Lihat Intro Pen Star Wars oleh Geoff Graham (@geoffgraham) di CodePen.
HTML Dasar
Pertama, mari kita siapkan HTML untuk konten:
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…
Ini memberi kita semua bagian yang kita butuhkan:
- Sebuah wadah bernama
star-warsyang akan kita gunakan untuk memposisikan konten. Ini juga diperlukan karena kita akan menggunakanperspectiveproperti CSS, di mana memiliki elemen induk adalah cara yang berguna untuk menambah kedalaman atau memiringkantransformproperti elemen anak . - Sebuah wadah bernama
crawlitu akan menampung teks sebenarnya dan menjadi elemen yang kita terapkan animasi CSS. - Isinya!
Anda mungkin telah memperhatikan bahwa judul film dibungkus dalam wadah tambahan bernama title. Ini tidak perlu, tetapi dapat memberi Anda opsi gaya tambahan jika Anda membutuhkannya.
CSS Dasar
Triknya adalah dengan membayangkan ruang tiga dimensi tempat teks merangkak vertikal ke atas Y-axisdan ke luar di sepanjang Z-axis. Ini memberi kesan teks meluncur ke atas layar dan menjauh dari penampil pada saat yang bersamaan.
Pertama, mari kita siapkan dokumen agar layar tidak dapat di-scroll. Kami ingin teks muncul dari bawah layar tanpa penonton dapat menggulir dan melihat teks sebelum masuk. Kita dapat menggunakan overflow: hiddenuntuk melakukan itu:
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; )Sekarang kita bisa melanjutkan untuk menata star-warspenampung kita , yang merupakan elemen induk untuk demo kita:
.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; )Selanjutnya, kita bisa menerapkan gaya ke crawlelemen. Sekali lagi, elemen ini penting karena mengandung properti yang akan mengubah teks dan dianimasikan.
.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%; )Sejauh ini, kami memiliki sekumpulan teks yang terlihat bagus, tapi tidak miring atau beranimasi. Mari kita wujudkan itu.
Animasi!
Ini yang benar-benar kamu pedulikan, bukan? Pertama, kita akan menentukan @keyframesuntuk animasinya. Animasi melakukan sedikit lebih dari sekedar membuat animasi untuk kami, karena kami akan menambahkan transformproperti kami di sini, terutama untuk pergerakan di sepanjang Z-axis. Kami akan memulai animasi di 0%tempat teks paling dekat dengan penampil dan terletak di bawah layar, di luar tampilan, lalu mengakhiri animasi di 100%tempat yang jauh dari penampil dan mengalir ke atas dan di atas layar.
/* 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); ) )Sekarang, mari terapkan animasi itu pada .crawlelemen:
.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; )Saat-saat Menyenangkan Dengan Penyesuaian
Anda dapat bersenang-senang sedikit dengan berbagai hal setelah efek utama ada. Misalnya, kita dapat menambahkan sedikit fade di bagian atas layar untuk menonjolkan efek teks yang merangkak ke kejauhan:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Tambahkan elemen itu ke bagian atas HTML dan teks akan mengalir di belakang gradien yang berubah dari transparan ke latar belakang yang sama seperti :
Contoh Lengkap
Berikut adalah kode lengkap dari posting ini dikumpulkan.
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); ) )Contoh Lainnya
Beberapa orang lain telah membuat terjemahan yang lebih tepat dari pembukaan Star Wars menggunakan teknik lain daripada yang dibahas di sini di posting ini.
Tim Pietrusky memiliki versi yang diatur dengan indah yang digunakan topuntuk gerakan dan opacityuntuk menciptakan efek memudar:
Lihat perayapan pembuka Pen Star Wars dari tahun 1977 oleh Tim Pietrusky (@TimPietrusky) di CodePen.
Yukulélé digunakan marginuntuk menggerakkan sepanjang layar:
Lihat perayapan pembuka Pen Pure CSS Star Wars oleh Yukulélé (@yukulele) di CodePen.
Karottes menggunakan transformbanyak hal seperti posting ini, tetapi lebih mengandalkan TranslateYuntuk memindahkan teks di sepanjang Y-axis.
Lihat Pen Star Wars Crawl oleh Karottes (@Karottes) di CodePen.