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


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

Звездные войны в 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>

 

Шаг 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 браузерами.

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

Previous Создаем собственный шрифт из иконок для сайта
Next Возврат к основам или как создать HTML5 шаблон?!

Suggested Posts

Всплывающая подпись к картинке при наведении с помощью CSS3

Настройка панели администратора WordPress

Плавное увеличене изображения на CSS

Полное руководство по использованию Facebook для WordPress

Модуль Ajax Quick checkout 6.4.0 для Opencart 2.x

Отзывчивый дизайн. Реакция на уровень освещенности