Знаете ли вы похожую библиотеку transform-анимации изображений при скролле страницы?
В данном рефе: https://www.exoape.com/work/pixelflakes есть блок с анимируемыми картинками (см. скрин). Хочу также, но велосипедить не хочется с скроллами и трансформами.
Может кто встречал библиотеку с помощью которой это реализовано или похожую?
Дополнительно:
Как реализовать пролистывание блока при прокрутке с учётом скролла страницы?
- В той статье приводятся достаточно крупные библиотеки, мне кажется есть что-то более мелкое. По крайней мере использовать greensock для такой анимации я бы точно не стал.
- Adel Abuhasira,
В той статье приводятся достаточно крупные библиотеки, мне кажется есть что-то более мелкое.
https://locomotivemtl.github.io/locomotive-scroll/ тоже нет?
- Adel Abuhasira, так в вашем примере как раз gsap и scrolltrigger. Как вариант использовать только scrolltrigger, а трансформации делать вручную
- its2easyy, хм, не заметил там от него ничего у них в реализации, но может плохо смотрю, да и вообще gsap привык где-то в более сложных проектах использовать. Ну ок, сделаю в нем. Спс.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, существует несколько библиотек, которые могут помочь вам создать анимацию изображений при скролле страницы. Одной из таких библиотек является AOS (Animate On Scroll).
AOS - это библиотека JavaScript, которая позволяет добавлять анимации к элементам при прокрутке страницы. Она поддерживает различные виды анимаций, включая анимацию изображений.
Для использования AOS вам нужно подключить библиотеку к вашему проекту и добавить специальные атрибуты к элементам, которым вы хотите добавить анимацию. Например, вы можете добавить атрибут data-aos="fade-up" к изображению, чтобы сделать его появление снизу при прокрутке страницы.
Пример использования AOS для анимации изображения:
<title>AOS Example</title> <img src="image.jpg" data-aos="fade-up" data-aos-duration="1000"> AOS.init();<title>AOS Example</title> <img src="image.jpg" data-aos="fade-up" data-aos-duration="1000"> AOS.init();
Помимо AOS, вы также можете рассмотреть другие библиотеки, такие как ScrollReveal, ScrollMagic или WOW.js, которые также предоставляют возможность добавления анимаций при скролле страницы. Каждая из этих библиотек имеет свои особенности и возможности, поэтому выбор зависит от ваших потребностей и предпочтений.