НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

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

5

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

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

Шаг 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 -онлайн журнал о веб-дизайне.

  • Max Tashkevski

    простите но где пример работы?

    • / Pavel Mikuta

      Max, обновил статью и добавил демо с кодом!

      • Max Tashkevski

        странно, сафари и хром не работает, в опере без перспективы идет

  • http://beloweb.ru/ Александр

    У меня почему то тоже не работает..

  • Pingback: Звездные войны в CSS « pyrko.com.ua()