Звездные войны в CSS

Одним из самых запоминающихся начальных титров всех времен является скроллинг текст из “Звездных войн” в 30-45 градусов с перспективой к горизонту. Это классика, которая стала предметом всевозможных упражнений и уроков. В этом маленьком уроке, мы покажем процесс создания эффекта открытие “Звездных войн” с помощью HTML5 и CSS анимаций.

Демонстрация того, что мы будем создавать:

Pen CSS Звездные войны

Шаг 1

Первое, что нужно сделать, это написать контент для вашей HTML страницы. Мы использовали текст из нашего веб-сайта. В основном веб-сайт содержит заголовок и раздел для текста. Нам нужны два контейнера – один с ID “titles” и внутренний контейнер с контентом с ID “titlecontent”.

<!doctype html>

WebDesignMagazine.ru
<meta charset="utf8" />
<header></header>
<body>

  <section>

<div id="titles">
<div id="titlecontent">
ВАШ ТЕКСТ
</div>

 </section>
</body>
</html>

Шаг 2

Давайте стилизовать наш дизайн. Нам нужно убедиться, что фон черный, шрифт San-Serif, и что мы будем использовать 100% высоту и ширину. Давайте также установим “перспективу” нашего проекта. Для этого давайте добавим “transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg);”.

body, html
{
	width: 100%;
	height: 100%;
	font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
}
#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}

Шаг 3

Теперь давайте черный градиент сверху путем добавление псевдо-элемента.

#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

Шаг 4

Теперь добавим код для прокрутки текста путем добавления анимации keyframes.

#titlecontent
{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

Анимация сделана, теперь вы можете добавить больше элементов (по желанию) к вашему проекту. Поддерживается только Chrome, Safari, Firefox, IE10 браузерами.

Высоких конверсий!

09-03-2016