Одним из самых запоминающихся начальных титров всех времен является скроллинг текст из “Звездных войн” в 30-45 градусов с перспективой к горизонту. Это классика, которая стала предметом всевозможных упражнений и уроков. В этом маленьком уроке, мы покажем процесс создания эффекта открытие “Звездных войн” с помощью HTML5 и CSS анимаций. Ниже находится демонстрация того, что мы будем создавать:
See the Pen CSS Звездные войны by Web Design Magazine (@webdesignmagazine) on CodePen
Шаг 1
Первое, что нужно сделать, это написать контент для вашей HTML страницы. Мы использовали текст из нашего веб-сайта. В основном веб-сайт содержит заголовок и раздел для текста. Нам нужны два контейнера – один с ID “titles” и внутренний контейнер с контентом с ID “titlecontent”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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);”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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
Теперь давайте черный градиент сверху путем добавление псевдо-элемента.
|
1
2
3
4
5
6
7
8
9
10
11
|
#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.
|
1
2
3
4
5
6
7
8
9
10
|
#titlecontent
{
position: absolute;
top: 100%;
animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
|
Анимация сделана, теперь вы можете добавить больше элементов (по желанию) к вашему проекту. Поддерживается только Chrome, Safari, Firefox, IE10 браузерами.
Pingback: Звездные войны в CSS « pyrko.com.ua()