Программа «Генератор CSS-слайдшоу (Keyframer)»

Теги: Программирование, Программы, Delphi

Одной из замечательных возможностей CSS 3 стала анимация по ключевым кадрам. Когда мы узнали об этой технологии, мы начали применять ее в некоторых наших проектах. Особенный интерес представляло создание послайдовых анимаций, - плавной смены наложенных друг на друга блоков. Без применения каких-либо скриптов, используя только возможности CSS. Однако, создать послайдовую анимацию средствами CSS довольно сложно - нужно рассчитать время, спустя которое каждый слайд будет сменять предыдущий, указать в правильной последовательности стили z-index и время начала анимации. Для упрощения этих рассчетов пришлось сделать заготовку в виде электронной таблицы.

Электронная таблица для CSS анимации

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

Программа позволяет выполнить все необходимые рассчеты, исходя из заранее заданных значений. Она генерирует стили анимации для каждого из слайдов, а также стили ключевых кадров автоматически. Для её использования требуется указать следующие данные:

  • Количество слайдов анимации.
  • Продолжительность анимации (время, за которое будут показаны все слайды).
  • Коэффициент длительности переходов - параметр, определяющий отношение продолжительности показа одного слайда и продолжительности перехода между слайдами. Если требуется сделать переход мгновенным, нужно установить этот параметр равным 0; значение 0.5 означает, что длительность показа слайда будет равна длительности перехода между слайдами.
  • Первый слайд - номер слайда, с которого начинается анимация.
  • Стили анимации - параметр, состоящий из четырех значений
    • Начало появления
    • Конец появления
    • Начало исчезания
    • Конец исчезания
    Определяет CSS-стили для каждого из состояний слайда. Например, можно установить стиль начала появления left: -100%, конца появления left: 0, тогда каждый слайд будет выдвигаться из-за левого края слайдшоу при появлении. Можно комбинировать стили, указав сразу несколько значений, например, так:
    Код на языке css:
    Начало - left: -100%, transform: scale(0.5), opacity: 0
    Конец - left: 0, transform: scale(1), opacity: 1
    Слайды будут медленно проявляться, увеличиваясь и выдвигаясь из-за левого края слайдшоу.
  • Название анимации - некоторое символьное обозначение, применяющееся для будущих классов, id и наименований анимации в CSS файле.

Для обеспечения кроссбраузености генерируются как обычные стили, так и стили с приставкой -webkit.

Keyframer

Нажимаем на кнопку "Генерировать", и в нижних текстовых областях появляется сгенерированный CSS код, который остается только вставить в файл стилей страницы, назначив необходимые классы и id элементам слайдшоу.

css_slideshow.zip (234kb) Программа Keyframer. Исполняемый файл
Автор: SpectreZ Работа над проектом: 2016 год
+
Фильтрация по тегам
Выбранные теги отобразятся в этой области...
Найти
Программирование 38, Игры 16, Программы 12, Delphi 29, Библиотеки 15 Веб-разработка 23, Сайты под ключ 7, Дизайн 22, JavaScript 5, PHP 0, Laravel 0, Joomla 2 Графика 30, Обработка фото 6, Логотипы 2, Иллюстрации 7, Рисунки 3, Печатная продукция 2 Видео 11, Трейлеры 1, Анимация 3 Музыка 3, Персонажи 8, Статьи 7, Литература 5, Рассказы 4, Стихи 1, 2D 5, 3D 20, На заказ 10
Используйте среднюю кнопку для быстрого фильтра по тегу...
Календарь проектов
2015 7 , 2016 6 , 2014 3 , 2010 5 , 2011 1 , 2013 2 , 2012 1 , 2009 3 , 2017 3 , 2018 1