Js плавный скроллинг к якорю. Scrollissimo – плагин для плавной скролл-анимации

В последнее время все большую популярность набирают анимации, проигрываемые по мере прокрутки страницы. Однако, я заметил, что подавляющее большинство браузеров не создано для таких анимаций. Прокрутка страниц мышью в них происходит не плавно (как в Firefox), а ступенчато. В результате скролл-анимации на страницах проигрываются тоже рывками. По моему мнению, проблема здесь совсем не в браузерах, а в плагинах, которые используются для создания этих анимаций. Потому что именно они допускают резкие скачки. Я считаю, что для любой анимации должна быть какая-то максимальная скорость воспроизведения, при которой анимация будет плавной, а пользователь сможет понять, что же произошло на странице. Если вы со мной согласны, то плавно и без рывков перемещайтесь под кат.

В этой статье речь пойдет о плагине для создания анимаций, контролируемых скроллом, который я назвал Scrollissimo. Ближайшим его аналогом является плагин ScrollMagic . Из общих черт у них – их предназначение и то, что в качестве движка анимации выбран Greensock . Если вы с ним еще по какой-то причине не знакомы, то, возможно, для полного понимания всего происходящего вам следует почитать статьи про Greensock, которые уже выходили на Хабре. Например .

Помимо общих черт у этих плагинов есть и различия. Но особенно выделить хотелось бы главное – плавная анимация. Дабы это не прозвучало голословно вот вам пруф . Главная страница ScrollMagic также подтверждает мои слова.

Как им пользоваться?Подключаем Для того, чтобы начать использовать Scrollissimo необходимо сделать две вещи. Во-первых, подключить Greensock. Можно подключить только минимально необходимые библиотеки (TweenLite, TimelineLite и CSS):

либо, подключить одну библиотеку, содержащую все вышеперечисленные:

А во-вторых, подключаем сам Scrollissimo. Библиотека доступна из репозитория. А для пользователей bower также есть возможность установки командой

Bower install scrollissimo
Скачали, теперь подключаем:

По желанию можно (но необязательно) подключить jQuery для собственного удобства. Далее в статье я буду писать код с его использованием для пущей удобочитаемости.

Я предусмотрел возможность срабатывания Scrollissimo не только на скроллинг всей страницы, но и на любое другое событие, однако в подавляющем большинстве ситуаций вам надо подписываться на событие прокрутки страницы:

$(window).scroll(function(){ Scrollissimo.knock(); });
Теперь при каждом наступлении события scroll Scrollissimo будет вычислять текущий прогресс анимаций и воспроизводить ее.

NOTE: Если вам не нужно, чтобы плагин сам считал прокрутку страницы, то вы можете передать свое значение свойства scrollTop в метод knock().Так к примеру, Scrollissimo.knock(1000) скажет плагину о том, что вы промотали страницу на 1000 пикселей.

NOTE: Для поддержки тачевых устройств есть touch-адаптер scrollissimo.touch.js, который борется с «заморозкой» страницы во время прокрутки.

Всё, теперь можно непосредственно анимировать! Scrollissimo умеет анимировать твины (одиночные анимации) и таймлайны (очередь одиночных анимаций). Начнем с твинов.

Простейшая анимация Пусть у нас есть красивый красный div по имени Divy. Ему очень хочется вырасти, но пока он всего 50 пикселей в ширину и высоту.

#Divy{ position: fixed; top: 0; left: 0; height: 50px; width: 50px; background: red; }
Давайте сделаем так, чтобы уже через 1000 пикселей от начала страницы он стал 300 пикселей в ширину. Для этого сначала создадим соответствующий твин, как если бы мы делали обычную анимацию с помощью Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, { width: 300 });
NOTE: Как вы заметили, единственное отличие от стандартной анимации на Greensock состоит в том, что продолжительность анимации мы указываем не в секундах, а в пикселях (в нашем случае 1000).

