Появление элементов при скролле

Подписывайтесь мой Telegram и VK

Demo

Делаем эффект появления контента при скролле.

HTML

<section>
 <article class="anim left">
  <h1>Заголовок 1</h1>
  <p>Интересный роль дальнейших количественный позиций, условий. Разработке собой проверки рамки условий активизации. Также в формировании модель намеченных подготовки заданий активности организации развития. Административных плановых же оценить позволяет дальнейших реализация развития. Обучения реализации таким сфера нашей значение реализации количественный сложившаяся важны.</p>
 </article>
</section>
<section>
 <article class="anim right">
  <h1>Заголовок 2</h1>
  <p>Высшего повседневная проверки по практика важные форм занимаемых административных высшего собой формировании соображения сфера также требуют структура рост по эксперимент постоянный дальнейших в в организации формировании форм условий задания реализации нашей активизации. Эксперимент административных направлений в задач. Высшего финансовых ж.</p>
 </article>
</section>
<section>
 <article class="anim custom">
  <h1>Заголовок 3</h1>
  <p>Деятельности позволяет и условий особенности условий также высшего соответствующий кадров нашей собой существенных прогрессивного и количественный развития. Порядка, новая собой соответствующий задания деятельности сфера идейные играет структура эксперимент высшего рамки играет направлений практика сфера деятельности и нашей оценить деятельности образо.</p>
 </article>
</section>

Добавляем кастомные классы элементам, которые будут появляться когда мы доскролим до его. В нашем случае это будут: anim, left, right, custom
anim – как будет отображаться элемент, когда он появиться. Тут же и будет задана плавность анимации.
left – элемент будет появляться слево
right – элемент будет появляться справа
custom – элемент будет появляться скейлом (увеличиваться)

CSS

.anim{
    transition: transform 1s, opacity 1s;
}
.left{
    transform: translateX(-200px);
    opacity: 0;
}
.right{
    transform: translateX(200px);
    opacity: 0;
}
.custom{
    transform: scale(0.1);
    opacity: 0;
}

JS

window.addEventListener('DOMContentLoaded', () => {

    function onEntry (entry, getClass){
        entry.forEach( (change)=>{
            if(change.isIntersecting) {
                change.target.classList.remove(getClass);
                change.target.classList.add('animated');
            }
        });
    }
    
    function startAnimation(getClass) {
        const elements = document.querySelectorAll(`.${getClass}`)
        elements.forEach(element => {
            let observer = new IntersectionObserver((e)=>{
                onEntry(e, getClass);
            }, {threshold:[0.7]});
            observer.observe( element );
        });
    }

    startAnimation("left");
    startAnimation("right");
    startAnimation("custom");

});

startAnimation – Функция принимает название класса элементов, которые будут появляться.

onEntry – функция принимает элемент и название элемента, который удалит.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)