Начало «Звездных войн» является знаковым. Эффект прокрутки текста вверх и от экрана был одновременно безумно крутым спецэффектом для фильма в 1977 году и классным типографским стилем, который был совершенно новым в то время.
Мы можем добиться аналогичного эффекта с помощью HTML и CSS! Этот пост больше о том, как получить этот эффект скользящего текста, а не пытаться воссоздать полную последовательность открытия Звездных войн или соответствовать точным стилям, используемым в фильме, поэтому давайте перейдем к тому месту, где это конечный результат:
Смотрите вступление Джеффа Грэма (@geoffgraham) к Pen Star Wars на 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.
Юкулеле использует marginдля перемещения по экрану:
Посмотрите открывающее сканирование Pen Pure CSS Star Wars от Yukulélé (@yukulele) на CodePen.
Karottes во transformмногом похож на этот пост, но больше полагается на TranslateYперемещение текста по Y-axis.
См. Pen Star Wars Crawl от Karottes (@Karottes) на CodePen.