Отлично! Осталось только отдать этот твин на съедение Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Сейчас давайте притормозим и разберем эту строчку. Первый аргумент – это тот самый твин, который мы создали. Второй аргумент – с какой позиции начинать анимацию. В нашем случае это начало страницы (0 пикселей). Остался третий аргумент. Тут мы и подбираемся к главной особенности, отличающей Scrollissimo от обычных плагинов. Третий аргумент – это максимальная скорость воспроизведения анимации. Измеряется эта скорость в абстрактных безразмерных единицах и подбирается «на глаз». Сразу отвечу на вопрос «А что будет, если не указать третий параметр?» Если вы не укажете максимальную скорость, то ее и не будет. Эта анимация будет воспроизводиться также, как воспроизводилась бы обычными плагинами.

Таймлайны Итак, Divy вырос в ширину. А как нам помочь ему вырасти и в высоту? Здесь нам помогут цепочки анимаций или, выражаясь в терминах Greensock, таймлайны. Если вы использовали их раньше для построения анимаций, то для вас тут нет ничего нового. Точно также, как выше мы поступили с твином мы поступаем с таймлайном. jsFiddle

Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 { width: 300 }); divyTimeline.to($("#Divy"), 1000, { height: 300 }); Scrollissimo.add(divyTimeline, 0, 6);

Заключение Это все, что необходимо для успешного создания скролл-анимаций с помощью Scrollissimo. На этом, пожалуй, и закончу статью. В заключение скажу, что плагин находится в стадии активного развития, ему есть куда расти и в чем улучшаться. Поэтому я буду рад любым вопросам, советам и фичреквестам.

Верстайте, анимируйте!

Здравствуйте, дорогие друзья!

Сегодня мы хотим рассказать вам о плавной прокрутке целевой страницы к нужному элементу.

Плавная прокрутка (или плавный скролл) позволяет посетителю лендинга перемещаться по разделам, не теряется визуальный контакт с содержимым оффера.

Можете посмотреть пример из . На этой странице плавный скролл срабатывает при нажатии на кнопку “Заказать доставку”.

Хочется также обратить ваше внимание на то, что использование плавной прокрутки актуально и в сочетании со статичным меню. Ранее мы публиковали руководство по созданию , которое также значительно упрощает навигацию на лендингах с большим объемом информации и позволяет повысить конверсию.

Итак, предлагаем воспользоваться подробным иллюстрированным руководством по созданию плавной прокрутки для одного элемента:

1) Откройте лендинг в визуальном редакторе LPgenerator

2) Скопируйте код:

jq_144("#block-newID a").click(function(e){ // заменить #block-newID на ID элемента, по которому кликаем e.preventDefault(); jq_144("body, html").animate({ scrollTop: jq_144("#block-newID").offset().top }, 1000); // заменить #block-newID на ID элемента, к которому идет прокрутка });

3) С помощью инструмента “Скрипты” вставьте скопированный код на страницу

Установите положение кода: “Перед тегом ” :

4) Пропишите в коде идентификатор кнопки, при клике на которую будет происходить прокрутка. Идентификатор прописывается внутри одинарных кавычек.

5) Посмотреть идентификатор элемента можно в его расширенных свойствах справа:

6) Внимание: если элемент, при нажатии на который запускается скроллинг, не является кнопкой, то в коде удалите букву ‘a’:

Обратите внимание: после прокрутки элемент будет иметь нулевой отступ от верхней границы окна, то есть окажется в самой верхней части страницы.

Поэтому, если вы хотите перемещать посетителя на лид-форму, рекомендуем указать в коде идентификатор ее заголовка или элемента, который находится выше первого поля формы, например стрелочку:

Внимание: плавный скроллинг не срабатывает для секций. Поэтому не указывайте идентификатор секций в коде.

8) По умолчанию время прокрутки до указанного элемента составляет 1000 мс = 1 сек. Вы можете сделать прокрутку медленнее (например, 5000 мс = 5 сек).

Пропишите нужное время в коде:

9) Проверьте положение скрипта, не забудьте задать название для скрипта. После этого сохраните изменения и сохраните целевую страницу в визуальном редакторе.

Здравствуйте, друзья. Хочу затронуть такую тему, как плавный переход к якорю-ссылке на странице сайта. Если вы пишете на своем сайте объемные тексты, грамотно его форматируете, скриншотами и другими элементами, то плавный скроллинг к якорю придаст оформлению еще большую привлекательность. Но давайте для начала узнаем, что это такое и как оно будет работать. Пример работы вы можете наблюдать на этой странице, нажав на пункты этого списка.

