CSSFadey: Автоматизированная галерея для сайта с плавным появлением изображений

CSSFadey: Автоматизированная галерея для сайта с плавным появлением изображений

От автора: не так давно я написал небольшой скрипт, автоматизирующий процесс создания адаптивной карусели изображений. Такую галерею можно создать и на чистом CSS, однако в таком случае при смене количества изображений пересчитывалась бы keyframe анимация. Мой метод на JavaScript сохраняет все преимущества производительности способа на чистом CSS при помощи широкого ряда опций при написании keyframe анимации.

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

Для каждого изображения должен быть заполнен атрибут alt; мы оставили его пустым для экономии места. Для достижения лучшего эффекта советую использовать атрибут srcset, w дескриптор и атрибут sizes:

Также необходимо добавить пару базовых стилей для форматирования изображений и контейнера галереи:

#fadey должен иметь 100% ширину от своего контейнера. Если #fadey это тег figure, то левый margin должен быть нулевым:

Скрипт добавляется в конец страницы:

Вызывается скрипт через:

Существует несколько возможных опций вызова функции, про которые я расскажу чуть ниже. Быстро пробежимся по стандартным настройкам:

presentationTime – время отображения каждого изображения на экране, измеряется в секундах (по умолчанию 3 секунды)

transitionTime – время перехода от изображения и изображению, также измеряется в секундах (по умолчанию 2 секунды)

fadeySelector — id контейнера изображений (по умолчанию это

с id=»fadey»). Можно задать свой элемент

cssAnimationName – название генерируемой скриптом keyframe анимации

fallbackFunction – JavaScript функция, которую вы хотите запустить, если браузер не поддерживает CSS анимацию

Скрипт проверяет, нужны ли браузеру вендорные префиксы для CSS анимации (в современных браузерах это уже редкость)

Скрипт создает анимацию для каждого изображения и помещает эти стили в самый низ страницы. Для анимации из 4 изображений с задержкой в 4 секунды для каждого и переходом в 2 секунды будет сгенерировано следующее:

Все изображения в контейнере запускают одну и ту же анимацию:

Так как абсолютное позиционирование изображений не будет влиять на высоту контейнера, то padding-top для него устанавливается в процентах. Данное значение в процентах высчитывается путем нахождения первого изображения в контейнере и деления его высоты на ширину:

Полное время анимации равно [количество изображений]*([ presentationTime]+[ transitionTime])

Каждому изображению задается значение animation-delay. При помощи nth-last-child сгенерированный CSS ведет отсчет с последнего изображения в контейнере (которое, из-за абсолютного позиционирования находится в самом верху стека изображений). Для примера выше будет сгенерирован следующий CSS код:

Если вы хотите вызвать скрипт со своими опциями по разметке:

Напишите следующий код:

Я создал демо на CodePen, которое вы можете дополнить. Единственный недостаток данного способа в том, что нет способа перепрыгнуть вручную с одного изображения на другое. Для добавления ручного управления необходимо будет воспользоваться Web Animation API, чтобы не понизить эффективность CSS анимации. Об этом я расскажу уже в следующей статье.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: