Дано: простенький адаптивный сайт на Yii+vue. В БД лежит 200 статей, всего предполагается до 500. Логики на сайте никакой, тупо собираются данные из базы и отрисовываются в шаблон. Бэк собирает основной шаблон с "заставкой", потом фронт через запрос получает данные по остальным статьям и отрисовывает их (vue.js). Каждая статья - примерно страница текста и 1-5 фото. Бэк, верстка, стили есть.
Задач две:
1. Самая главная. Анимировать скролл на странице вот так:
https://codepen.io/GreenSock/pen/BaowPwo (предполагается gsap scrollTrigger, но можно обсудить). Сразу уточняю, что в примере по ссылке все блоки одного размера и высотой в один экран. В реальности они будут где-то в один экран, а где-то и в несколько. Т.е. должны скроллится не только сами блоки, но и их контент.
2. Добавить lazy load изображений. Фото в статьях должны подгружаться по мере скролла страницы.
Самое главное требование - плавность анимации и быстродействие. Спецэффекты не должны тормозить и, тем более, завешивать браузер. Само собой, при изменении количества статей или контента в них, анимация не должна рассыпаться.
Поддержка: только современные браузеры, не больше 2-3 версий. Предполагается, что в дальнейшем будет использоваться history API и возможно Intersection observer, поэтому все старые браузеры сразу отсекаем.
Задачу срочная, актуально по сути до понедельника.
Просьба к исполнителям без реальных знаний и опыта работы с gsap не беспокоить. Несмотря на то, что в доках есть масса примеров кода, задача не решается в лоб. Давайте не будем тратить время друг друга.
