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

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

HIT

05.02.2017

7243

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>

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

  • Похожие записи
  • Комментарии
  • Вложения
Рекомендации по созданию лэндинга

Рекомендации по созданию лэндинга

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

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

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

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

Multi-page landing

Multi-page landing

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

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

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

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

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

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