Появление картинок при прокрутке — полосы открывают фото

Что это за эффект

Пока картинка не дошла до экрана, её закрывают несколько полос цвета фона. Когда она показывается, полосы одна за другой уезжают: горизонтальные вбок, вертикальные вниз. Сама картинка в это время мягко опускается из лёгкого увеличения до обычного размера. В примере три картинки чередуют горизонтальные и вертикальные полосы, а в настройках можно выбрать что-то одно.

Это тот же приём, что в «Переходе полосами», только для отдельных картинок на странице. Анимации делает встроенный в браузер Web Animations API, а момент появления отслеживает IntersectionObserver, поэтому скрипт ничего не считает при прокрутке.

Где использовать

• Портфолио и кейсы: работы открываются по мере чтения.
• Статьи и истории с крупными фото между абзацами.
• Каталог: карточки товаров появляются эффектно, но без суеты.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу, «Скопировать код» — только стили, разметку и скрипт. Скрипт без зависимостей.

Оберните картинку в элемент с data-reveal и задайте ему размер:

<figure class="reveal" data-reveal><img src="photo.jpg" alt=""></figure>

createBandReveal(document.body, { direction: 'mixed', bands: 5 });

Полосы скрипт рисует сам. Их цвет задаёт CSS-переменная --reveal-color: поставьте её равной фону страницы, тогда картинка будет проявляться прямо из фона.

Настройки

• Полосы — по очереди, только горизонтальные или только вертикальные.
• Полос — сколько полос закрывают картинку.
• Длительность и задержка полос — сколько едет одна полоса и насколько позже трогается следующая.
• Приближение — с какого увеличения картинка опускается до обычного размера.
• Порог — какая часть картинки должна показаться, чтобы она открылась.
• Закрывать, когда уходит с экрана — картинка закрывается снова и открывается при каждом появлении.

Доступность и производительность

Картинки остаются обычными изображениями с подписями, полосы скрыты от скринридеров. Если в системе включено «Уменьшить движение», картинки открываются сразу, без анимации. Двигается только transform.

Частые вопросы

Почему полосы видны на фоне? Их цвет не совпадает с фоном страницы. Задайте --reveal-color таким же, как фон.

Можно ли открывать не картинки, а блоки с текстом? Да, data-reveal работает с любым элементом. Приближение тогда не применяется: оно только для картинок и видео.

Нужны ли библиотеки? Нет, всё делает одна функция примерно на 100 строк.