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

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

HIT

05.02.2017

2312

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 подвесить хэш-ссылку на следующий блок. При этом важно, чтобы переход на следующий слайд был плавным.

Тэги: ,

Поделится информацией с друзьями

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

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

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом. Все это надо поместить в подвал: скрипт, инициализация скрипта. <script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script> <script> // Skroll-page $(document).ready(function() { //Chrome Читать далее »

Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

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

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

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script $(document).ready(function() { // Плавный скролинг по Читать далее »

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

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

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

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

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