Js плавный. Javascript - Есть ли плавный скролл между якорями на чистом JS

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

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

Как вы уже, наверное, догадались, в статье пойдет речь не о тюльпанах и розах, не о том как из ромашки вывести яблоню (так что юным Мичуринцам не сюда:-), а речь пойдет об изменении цвета элементов веб-страницы, о плавном перетекании одного цвета в другой, т.е. поговорим об fade-эффектах.

Пример

Начнем с примера: наведите курсор на рисунок, а затем уберите курсор.

Если вас не интересуют теоретические подробности, а нужно готовое решение то вам .

Постановка задачи

Дано два цвета: начальный цвет и конечный цвет.

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

Взгляд вглубь вопроса

Возьмем в качестве начального цвета, например, белый (white), а в качестве конечного цвета оранжево-красный (orangered).

#FFFFFF ? ... n ... ? #FF4500

Теперь необходимо найти промежуточные цвета. Хорошо. Но как?! С какой стороны подойти к этому вопросу? Для этого вспомним (или узнаем:-), как формируется цвет на экране монитора. Любой цвет на экране монитора формируется из трех основных цветов: красного (Red ), зеленого (Green ) и синего (Blue ), путем их смешения (т.е. используется цветовая модель RGB). А указываются цвета на веб-странице либо численными значениями в той же системе RGB, либо литералами именованных цветов (например, White для белого, Red для красного и т.д., однако не у всех цветов есть имена), которые, все равно, указывают на численные значения. Но рассматривать задание цвета по имени не будем, ибо имена придуманы для удобства запоминания человеком, но в нашем случае они создадут неудобства при вычислениях, т.к. все равно потребуют перевода в численную форму. Задать численное значение цвета можно двумя способами: шестнадцатеричным и функциональным.

  • В шестнадцатеричном представлении запись значения RGB имеет следующий формат: символ "#", непосредственно за которым следует три или шесть шестнадцатеричных символов. Значение RGB из трех цифр (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Поэтому белый цвет (#ffffff) можно указать в более короткой форме (#fff).
  • В функциональном представлении формат записи значения RGB имеет следующий вид: строка "rgb(", непосредственно за которой следует список из трех разделенных запятыми вещественных (или целочисленных, или процентных) значений, непосредственно за которыми следует скобка ")". Целочисленное значение 255 эквивалентно процентному значению 100% и шестнадцатеричным значениям F или FF, так что rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

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

#FFFFFF = FF (255) FF (255) FF (255)
0 – CE (206) – FF (255)
#FF4500 = FF (255) 45 (49) 0

Т.е. для того чтобы из белого цвета получить оранжево-красный нужно красную составляющую белого цвета оставить без изменения (изменить величину на ноль), от зеленой вычесть 206, а из синей вычесть 255. Назовем эти числа (ΔR = 0, ΔG = -206, ΔB= -255) приращениями.

Теперь, чтобы получить, например, два промежуточных цвета + конечный цвет (всего 3), нужно изменять начальные значения RGB-триплета (#FFFFFF) не на полную величину приращений ΔR, ΔG, ΔB, а сначала на 1/3, потом на 2/3 и напоследок на 3/3 (3/3 = 1, это полное значение приращения для получения конечного цвета, который нам, в принципе, и так известен).

#FFFFFF = FF (255) FF (255) FF (255)
#FFBAAA = 255 -0 255 - 206*1/3 = 186 (BA) 255 - 255*1/3 = 170 (AA)
#FF7655 = 255 - 0 255 - 206*2/3 = 118 (76) 255 - 255*2/3 = 85 (55)
#FF4500 = FF (255) 45 (49) 0

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

Теперь у нас есть ясная общая картина и мы можем перейти к написанию кода. Есть начальный и конечный цвета, мы можем вычислить n промежуточных цветов (где n выбираем произвольно), и есть величина задержки t (где t выбираем произвольно). Таким образом алгоритм таков: назначаем элементу на веб-странице первый промежуточный цвет, делаем задержку на величину t, назначаем элементу второй промежуточный цвет, делаем задержку, ..., назначаем элементу n-ый промежуточный цвет, который является конечным цветом.

Реализация

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

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

Function fade() { for (var i = 1; i