/ Дизайн / Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

HIT

05.02.2017

6400

1

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery.

Анимация колесика мышки

Создадим 2 div’а, scroll — это очертания самой мышки, scroll-doth — имитация кручения колеса.

<div id="scroll"><div id="scroll-doth"></div></div>

!Эти div’ы должны быть вставлены в слой у которого есть свойство position: relative; т.к. scroll будет позиционироваться относительно него.

Стили:

#scroll {
    width: 30px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 20px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -15px;
}

#scroll-doth {
    display: none;
    width: 6px;
    height: 6px;
    background-color: #fff;
    display: inline-block;
    border-radius: 5px;
    -o-transition: all 0.3s;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease 0s;
}

.doth-down {margin-top: 20px;}

И теперь самое ответственное, скрипт jQuery

// Анимирование Scroll Down
setTimeout(function run() {

    $('#scroll-doth').show(200);
    $('#scroll-doth').addClass('doth-down');
   
  setTimeout(function () { 
  
    $('#scroll-doth').hide(200);   
  
  }, 600); // Задержка исчезновения
  
  setTimeout(function () { 
  
    $('#scroll-doth').removeClass('doth-down'); 
  
  }, 600);

  setTimeout(run, 2000); // Интервал повторения
  
}, 2000); // Первый интервал срабатывания

Scroll Down в виде стрелки

Мы можем использовать в виде кнопки Scroll Down изображение стрелки, либо иконку стрелки FontAwesome. Мы будем использовать библиотеку эффектов анимирования Animated.

Верстка для данного случая:

<div id="scroll-arrow"><i class="fa fa-angle-double-down" aria-hidden="true"></i></div>

Стили:

#scroll-arrow {
    width: 30px;
    height: 50px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -15px;
}

#scroll-arrow .fa {margin: 0; font-size: 50px; color: #fff;}

Скрипт:

setTimeout(function run() {

    $('#scroll-arrow').addClass('animated slideInDown');
   
  setTimeout(function () { 
  
    $('#scroll-arrow').removeClass('animated slideInDown');   
  
  }, 1000);
  
  setTimeout(run, 2000); // Интервал повторения
  
}, 2000); // Первый интервал срабатывания

Ссылка на следующий блок

В обоих вышеперечисленных случаях можно на Scroll Down подвесить хэш-ссылку на следующий блок. При этом важно, чтобы переход на следующий слайд был плавным.

Если делаем Scroll Down на первом экране до следующего блока. Можно сделать универсальную ссылку на следующий невидимый блок, чтобы не привязывать к ID конкретного блока, который может меняться на разных сайтах.

<a href="#toscroll"><img src="/wp-content/uploads/2021/01/scroll-mouse-light-b.gif"></a>

<div id="toscroll"></div>

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

Multi-page landing

Multi-page landing

Мультилендинг — это по сути лэндинг с изменяемыми частями контента в зависимости от запроса (рекламных объявления) фактического URL через который мы попадаем на него. Могут меняться заголовки, изображения, целые блоки Читать далее »

Блок с горизонтальной прокруткой

Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений. jQuery mousewheel plugin Читать далее »

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

1 комментарий

  1. Иванов Иван

    без примера статья говно

Создаем анимацию Scroll Down
localStorage
Рекомендации для васlocalStorageOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.