Заставка Star Wars на чистом CSS 3

Share
06.12.2017

Содержание

Вступление

CSS 3 прошел довольно долгий путь, и теперь даже сложные анимации можно построить без единой строки JavaScript. В этом руководстве показано, как внедрить скроллер Star Wars (Заставки 1977 года) в чистом CSS.

Сохранение SVG-изображения внутри CSS

Сохраните SVG изображение таким же способом как и сохраняется растровые изображения в CSS, с использованием кодировки base 64.

Анимационная последовательность

Можно использовать и без кодирования, но в таком случае следует соблюдать осторожность: в строке SVG не должно осуществляться разрывов и она должна быть правильно закодирована по URL-адресу. В противном случае специальные символы типа # будут вызывать ошибки. С базой 64 кодирование URL-адресов не требуется, но базовая 64-строка будет больше, чем исходная строка SVG.

Лого, используемое в анимации, взято из WikiMedia. Необходимо изменить содержимое SVG, чтобы удалить его черный фон. Полученный прозрачный логотип теперь можно проецировать по фону самого звездного поля.

В этом коде есть три анимации: вводный текст (A long time ago..), логотип Star Wars и фактический скроллер. Чтобы заставить их играть один за другим (без использования какого-либо JavaScript), все они должны занимать ровно 100 секунд, а ключевые кадры анимации реализуют задержки, необходимые для правильной последовательности воспроизведения. Этот метод также позволяет всем анимациям зацикливаться в конце проигрывания, для того чтобы прокрутить заставку заново.

Лого, используемое в анимации, взято из WikiMedia. Необходимо изменить содержимое SVG, чтобы удалить его черный фон. Полученный прозрачный логотип теперь можно проецировать по фону самого звездного поля.

Размеры и центровка

Все размеры текста и изображений указаны в процентах и ems , так что анимация хорошо проигрывается на любом размере экрана. Вертикальное центрирование элементов выполняется с использованием преобразований CSS 3:

Таким образом, элементы анимации центрируются на экране, даже когда размер экрана изменяется во время анимации.

Вот и все. Надеюсь статья Вам понравилась. Многие другие идеи для анимации на своем сайте вы можете найти в моем блоге, а также портфолио.

Подпишитесь на блог

В блоге

  • CSS
  • Pixel Perfect
  • UI\UX
  • Адаптивная верстка
  • Анимация
  • Бизнес
  • Верстка
  • Достижения
  • Идеи
  • Интернет-магазин
  • Кейс
  • Лендинг
  • Обзор
  • Написание кода
  • Примеры работ
  • Разработка
  • Разработка сайта
  • Результат
  • Сайт
  • Стоимость
  • Тестирование
  • Успех
  • Чек лист