Что такое якорь-ссылкаКак сделать ссылку-якорь HTML

Ссылки-якоря делаются на языке гипертекстовой разметки . Создание якоря в HTML — дело совсем не хитрое. Требуется всего лишь небольшие знания в этом языке и понимание принципов его работы. если с этим у вас проблем не возникает, то вы сможете сделать это без особого труда. Итак, чтобы сделать якорь на странице HTML, нужно прописывать в коде примерно следующее.

И для того, чтобы перейти к этому месту на странице, где указана данная метка, нужно в ссылке прописать вот это:

Переход к метке на странице

Переход к метке на странице

При таком подходе переход будет осуществляться мгновенным скачком с одного места на другое

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

С развитием веб-технологий стало возможно делать более красивые, динамичные сайты с различными эффектами, и . И это на самом деле здорово, когда можно чем-то заинтересовать посетителя, помимо контента и оставить хорошие впечатления от посещения сайта. В определенной степени это играет на руку владельцу сайта. Для плавного перехода к якорю, будем использовать библиотеку и подключим совсем небольшой скрипт.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" > $(document) .ready (function () { $("a" ) .click (function () { elementClick = $(this ) .attr ("href" ) ; destination = $(elementClick) .offset () .top ; if ($.browser .safari ) { $("body" ) .animate ( { scrollTop: destination } , 1100 ) ; } else { $("html" ) .animate ( { scrollTop: destination } , 1100 ) ; } return false ; } ) ; } ) ;

$(document).ready(function() { $("a").click(function () { elementClick = $(this).attr("href"); destination = $(elementClick).offset().top; if($.browser.safari){ $("body").animate({ scrollTop: destination }, 1100); }else{ $("html").animate({ scrollTop: destination }, 1100); } return false; }); });

Подключить этот скрипт можно тремя способами. Первый, это вставить на страницу между тегами head. Второй — вынести в отдельный файл и подключить отдельно примерно таким образом:

Метка на странице для перехода на нее

Во-вторых, если хотите, чтобы плавный скроллинг осуществлялся не ко всем якорям, а только к определенным, нужно изменить третью строчку скрипта вот так:

Переход к метке на странице

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

#anchor

Добрый день. Сегодня хочу рассказать вам про такой интересный эффект, как плавная прокрутка к якорю . Например, это может быть меню вверху страницы, при нажатии на которое произойдет плавная прокрутка к соответствующему элементу.

Наверняка вы видели подобный эффект на других лендингах. Сегодня вы узнаете, как его реализовать.

Плавная прокрутка к якорю при помощи javascript

В одном из проектов, как раз, и стала задача реализовать подобный эффект с плавной прокруткой до определенного элемента при клике по одному из элементов меню.

Начнем с того, что подключим библиотеку jquery к нашему проекту и пропишем путь к скрипту, который отвечает за плавность прокрутки:

С этим справились. Теперь необходимо поставить метки и якоря, к которым будет происходить прокрутка.

Я расскажу на примере меню, которое было в проекте по аренде профессиональной техники для строительных и уборочных работ. Вот его исходный код:

• Техника для клининга
• Техника для строительства
• Акции

Как видите, все стандартно и без хитростей. На лендинге, в последствии, были сделаны блоки, соответствующие меню. В них раскрывалась конкретная услуга. К этим блокам и нужно было сделать плавный переход.

Для того, чтобы осуществлялся переход к нужному месту на сайте, достаточно добавить ссылку на идентификатор нужного блока. Давайте сделаем это.

• Техника для клининга
• Техника для строительства
• Акции

Теперь необходимо задать идентификаторы "cleaning", "building", "actions" соответствующим блокам. У меня это выглядело так:

Обратите внимание на атрибут name=»cleaning». Он должен соответствовать идентификатору. Вот сам скрипт:

$(function () { $("a.scrollto").click(function () { let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1100); return false; }); });

