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


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

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

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

Шаг 1

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

 

Шаг 2

Давайте стилизовать наш дизайн. Нам нужно убедиться, что фон черный, шрифт San-Serif, и что мы будем использовать 100%  высоту и ширину. Давайте также установим “перспективу” нашего проекта. Для этого давайте добавим “ transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg);“.

 

Шаг 3

Теперь давайте черный градиент сверху путем добавление псевдо-элемента.

 

Шаг 4

Теперь добавим код для прокрутки текста путем добавления анимации keyframes.

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

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

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

Suggested Posts

15 новых адаптивных CSS фрэймворков

Оформление списка HTML5 с использованием иконок WebFonts

Модуль для OpenCart OCFilter v4.7.5

Как увеличить посещаемость сайта

Руководство по кастомным типам записей WordPress + спец плагин

18 советов и техник HTML5(Часть2)