Delighter.js – это крошечная библиотека JavaScript. Добавьте анимацию CSS, чтобы радовать пользователей при прокрутке вниз. от Q42. Разработан компанией Martin Kool.

Плагин GitHub Демо GitHub

Демонстрация онлайн
В этой демонстрации я объединил deligters.js и bigpicture.js.
Более подробную информацию о bigpicture.js смотрите здесь

Шаг 1.
вставьте библиотеку javascript в тело

Шаг 2:

DOM содержит несколько разделов.
Первый раздел ниже:

Чтобы применить Delighters.js / нам нужно добавить атрибут data-delighter в тег

Второй раздел, ниже которого применен bigpicture.js :

для bigpicture.js требуется атрибут data-bp.
и js ниже

Третий раздел:

Это раздел со списком.

4-й раздел:

5-й раздел:
нижний колонтитул

Шаг 3:
проверьте стиль css на github

О восхитительном.js
настройка по умолчанию:

options = {

attribute: 'data-delighter',

classNames: ['delighter', 'started', 'ended'],

start: 0.75, // default start threshold

end: 0.75, // default end threshold

autoInit: true // initialize when DOMContentLoaded

}

Пользовательский：

Delighters.config({

// set the default start threshold at the bottom

start: 1,

// let's call Delighters.init() manually later

autoInit: false

// ... etc ...

})

Демо проверить на GitHub