Вступление
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:
Таким образом, элементы анимации центрируются на экране, даже когда размер экрана изменяется во время анимации.
Вот и все. Надеюсь статья Вам понравилась. Многие другие идеи для анимации на своем сайте вы можете найти в моем блоге, а также портфолио.