Если вам, как и мне, нужно будет реализовать прокрутку к нескольким элементам, то просто ставьте идентификаторы, подобным образом и все! Очень удобный способ и простой в реализации.Я не утверждаю что он лучший, но он работает. Если кто-то сможет его упростить, сократить или как-то улучшить, буду вам очень признателен. Как по мне, так данный эффект может многим пригодиться.

Обратите внимание на то, что вначале статьи мы указали название и путь скрипта такой:

То есть, вам необходимо создать папку в корне вашего сайта с названием js и в нее поместить файл с именем perehod.js. А уже в него вставить сам код скрипта. Это я так, на всякий случай. Вдруг кто-то не поймет.

А на сегодня — все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!

P.s.: Спасибо тем, кто откликнулся на призыв в социальных сетях помочь с идеями для новых статей. Не знаю, почему вы решили писать в личные сообщения, оставляйте лучше в комментариях, так другим людям будет проще написать отзыв, если они будут видеть, что кто-то более смелый, уже сделал это.

У данного способа есть недостаток, он плохо работает с wow.js, который мы использовали при создании анимации в статье. Некоторые анимации не проигрываются и на их месте остается пустое место. Если кто знает, как это исправить, напишите пожалуйста в комментариях или в

Приветствую, дорогие друзья. Как Вы возможно заметили, что практически во всех браузерах прокрутка на сайтах очень резкая и не красивая. И конечно же хотелось бы сделать прокрутку для своего сайта более плавной, естественно это можно сделать и к тому же сильно не напрягаться. Делается это с помощью простого JQuery плагина и нескольких правил CSS. А для того, чтобы посмотреть как это всё работает предлагаю Вам взглянуть на демо, которое находится ниже.

Ι

Ну а теперь давайте перейдём прикреплению плавной прокрутки к нашему сайту.

HTML

Для начала нам нужно будет прикрепить библиотеку JQuery. Если она у Вас уже прикреплена, пропустите этот шаг:

Затем нам нужно прикрепить сам JQuery плагин, который и отвечает за нашу плавную прокрутку, и вместе с ним же идут отдельные правила CSS которые изменяют саму полосу прокрутки на сайте. Подробнее на счёт полосы прокрутки мы поговорим подробнее в следующем уроке, а пока что только плавная прокрутка. А вот и сами правила и плагин:

Всё. Теперь первый и немаловажный шаг мы уже сделали. Теперь нам нужно добавить одно простое правило в стили CSS нашего сайта.

CSS html, body{ height: 100%; }

Это нужно для того, чтобы дать понять нашему плагину, что ширина страницы растянута и является 100% в высоту. Обязательно добавьте это правило в CSS иначе прокрутка работать не будет.

Скрипт

А сейчас предлагаю подробнее разобрать демо пример. И начнём мы с HTML.

HTML в демо Плавная прокрутка для сайта Контент Привет, Это текст для демонстрации плавной прокрутки страниц на Вашем сайте. Действительно не плохо смотрится, не правда ли:) Этот текс будет повторяться. (function($){ $(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-thin" }); }); })(jQuery);

Как Вы можете видеть, что тут я использовал совершенно стандартную разметку HTML5, со всеми вставленными скриптами и CSS файлами о которых мы говорили выше. Думаю, что тут и объяснять нечего, если Вам будет что либо не понятно обязательно спросите в комментариях.

Ну а сейчас давайте взглянем на CSS правила.

CSS из демо @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body{ background-color: #fff; color: #555; font-size: 14px; font-family: "Bad Script", cursive; margin: 0; padding: 0; min-width: 480px; } html, body{ height: 100%; } h2{ font-size: 80px; text-align: center; font-family: "Lobster", cursive; font-weight: 700; font-style: italic; color: #444; } hr{ height: 0; border: none; border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin-bottom: 50px; clear: both; } .cont{ font-size: 30px; margin: 0 auto; padding-top: 20px; width: 50%; max-width: 50%; } .text{ padding-top: 15px; padding-bottom: 20px }

CSS правила так же очень просты и их не много, так же Вы можете видеть, что тут прикреплены шрифты от Google, для того чтобы визуально демо выглядело красиво.