создание титров с эффектом звездных войн

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

Автор: в CSS, HTML5, Верстка, Уроки Дата: Май 31, 2013

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

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

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

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

Шаг 1

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

<!doctype html>

Web Design Magazine
<meta charset="utf8" />
<header></header><section>

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

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

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

 </section>


 

Шаг 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. Пишу статьи для веб-сайта, занимаюсь продвижением портала в социальных сетях. Если хотите стать автором на нашем сайте - напишите нам об этом и мы рассмотрим ваше предложение.