Текст сканирования Star Wars онлайн урок.


Открытие Звездных войн является знаковым. Эффект прокрутки текста вверх и в сторону от экрана был одновременно сумасшедшим прохладным специальным эффектом для фильма в 1977 году и прохладным типографским стилем, который был совершенно новым в то время.

Мы можем добиться подобного эффекта с помощью HTML и CSS! Это сообщение больше о том, как получить этот скользящий текстовый эффект, а не пытаться воссоздать полную последовательность открытия Звездных войн или сопоставить точные стили, используемые в фильме, поэтому давайте перейдем к месту, где это окончательный результат:

#Основной HTML

Сначала давайте настроим HTML для содержимого:

<section class="star-wars">

<div class="crawl">

<div class="title">
<p>Episode IV</p>
<h1>A New Hope</h1>
</div>

<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>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.</p>
<p>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…</p>

</div>

</section>

Это дает нам все части, которые нам нужны:

  • Контейнер, названныйstar-wars, который мы будем использовать для размещения содержимого. Это также необходимо, потому что мы будем использовать свойствоперспективыCSS, где наличие родительского элемента является полезным способом добавления глубины или искажения свойстваtransformдочернего элемента.
  • Контейнер с именемcrawl, который будет содержать фактический текст и быть элементом, к которому мы применяем анимацию CSS.
  • Контент!

Возможно, вы заметили, что название фильма завернуто в дополнительный& lt; div & gt;контейнер, названныйtitle. Это необязательно, но может предоставить вам дополнительные варианты стилизации, если они вам понадобятся.

# Основной CSS

Трюк состоит в том, чтобы представить трехмерное пространство, в котором текст сканируется вертикально вверхпо оси Yи выходит пооси Z. Это создает впечатление, что текст одновременно сдвигается по экрану и удаляется от зрителя одновременно.

X, Y и Z-ось трехмерной плоскости

Сначала давайте настроим документ& lt; body & gt;, чтобы экран не прокручивался. Мы хотим, чтобы текст выходил из нижней части экрана, чтобы зритель не мог прокручивать и видеть текст перед его входом. Мы можем использовать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. Мы начнем анимацию с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;
}

# Fun Time With Fine-Tuning

Вы можете немного веселиться с вещами, когда основной эффект будет на месте. Например, мы можем добавить немного выцветания в верхней части экрана, чтобы подчеркнуть эффект отскакивания текста на расстоянии:

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

Добавьте этот элемент в начало HTML и текст будет течь за градиентом, который переходит от прозрачного к тому же фону, что и& lt; body & gt;:

<div class="fade"></div>

# Полный пример

Вот полный код из этого сообщения, собранного вместе.

<div class="fade"></div>

<section class="star-wars">

<div class="crawl">

<div class="title">
<p>Episode IV</p>
<h1>A New Hope</h1>
</div>

<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>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.</p>
<p>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…</p>

</div>

</section>

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для движения инепрозрачностьдля создания эффекта замирания:

Yukulélé используетmarginдля перемещения вдоль экрана:

Karottes используетtransform, как и этот пост, но больше полагается наTranslateY, чтобы переместить текст вдольоси Y.