Лого www.SiteHere.ru

Оригинальный эффект для лендинга при скролле

Вчера я только написал статью о том, как создать анимацию рисования элементов на странице во время прокрутки страницы. Смотрится просто шикарно! Сегодня я продолжу тему анимации при прокрутке и создание интерактива. С помощью одной интересной библиотеки я создал анимацию появляющихся блоков при прокрутке страницы. Чтобы Вам не читать большие тексты с кодом, на этот раз я сделал видеоинструкцию.

Интересные способы анимации на лендинге:

Суть эффекта: при прокрутке страницы появляются блоки с оригинальным эффектом. Аналогичная анимация происходит и при прокрутке в обратном направлении.

Не спеша прокручивайте страницу вниз и смотрите на появляющиеся блоки:

Посмотреть примерСкачать

Полный мини-курс по созданию лендинга с нуля: "Лендинг за 60 минут".

Скриншот появления третьего блока:

Появление третьего блока

Видео с разбором исходного кода

Как установить и настроить анимацию при прокрутке я рассказал в данном видео:

Все вопросы по анимации Вы можете задать ниже в комментариях либо в Skype, для нужно — ЗАПИСАТЬСЯ!

Успехов!

С Уважением, Юрий Немец

Оригинальный эффект для лендинга при скролле 4.00/5 (80.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

8 комментариев к записи
  • Егор

    Здравствуй Юрий, то что нужно.  Я смотрел, есть другая реализация, но этот вариант лучше и проще. 

     
    • Юрий

      Спасибо, Егор! Надеюсь с помощью видео легче разобраться в коде 🙂 .

       
  • Рубен Хуснутдинов

    Приветствую, Вас! Да боковые колонки полезная вещь для продающей странички. Но вот вопрос: не повлеяет установка этих блоков на скорость загрузки странички?

     
    • Юрий

      Здравствуйте, Рубен!

      На скорость загрузки влияет только сам скрипт, но сам скрипт очень легкий (5.9 Кб).

       
  • artemmian

    Нет нормального индикатора прокрутки и получается, что не совсем понятно, работает ли колесо мышки или нет!

     
    • Юрий

      Индикатор загрузки находится в браузере справа и никуда не исчезает.

       
  • Анжела

    На мобильной версии кнопка "оформить заказ" видна сразу — печально)))

     
    • Юрий Немец

      Добрый день, Анжела!

      Это лишь пример того, что вы можете создать с помощью библиотеки TweenMax. Данный пример вы можете взять за основу и доработать по-своему желанию.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *