Октябрь 29, 2019 Запись была обновлена
Оригинальный эффект для лендинга при скролле
Вчера я только написал статью о том, как создать анимацию рисования элементов на странице во время прокрутки страницы. Смотрится просто шикарно! Сегодня я продолжу тему анимации при прокрутке и создание интерактива. С помощью одной интересной библиотеки я создал анимацию появляющихся блоков при прокрутке страницы. Чтобы Вам не читать большие тексты с кодом, на этот раз я сделал видеоинструкцию.
Интересные способы анимации на лендинге:
- Рисование элементов при прокрутке страницы
- Анимация для лендинга — создание анимации на лендинге
- Как сделать видео фоном сайта + видеостоки
Суть эффекта: при прокрутке страницы появляются блоки с оригинальным эффектом. Аналогичная анимация происходит и при прокрутке в обратном направлении.
Не спеша прокручивайте страницу вниз и смотрите на появляющиеся блоки:
Посмотреть примерСкачать
Полный мини-курс по созданию лендинга с нуля: "Лендинг за 60 минут".
Скриншот появления третьего блока:
Видео с разбором исходного кода
Как установить и настроить анимацию при прокрутке я рассказал в данном видео:
Все вопросы по анимации Вы можете задать ниже в комментариях либо в Skype, для нужно — ЗАПИСАТЬСЯ!
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Здравствуй Юрий, то что нужно. Я смотрел, есть другая реализация, но этот вариант лучше и проще.
Спасибо, Егор! Надеюсь с помощью видео легче разобраться в коде 🙂 .
Приветствую, Вас! Да боковые колонки полезная вещь для продающей странички. Но вот вопрос: не повлеяет установка этих блоков на скорость загрузки странички?
Здравствуйте, Рубен!
На скорость загрузки влияет только сам скрипт, но сам скрипт очень легкий (5.9 Кб).
Нет нормального индикатора прокрутки и получается, что не совсем понятно, работает ли колесо мышки или нет!
Индикатор загрузки находится в браузере справа и никуда не исчезает.
На мобильной версии кнопка "оформить заказ" видна сразу — печально)))
Добрый день, Анжела!
Это лишь пример того, что вы можете создать с помощью библиотеки TweenMax. Данный пример вы можете взять за основу и доработать по-своему желанию.
Юрий, ты крут! Добавила твой сайт в свои закладки!
Спасибо, Татьяна! Рад, что материалы сайта приносят пользу 🙂 .