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

Share
06.12.2017
Заставка Star Wars на чистом CSS 3 • Создание и продвижение сайтов
Содержание

    Вступление

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

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

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

    Заставка Star Wars на чистом CSS 3 • Создание и продвижение сайтов

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

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

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

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

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

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

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

    Заставка Star Wars на чистом CSS 3 • Создание и продвижение сайтов

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

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

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

    В блоге

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