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 анимации. Об этом я расскажу уже в следующей статье.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree