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

Модуль оплаты «Интеркасса» для MaxyStore и OpenCart v.1.5.3.1

Свежие и бесплатные шаблоны для OpenCart 2.0.x

Используем карты Google для увеличения посещаемости

SEOANALYZER — ПЛАГИН ДЛЯ SEO АНАЛИЗА САЙТОВ

АДАПТИВНЫЕ ВКЛАДКИ — RESPONSIVE TABS

Категория аккордеон на Opencart 2.x без модуля