Анимация появления блоков при скролле CSS

Stasmotion
На сайте с 16.11.2011
Offline
138
530

Никак не могу найти уроки как правильно делать анимацию появления объектов при скролле. Единственное что выдает поисковик это вот такую приблуду https://daneden.github.io/animate.css/

Работает конечно, но как по мне очень кустарно, т.к. приходится прям в html прописывать задержки и прочее.

А вот на этом сайте вижу все непосредственно через ccs делается https://senetsy.ru/ - что это за прием и где почитать про него?

Комплексное SEO продвижение сайтов, полная отчетность Настройка и ведение Яндекс.Директ
Антон Лавеев
На сайте с 31.10.2005
Offline
408
#1
☠️☠️☠️
KianoT
На сайте с 04.04.2012
Offline
91
#2
Stasmotion:
Никак не могу найти уроки как правильно делать анимацию появления объектов при скролле.

Примеры

https://github.com/terwanerik/ScrollTrigger

https://github.com/michalsnik/aos

https://github.com/crazychicken/t-scroll

Stasmotion:

А вот на этом сайте вижу все непосредственно через ccs делается https://senetsy.ru/ - что это за прием и где почитать про него?

Судя по всему, приём заключается лишь в том, что скрипт запускает css анимацию в видимой области экрана.

NT
На сайте с 22.12.2014
Offline
35
#3
Stasmotion:
Никак не могу найти уроки как правильно делать анимацию появления объектов при скролле. Единственное что выдает поисковик это вот такую приблуду https://daneden.github.io/animate.css/
Работает конечно, но как по мне очень кустарно, т.к. приходится прям в html прописывать задержки и прочее.

Animate.css это лучший сборник анимаций с помощью css на данный момент. Это просто набор классов которые при добавлении к DOM элементу анимируют его с заданными параметрами. То есть она "с коробки" не обещает анимировать при скролле.

Не знаю где вы там увидели добавление задержки и прочего в html, скорее всего просто не поняли для чего он нужен.

По теме, только с animate.css не получится делать анимацию при скролле. Нужен скрипт/плагин который будет детектить что объект находится в поле зрения и вешать на него класс. В свое время пользовался wow.js, читайте, поможет, а может и свежее что-то найдете, главное понять что как работает и должно работать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий