Плавна анімація при прокручуванні сторінки за допомогою CSS3 та jQuery - блог Indigo
Сьогодні ми покажемо вам один із численних способів оригінально прикрасити сайт, використовуючи CSS3 та jQuery. Подібну плавну анімацію елементів під час прокручування сторінки можна зустріти у деяких мобільних додатках, у стрічках новин і навіть на сайтах-візитках. Якщо увімкнути фантазію, можна знайти безліч корисних варіантів застосування такого ефекту - для фотографій, списку товарів і т. д. Приступимо!
Зверніть увагу
Почнемо з підключення необхідних бібліотек – основного файлу та плагіна jQuery.appear, за допомогою якого ми реалізуємо появу елемента при попаданні його у видиму область браузера. Файл jquery.appear.js знаходиться у папці з уроком.
Після цього можна приступати до написання коду. Для того щоб при появі на екрані об'єкта (назвемо його feed) спрацьовувала CSS-анімація, потрібно динамічно додавати до нього ім'я класу (назвемо його appeared), коли він потрапляє в зону видимості:
У файлі style.css ми вкажемо зовнішній вигляд та початковий стан об'єкта, задавши йому певні налаштування transform і сховавши його властивістю opacity з нульовим значенням:
І при попаданні об'єкта в зону видимості (appeared) він буде плавно з'являтися, приймаючи наступні значення transform і opacity:
Ви можете урізноманітнити та прикрасити ваш сайт схожою плавною анімацією при прокручуванні сторінки за допомогою CSS3 та jQuery. Ми сподіваємося, що цей простий урок стане вам у нагоді. Бажаємо творчих успіхів!