Scrollreveal.js — это библиотека javascript, которая полностью реагирует и анимирует элементы при прокрутке страницы, которая зависит от области просмотра.
Библиотека Scrollreveal Github API
Шаг 1:
свяжите файл scrollreveal.js внизу текста
Шаг 2.
HTML
В заголовке есть изображение и прокрутка GIF.
И 29 div в контейнере.
Шаг 3.
CSS
Стрелка прокрутки gif CSS
LAYOUT основан на гибкости.
И у каждого изображения оружия есть фон с анимацией.
При наведении будет добавлен черный фильтр.
Информация отображается при наведении курсора на изображение.
При наведении курсора заголовок подчёркивается.
Для адаптивных сайтов, таких как телефон, это будет другой стиль
Шаг 4:
JS
инициализировать библиотеку
window.sr = ScrollReveal();
sr.reveal(‘.reveal’);
There are 5 options/animations for reveal method:
options.delay is the time before reveal animations begin. By default, delay will be used for all reveal animations, but options.useDelay can be used to change when delay is applied. However, animations triggered by options.reset will never use delay.
options.distance определяет, насколько далеко перемещаются элементы при раскрытии.
options.duration определяет продолжительность анимации.
options.easing управляет переходом анимации между начальным и конечным значениями.
options.interval – это время между раскрытиями.
// Изменение при рассмотрении элемента в области просмотра. Значение по умолчанию
// 0,20 означает, что 20% элемента должно быть видимым, чтобы произошло его раскрытие.
viewFactor: 0,2
viewOffset: { сверху: 0, справа: 0, снизу: 0, слева: 0
viewOffset изменяет границы контейнера, используя пиксели.viewFactor изменяет границы элементов, используя проценты.
Пример Github здесь
