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

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

Шаг 1

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

<!doctype html>

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

  <section>

<div id="titles">
<div id="titlecontent">
WebDesignMagazine.ru – это сайт, который является ведущим в Рунете онлайн сообществом для веб-дизайнеров и разработчиков. Мы публикуем новости веб-дизайна, интересные уроки и обзоры, современные тенденции дизайна, тем самым представляя возможность нашим читателям обмениваться опытом и знаниями, советами и подсказками. Только здесь вы найдете подробные обучающие статьи по Вордпрессу, HTML5, CSS, jQuery, узнаете секреты современного веб-дизайна.

За несколько месяцев работы число наших читателей и колличество участников социальных сетей достигло более 6000 человек! И это только начало!

Мы публикуем только то, что интересно читателям и относится к веб-дизайну. Если у вас есть какие-либо вопросы, предложения по работе и развитию сайта, вы хотите провести конкурс или разыграть что-либо – напишите нам пару строк! Мы будем рады Вас слышать!</div>
</div>

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

<!doctype html>

WebDesignMagazine.ru

<body>

WebDesignMagazine.ru – это сайт, который является ведущим в Рунете онлайн сообществом для веб-дизайнеров и разработчиков. Мы публикуем новости веб-дизайна, интересные уроки и обзоры, современные тенденции дизайна, тем самым представляя возможность нашим читателям обмениваться опытом и знаниями, советами и подсказками. Только здесь вы найдете подробные обучающие статьи по Вордпрессу, HTML5, CSS, jQuery, узнаете секреты современного веб-дизайна.

За несколько месяцев работы число наших читателей и колличество участников социальных сетей достигло более 6000 человек! И это только начало!

Мы публикуем только то, что интересно читателям и относится к веб-дизайну. Если у вас есть какие-либо вопросы, предложения по работе и развитию сайта, вы хотите провести конкурс или разыграть что-либо – напишите нам пару строк! Мы будем рады Вас слышать!</div>

</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);
}

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;
}

#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%; }
}

#titlecontent

{

position: absolute;

top: 100%;

animation: scroll 100s linear 4s infinite;

}

@keyframes scroll {

0% { top: 100%; }

100% { top: -170%; }

}

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

Источник: webdesignmagazine.ru

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