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

У цій статті ми розглянемо, як можна зробити плавну появу елементів під час прокручування сторінки.

Ми будемо використовувати css та трохи нативного js, без використання сторонніх бібліотек. Пристебніться!

Ви, напевно, бачили на багатьох сайтах красиву анімацію, де блоки з’являються в той момент, коли ви до них доскролили. Іноді вони з’являлися знизу вгору, іноді ліворуч, а іноді незрозуміло навіть як. Я покажу вам, як це робиться.

Анімація при скролі: створюємо html

Все починається з HTML. Давайте зробимо розмітку.

<div class="wrap">
  <div class="element-big green"></div>
  <div class="element-animation">
    <span>Елемент, що з'являється</span>
  </div>
  <div class="element-big red"></div>
</div>

Ми тут створили два великі блоки та між ними текст. Два великі блоки нам потрібні, щоб вийшов скролл сторінки.

Зараз додамо css для них та ви все зрозумієте.

Поява елементів під час прокручування сторінки: додаємо початковий CSS

У CSS ми, по-перше, задамо великим блокам висоту, щоб у нас на сторінці з’явився скролл. Це потрібно лише для демонстрації.

А по-друге, зробимо так, що в початковому стані елемент (наш текст) не буде видно, надалі він з’являтиметься, коли користувач доскролить до нього.

.green {
  background-color: green;
}
.red {
  background-color: red;;
}
/* Задаємо висоту великим блокам, щоб у нас на сторінці вийде скролл */
.element-big  {
  width: 100%;
  height: 1200px;
}
.element-animation {
  margin: 2rem 0;
  font-size: 3rem;
  
  /* Приховуєм елемент у початковому стані */
  opacity: 0;
}

Тепер перейдемо до JS – адже нам потрібно розуміти, коли користувач доскролив до потрібного елемента.

Поява контенту при скролінгу: працюємо з JS

Нам пощастило, веб не стоїть на місці і регулярно покращується, роблячи наше життя трішки простіше. Якщо раніше нам потрібно було сильно повозитися, щоб реалізувати плавну появу елементів при скролі сторінки, то тепер все стало набагато зрозумілішим.

Я не сильно заглиблюватимуся, якщо хочете, можете почитати окремо про Intersection Observer. За допомогою цього ми можемо відстежувати видимість елемента в умовному вікні користувача. І завдяки цьому ми можемо робити не тільки анімацію, а й, наприклад, відкладене завантаження, або “нескінченний” скролл.

Але повернемось до нашої теми. Вставимо в JS наступний код:

function onEntry(entry) {
  entry.forEach(change => {
    if (change.isIntersecting) {
      change.target.classList.add('element-show');
    }
  });
}
let options = { threshold: [0.5] };
let observer = new IntersectionObserver(onEntry, options);
let elements = document.querySelectorAll('.element-animation');
for (let elm of elements) {
  observer.observe(elm);
}

Тут ми чіпляємося за клас .element-animation і стежитимемо, чи доступний він на “екрані” чи ні. Зверніть увагу, що ви можете використовувати цей клас одразу до кількох елементів.

Отже, коли користувач доскролив до класу .element-animation, ми додаємо йому клас .element-show

Ось і все, що робить JS. Перевіряє чи видно клас і якщо так, то додає до нього ще один клас.

А тепер знаючи це, повернімося до CSS.

Поява елементів на сайті: заключний крок

У нас додається клас. Element-show до класу. Давайте зробимо його видимим. Для цього досить просто прописати в CSS наступне:

.element-animation.element-show {
  opacity: 1;
  transition: opacity 1s;
}

Ось і все, тепер наш блок буде видимим, коли до нього доскролить користувач.

Якщо хочете, ви можете зробити так, щоб елемент з’являвся знизу:

.element-animation {
  margin: 2rem 0;
  font-size: 3rem;
  
  /* Приховуєм елемент у початковому стані */
  opacity: 0;
  transform: translateY(100%);
}
.element-animation.element-show {
  opacity: 1;
  transition: all 1s;
  transform: translateY(0%);
}

Нічого складного. Ви можете експериментувати, додаючи різні варіанти до початкового стану, потім змінюючи їх на стандартні. Спробуйте, наприклад, погратись із transform: rotate(5deg).

See the Pen Появление элементов при прокрутке страницы by Pelegrin (@pelegrin2puk) on CodePen.

Видео

CSS Головоломки в Telegram

Підписуйся і не пропускай:

Актуальні новини

Цікаві завдання

Корисні добірки

Перейти до Telegram