Як анімувати елементи при прокручуванні сторінки.

Всім привіт! У цій статті ми розглянемо, як створювати анімації при прокручуванні сторінки на чистому jаvascript.

опис

Для створення ефектів ми будемо використовувати бібліотеку ScrollTrigger.js. Вона дозволить вам дуже просто додати анімації при прокручуванні сторінки на ваш сайт. Давайте розглянемо, які у неї особливості.

Відео: CSS анімація елементів при прокручуванні сторінки. Відео урок

Особливості

Всі анімації побудовані на класах, тому ви можете отримати вигоду, яку дають вам CSS3 анімації
Бібліотека написана повністю на чистому jаvascript
використовує метод window.requestAnimationFrame, тому анімації викликаються тоді, коли браузер готовий до цього
Простий синтаксис. Ви визначаєте опції всередині html атрибута і вам більше не потрібно звертатися до jаvascript, після того, як ви провели ініціалізацію
Бібліотеку легко можна налаштувати під себе, додати або змінити функціонал
Підтримує як горизонтальний, так і вертикальний режим роботи
OpenSource

Подивитися, як це працює, ви можете тут, а вихідні знаходяться тут.

Як це працює

Щоб привести бібліотеку в дію, вам потрібно зробити два наступні прості кроки:

Підключіть необхідний файл і запустіть скрипт.

Ви можете провести більш точну настройку.

Відео: Оригінальна поява блоків на що продає сторінці при прокручуванні

document.addEventListener(`DOMContentLoaded`,function() { 
var trigger =newScrollTrigger({ 
 toggle:{ 
visible:`VisibleClass`, 
hidden:`HiddenClass` 
}, 
 offset:{ 
x:0, 
y:20 
}, 
 addHeight:true, 
 once:true 
}, document.body, window) - 
}) -

додайте data-scroll атрибут в HTML-елемент, який ви хочете анімувати.

data-scrollgt;

Коли ви прокручуєте сторінку і елемент стає видимим для вікна перегляду, скрипт додасть клас visible. Коли елемент виходить з області видимості, буде додано клас invisible. Тепер ви можете налаштувати класи так, як вам потрібно:

Відео: Анимированное збільшення чисел при прокручуванні сторінки

// БАЗОВИЙ ПРИКЛАД 
.invisible { 
 transition: opacity 0.5s ease- 
 opacity:0.0- 
} 
 
.visible { 
 transition: opacity 0.5s ease- 
 opacity:1.0- 
}

висновок

Отже, сьогодні ми розглянули, як анімувати елементи при прокручуванні сторінки. Більш детальну інформацію щодо налаштування ви можете знайти на сайті розробника.

Дякую за увагу!

Поділися в соціальних мережах:

Схожі