Pembukaan Star Wars adalah ikonik. Kesan pengguliran teks ke atas dan jauh dari skrin adalah kesan khas yang hebat untuk filem pada tahun 1977 dan gaya tipografik yang hebat yang baru pada masa itu.
Kita boleh mencapai kesan yang serupa dengan HTML dan CSS! Catatan ini lebih banyak mengenai bagaimana mendapatkan kesan teks gelangsar daripada cuba membuat semula urutan pembukaan Star Wars penuh atau memadankan gaya tepat yang digunakan dalam filem, jadi mari kita sampai ke tempat di mana ini adalah hasil akhir:
Lihat Pengenalan Star Star Wars oleh Geoff Graham (@geoffgraham) di CodePen.
HTML Asas
Pertama, mari sediakan HTML untuk kandungan:
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 kepingan yang kita perlukan:
- Sebuah wadah
star-warsyang akan kami gunakan untuk meletakkan kandungan. Ini juga perlu kerana kita akan menggunakanperspectiveharta CSS, di mana mempunyai elemen induk adalah cara yang berguna untuk menambahkan kedalaman atau meminggirkantransformharta elemen anak . - Wadah yang dipanggil
crawlakan menyimpan teks sebenar dan menjadi elemen yang kita gunakan untuk animasi CSS. - Kandungannya!
Anda mungkin menyedari bahawa tajuk filem itu dibungkus dalam bekas tambahan yang dipanggil title. Ini tidak perlu, tetapi boleh memberi anda pilihan gaya tambahan sekiranya anda memerlukannya.
CSS Asas
Caranya adalah dengan membayangkan ruang tiga dimensi di mana teks merangkak menegak ke atas Y-axisdan keluar di sepanjang Z-axis. Ini memberi gambaran bahawa teks meluncur ke atas layar dan jauh dari penonton pada masa yang sama.
Pertama, mari sediakan dokumen supaya skrin tidak dapat ditatal. Kami mahu teks muncul dari bawah skrin tanpa penonton dapat menatal dan melihat teks sebelum masuk. Kita boleh gunakan 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 boleh beralih ke menggayakan star-warswadah 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 dapat menerapkan gaya pada crawlelemen. Sekali lagi, elemen ini penting kerana mengandungi sifat 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 mempunyai sekumpulan teks yang bagus, tetapi teks itu tidak condong atau animasi. Mari kita mewujudkannya.
Animasi!
Inilah yang sangat anda sayangi, bukan? Pertama, kita akan menentukan @keyframesuntuk animasi. Animasi ini lebih baik daripada animasi untuk kita, kerana kita akan menambah transformsifat kita di sini, terutama untuk pergerakan sepanjang Z-axis. Kami akan memulakan animasi di 0%mana teks paling dekat dengan penonton dan terletak di bawah skrin, di luar pandangan, kemudian mengakhiri animasi di 100%tempat yang jauh dari penonton dan mengalir ke atas dan di bahagian atas skrin.
/* 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 kita gunakan 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; )Waktu yang Menyeronokkan Dengan Penalaan Halus
Anda boleh bersenang-senang dengan perkara-perkara setelah kesan utamanya berlaku. Sebagai contoh, kita dapat menambahkan sedikit pudar di bahagian atas skrin untuk menonjolkan kesan teks 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 bahagian atas HTML dan teks akan mengalir di belakang kecerunan yang berubah dari telus ke latar belakang yang sama seperti :
Contoh Lengkap
Berikut adalah kod penuh dari catatan ini yang digabungkan.
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 lain
Beberapa orang lain telah membuat persembahan yang lebih setia dari pembukaan Star Wars menggunakan teknik lain daripada yang dibahas di sini dalam catatan ini.
Tim Pietrusky mempunyai versi yang diatur dengan indah topuntuk pergerakan dan opacitymencipta kesan pudar:
Lihat rangkuman pembukaan Pen Star Wars dari tahun 1977 oleh Tim Pietrusky (@TimPietrusky) di CodePen.
Yukulélé menggunakan marginuntuk menggerakkan keseluruhan layar:
Lihat merangkak pembukaan Star Wars Pen Pure CSS oleh Yukulélé (@yukulele) di CodePen.
Karottes menggunakan transformbanyak catatan seperti ini, tetapi lebih bergantung TranslateYkepada pergerakan teks tersebut Y-axis.
Lihat Penangkapan Perang Star Star oleh Karottes (@Karottes) di CodePen.