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

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

HIT

05.02.2017

8044

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>
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Блок с горизонтальной прокруткой

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

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

Плавный скроллинг по якорям

Плавный скроллинг по якорям

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

/

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

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

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

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

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