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