nakodil.siteАнимация при скролле для сайта: примеры с промптами
Блоки, текст и картинки появляются по мере прокрутки. Топ вариантов по закладкам и установкам и промпт для Claude Code.
12 вариантовпо рейтингу: популярность в источнике, темп и спрос
-
21st.dev
Текст, который проявляется по словам при скролле
Абзац сначала почти не виден, и при прокрутке слова одно за другим становятся чёрными. Подходит для блока с главной мыслью или манифестом.
-
21st.dev
Стопка карточек отзывов, которая раскрывается при прокрутке
Карточки отзывов лежат стопкой и по очереди выезжают вперёд, пока посетитель листает страницу. Подходит для блока отзывов или кейсов.
-
21st.dev
Галерея в перспективе, которая выезжает при прокрутке
Под заголовком лежит сетка изображений в перспективе, и при прокрутке она плавно разворачивается к зрителю. Подходит для первого экрана портфолио или каталога.
-
21st.dev
Текст, который проявляется по словам при прокрутке
Абзац сначала бледный, а при прокрутке слова по очереди наливаются цветом. Подходит для блока «О себе» или манифеста продукта.
-
21st.dev
Футер с радужным свечением, которое растёт при прокрутке
Когда посетитель докручивает до низа страницы, из-под футера поднимается размытая радуга. Подходит, чтобы красиво закончить лендинг.
-
21st.dev
Галерея, где карточки едут по кругу при скролле
Названия и картинки движутся по двум дугам, пока страница закреплена на месте, и каждая работа по очереди выходит в центр. Подходит для портфолио или списка проектов.
-
21st.dev
Текст, который проявляется при прокрутке
Абзац сначала почти прозрачный, а при прокрутке слова одно за другим становятся тёмными. Хорошо работает для блока «о нас» или манифеста между секциями.
-
Spline
Первый экран из слоёв картины с параллаксом в Spline
Классическая живопись разрезана на слои, которые сдвигаются с разной скоростью, а по центру стоят заголовок и кнопка. Подходит для студии или бренда с выразительной подачей.
-
21st.dev
Блок с картинкой, которая меняется при прокрутке
Слева закреплена картинка, справа идут пункты текста, и при прокрутке к каждому пункту картинка сменяется. Удобно показывать по шагам, как работает продукт.
-
21st.dev
Блок с закреплённой картинкой, которая меняется при скролле
Слева при прокрутке сменяются заголовки, текст и кнопка, а картинка справа остаётся на месте, увеличивается и меняется. На телефоне блоки встают друг под друга.
-
21st.dev
Стопка карточек, которые листаются при прокрутке
Карточки с картинками лежат стопкой, при прокрутке или свайпе следующая выезжает вперёд, а задние уменьшаются и размываются. Внизу точки для переключения.
-
21st.dev
Текст, который проявляется по словам при скролле
Абзац сначала серый и бледный, а при прокрутке слова по очереди загораются. Подходит для блока с главной мыслью или манифестом.
Новые ролики и разборы — в TelegramПишу, как я делаю свои ролики, и добавляю сюда новые скиллы.
Открыть канал