Шоу прокрутки (часть 3 AOS)

Шоу прокрутки (часть 3 - AOS)

И как только мы познакомимся с основами таких эффектов, давайте применим анимации с помощью AOS..

Анимации с AOS

AOS означает «Анимация при прокрутке». В основном это то, что мы писали в прошлый раз. Тогда зачем загружать дополнительные 20 КБ JS, когда у нас есть 20-30 строк, выполняющих ту же работу? Потому что на самом деле AOS делает больше.

AOS — это библиотека, над разработкой которой кто-то работал гораздо усерднее, чем мы. Он также был протестирован тысячами. За последний месяц его скачали почти 80000 раз и только через npm (вероятно, есть люди, которые скачали его прямо с GitHub)..

Помимо охвата наших функций, он спроектирован таким образом, чтобы легко настраивать атрибуты данных непосредственно в HTML, поддерживает функции замедления и работает в обратном направлении (при прокрутке вверх он снова скрывает элементы с помощью анимации). И это лишь самые основные преимущества.

Переход на AOS

Скопируем наши файлы по предыдущему пути, удалив файл functions.js (он нам не понадобится), а также стили animate.css. AOS поставляется со своими собственными стилями, но если по какой-то причине вы хотите использовать Animate.CSS, AOS позволяет использовать несколько дополнительных настроек..

Добавим код самой AOS. Я использовал npm, поэтому у меня также есть исходные файлы и зависимости, но вы можете просто использовать CDN, описанный ниже на http://michalsnik.github.io/aos/.

Затем давайте удалим все ожидающие классы, которые мы добавили к элементам, и вместо этого добавим data-aos = "fade-up".

Инициализировать анимацию с помощью AOS

Чтобы увидеть какие-либо анимации в данный момент, нам нужно инициализировать AOS.

Для этого просто добавьте внизу страницы (перед закрывающим тегом / body):

сценарий>
AOS.init (); / скрипт>

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

Читать также:  Что такое параллакс

Задержка анимации для последовательных элементов

Удалите часть CSS, которая у нас была для них:

.feature__item.animated: nth-child (2) {задержка анимации: 200 мс; } .feature__item.animated: nth-child (3) {задержка анимации: 400 мс; }
.media.animated {задержка анимации: 200 мс; }
.column__item.animated: nth-child (2) {задержка анимации: 200 мс; }

Ко второму и третьему .feature__item мы можем добавить в разметке data-aos-delay = "150" и data-aos-delay = "300" соответственно..

data-aos-delay = "150" мы также добавляем ко второму элементу .column__item.

Когда у нас много последовательных элементов

Однако мы снова приходим в нашу галерею с 16 картинками. Как и раньше, мы не хотели добавлять к ним задержку вручную, теперь это повторяется с AOS..

В большинстве случаев, если мы сделаем что-то подобное, мы, вероятно, будем использовать PHP-код, и тогда установить атрибут не составит труда. У нас будет только одна переменная, которая увеличивается на 150 каждый раз и будет применяться к каждому тегу. Однако мы здесь не используем PHP и будем искать другой метод..

Хотя JavaScript не является серверным языком, мы все же можем использовать его для создания разметки. Мы можем использовать document.write () для «написания» любого кода..

Удалите все li.gallery__item и откройте вместо них тег скрипта.

Сначала сгенерируем массив со всеми нужными нам номерами картинок (от 1 до 16)..

Мы можем использовать:

const indexes = Array.from (Array (16) .keys ());

Поскольку у нас есть вложенные и цепные функции, это может немного сбивать с толку. Начнем с изнанки:

Array (16) создает массив из 16 пустых элементов.

Когда цепочка nem .keys () к результату, она возвращает итератор, элементы которого являются индексами первого. Они, в свою очередь, представляют собой числа от 0 до 15..

Мы хотели от 1 до 16, но мы легко можем добавить 1 при печати числа..

Тот факт, что .keys () возвращает не массив, а итератор для нас, означает, что нам нужно его преобразовать. Мы делаем это с помощью Array.from ().

Читать также:  Активное состояние меню блога при чтении сообщения блога

Шаблонные литералы

Они были официально утверждены в качестве синтаксиса JavaScript в 2015 году, поэтому не все еще полностью привыкли к ним..

Они представляют собой запись строки, внутри которой мы можем напрямую включать переменные, которые JS заменит их значениями..

Итак, если у нас есть переменная age = 18, тогда

var предложение = `В Болгарии вам должно быть $ {age} лет, чтобы уметь водить машину`;

присваивает значение предложению переменной, где $ {age} заменяется на 18.

Важно использовать обратные кавычки вместо обычных одинарных или двойных кавычек (‘, "):` `’ (клавиша расположена чуть ниже Esc на клавиатуре).

В принципе, мы можем добиться того же, просто:

var предложение = "В Болгарии вам должно быть" + возраст + "лет, чтобы уметь водить машину";

Но постоянно открывающие и закрывающие котировки могут немного раздражать. Кроме того, существуют другие особые ситуации, в которых использование простых кавычек и конкатенации может привести к написанию еще большего количества кода..

А теперь в document.write () приведем следующий аргумент:

indexes.map (ключ =>
`li class =" gallery__item "data-aos =" fade-up "data-aos-delay =" $ {(ключ% 4) * 150} ">
img width = "420" height = "420" src = "галерея — $ {(key + 1) .toString (). padStart (2, ‘0’)}. jpg" alt = "cloud" />
/ li> `) .join (»)

Здесь могут потребоваться дополнительные пояснения:

indexes.map означает, что мы просматриваем каждый элемент индексов массива, и для просканированного значения мы выполним некоторый код. Этот код должен вернуть результат, который затем будет использован для построения нового массива..

Итак, если бы у нас было const incremented = indexes.map (key = key + 1), тогда при увеличении был бы новый массив со значениями от 1 до 16 (как мы изначально хотели), потому что для каждого значения индексов он будет добавлен 1 и скомпилируйте новый массив с этими значениями.

Читать также:  Начало работы с CSS

Большая часть литерала шаблона — это необходимый нам HTML-код, поэтому мы не будем его объяснять..

Для data-aos-delay у нас есть (ключ% 4) * 150. Почему мы модульно делим на 4 вместо прямого умножения на 150? Потому что раньше каждая картинка должна была отображаться с задержкой по сравнению с предыдущей. Однако в AOS изображения не связаны друг с другом, и при прокрутке на экране одновременно появляются 4 изображения. Итак, для 2-го, 3-го и 4-го мы должны добавить задержку в 150, 300 и 450 миллисекунд соответственно..

Но при прокрутке еще ниже в следующей строке не должно быть 600, 750 и т. Д. задержка в миллисекундах, так как мы будем ждать несколько секунд до 4-й строки, пока не появятся фотографии.

Pad String

Для пути к самим фотографиям у нас есть (key + 1) .toString (). PadStart (2, ‘0’).

Часть + 1 ясна — мы делаем это, потому что у нас есть массив от 0 до 15 (извините, если меня раздражает то, что я повторяю его в третий раз).

Затем мы убеждаемся, что число обрабатывается как текст функцией .toString (). Это необходимо, потому что следующая функция работает с текстом, а не с числами. Эта функция padStart () позволяет набирать текст короче определенного количества символов, вначале повторять столько раз другой символ, чтобы он достиг необходимой длины.

Другими словами — для числа с 1 цифрой мы можем добавить 0 впереди (потому что так мы назвали картинки).

И, наконец, после всего этого у нас есть .join (»). Этот .map (), который мы создали, возвращает массив HTML-кода для каждого изображения. Чтобы отобразить его на экране, мы вставляем каждый из элементов массива, используя пустую строку (") для" приклеивания "..

Пример

Наконец-то у нас есть https://magadanski.com/demo/parallax-aos/.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?