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

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

HIT

05.02.2017

6126

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 эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его Верстка блока для Читать далее »

Перемотка слайдами

Перемотка слайдами

Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).Есть отличная реализации данного функционала — fullPage.js-master. Подключение скриптов и стилей Подключаем скрипт и стиль fullPage Читать далее »

Multi-page landing

Multi-page landing

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

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

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

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

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

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