Відкриття "Зоряних воєн" є знаковим. Ефект прокрутки тексту як вгору, так і геть з екрану був як божевільним крутим спецефектом для фільму ще в 1977 році, так і крутим типографським стилем, який був абсолютно новим на той час.
Ми можемо досягти подібного ефекту за допомогою HTML та CSS! Ця публікація більше стосується того, як отримати цей ковзний текстовий ефект, а не намагатися відтворити повну послідовність відкриття "Зоряних воєн" або зіставити точні стилі, використані у фільмі, тому давайте дійдемо до місця, де це остаточний результат:
Дивіться вступ до Pen Star Wars від Джеффа Грема (@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фактичним текстом і буде елементом, до якого ми застосовуємо анімацію 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анімацію. Анімація робить для нас трохи більше, ніж анімацію, тому що ми додамо 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); ) )Інші приклади
Деякі інші люди робили більш вірні переклади відкриття "Зоряних воєн", використовуючи інші техніки, ніж ті, що висвітлені тут у цій публікації.
Тім П'єтрускі має чудово оркестровану версію, що використовує topдля руху і opacityстворення ефекту згасання:
Дивіться відкриття сканування «Зоряні війни Pen» від 1977 року Тіма П’єтруського (@TimPietrusky) на CodePen.
Yukulélé використовує marginдля переміщення по екрану:
Подивіться, як Pen Pure CSS Star Wars відкриває сканування Yukulélé (@yukulele) на CodePen.
Кароттес використовує transformподібно до цієї публікації, але більше покладається на TranslateYпереміщення тексту вздовж Y-axis.
Див. Pen Star Wars Crawl від Karottes (@Karottes) на CodePen.