Идеи

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

Александр Рыбка 06:12:2017 303

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 секунд, а ключевые кадры анимации реализуют задержки, необходимые для правильной последовательности воспроизведения. Этот метод также позволяет всем анимациям зацикливаться в конце проигрывания, для того чтобы прокрутить заставку заново.

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

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

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

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

Видео