Плавная прокрутка страницы js. Плавная прокрутка страницы на чистом javascript. Плавный скроллинг к якорю

Введение в XML-RPC

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

Реальный пример: страница банковского сайта, на которой показываются котировки валют. Если вы заходите на страницу как обычный пользователь, через браузер, вы видите все оформление страницы, баннеры, меню и другую информацию, которая "обрамляет" истинную цель поиска - котировки валют. Если вам надо вносить эти котировки в свой интернет-магазин, то ничего другого не останется, как только вручную выделить нужные данные и через буфер обмена перенести на свой сайт. И так придется делать каждый день. Неужели нет выхода?

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

Поэтому разработчики пришли к решению - надо разработать какой-то универсальный механизм, который бы позволил прозрачно (на уровне протокола и среды передачи) и легко обмениваться данными между программами, которые могут находиться где угодно, быть написанными на любом языке и работать под управлением любой операционной системы и на любой аппаратной платформе. Такой механизм называют сейчас громкими терминами "Веб-сервисы" (web-service), "SOAP", "архитектура, ориентированная на сервисы" (service-oriented architecture). Для обмена данными используются открытые и проверенные временем стандарты - для передачи сообщений протокол HTTP (хотя можно использовать и другие протоколы - SMTP к примеру). Сами данные (в нашем примере - курсы валют) передаются упакованными в кросс-платформенный формат - в виде XML-документов. Для этого придуман специальный стандарт - SOAP.

Да, сейчас веб-сервисы, SOAP и XML у всех на слуху, их начинают активно внедрять и крупные корпорации вроде IBM и Microsoft выпускают новые продукты, призванные помочь тотальному внедрению веб-сервисов.

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

Потому существует еще один, с натяжкой можно сказать альтернативный стандарт на обмен информацией - XML-RPC. Он был разработан при участии Microsoft компанией UserLand Software Inc и предназначен для унифицированной передачи данных между приложениями через Интернет. Он может заменить SOAP при построении простых сервисов, где не надо все "корпоративные" возможности настоящих веб-сервисов.

Что же означает аббревиатура XML-RPC? RPC расшифровывается как Remote Procedure Call - удаленный вызов процедур. Это значит, что приложение (неважно, скрипт на сервере или обычное приложение на клиентском компьютере) может прозрачно использовать метод, который физически реализован и исполняется на другом компьютере. XML тут применяется для обеспечения универсального формата описания передаваемых данных. Как транспорт, для передачи сообщений применяется протокол HTTP, что позволяет беспрепятственно обмениваться данными через любые сетевые устройства - маршрутизаторы, фаерволы, прокси-сервера.

И так, для использования надо иметь: сервер XML-RPC, который предоставляет один или несколько методов, клиент XML-RPC, который может формировать корректный запрос и обрабатывать ответ сервера, а также знать необходимые для успешной работы параметры сервера - адрес, название метода и передаваемые параметры.

Вся работа с XML-RPC происходит в режиме "запрос-ответ", в этом и есть одно из отличий технологии от стандарта SOAP, где есть и понятия транзакций, и возможность делать отложенные вызовы (когда сервер сохраняет запрос и отвечает на него в определенное время в будущем). Эти дополнительные возможности больше пригодятся для мощных корпоративных сервисов, они значительно усложняют разработку и поддержку серверов, и ставят дополнительные требования к разработчикам клиентских решений.

Процедура работы с XML-RPC начинается с формирования запроса. Типичный запрос выглядит так:

POST /RPC2 HTTP/1.0
User-Agent: eshop-test/1.1.1 (FreeBSD)
Host: server.localnet.com
Content-Type: text/xml
Content-length: 172

TestMetod
Привет, XML-RPC!

В первых строках формируется стандартный заголовок HTTP запроса POST. К обязательным параметрам относятся host, тип данных (MIME-тип), который должен быть text/xml, а также длина сообщения. Также в стандарте указывается, что поле User-Agent должно быть заполнено, но может содержать произвольное значение.

Далее идет обычный заголовок XML-документа. Корневой элемент запроса - , может быть только один, и не может содержать таких узлов в качестве дочерних. Это означает, что одним запросом можно вызвать только один метод на сервере.

Строка TestMetod указывает, что мы вызываем метод с именем TestMetod. При необходимости, тут можно указывать имя программы или модуля, содержащего метод, а также путь к нему. Спецификация XML-RPC хоть и налагает некоторые ограничения на набор символов, которыми может обозначаться метод, но как их интерпретировать - полностью зависит от реализации сервера.

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

После описания всех параметров следуют закрывающие теги. Запрос и ответ в XML-RPC это обычные документы XML, поэтому все теги обязательно должны быть закрыты. А вот одиночных тегов в XML-RPC нет, хотя в стандарте XML они присутствуют.

Tеперь разберем ответ сервера. Заголовок HTTP ответа обычный, если запрос успешно обработан, то сервер возвращает ответ HTTP/1.1 200 OK. Также как в запросе, следует корректно указать MIME-тип, длину сообщения и дату формирования ответа.

Само тело ответа следующее:

true

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

Если при обработке вашего запроса произошла ошибка, то вместо В ответе будет элемент , в котором будет вложена структура, описывающая ошибку. Описание ошибки содержит числовой код ошибки и ее текстовое описание.

А теперь рассмотрим кратко типы данных в XML-RPC. Всего типов данных есть 9 - семь простых типов и 2 сложных. Каждый тип описывается своим тегом или набором тегов (для сложных типов).

Простые типы:

Целые числа - тег или ;

Логический тип - тег , может принимать как значения 0/1, так и true/false;

ASCII-строка - описывается тегом и может содержать произвольную строку символов;

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

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

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

Сложные типы представлены структурами и массивами. Структура определяется корневым элементом , который может содержать произвольное количество элементов , определяющих каждый член структуры. Член структуры описывается двумя тегами: первый, , описывает имя члена, второй, , содержит значение члена (вместе с тегом, описывающим тип данных).

Массивы не имеют названий и описываются тегом , который содержит один элемент , и один или несколько дочерних элементов , где задаются конкретные данные. Массив может содержать любые другие типы в произвольном порядке, а также другие массивы, что позволяет описывать многомерные массивы. Также можно описывать массив структур. Но то, что массив не имеет имени, усложняет в некоторых случаях его использование, для передачи сложных данных их приходится многократно упаковывать в другие типы (к примеру, чтобы передать несколько массивов, можно каждый массив отдельно упаковать в структуру, а потом создать один массив из этих структур).

Конечно, кто-то скажет, что такой перечень типов данных очень беден и "не позволяет развернуться". Да, если надо передавать сложные объекты, или большие объемы данных, то лучше использовать SOAP. А для небольших, нетребовательных приложений вполне подходит и XML-RPC, более того, очень часто даже его возможностей оказывается слишком много! Если учесть легкость развертывания, очень большое количество библиотек для почти любых языков и платформ, широкую поддержку в PHP, то XML-RPC часто просто не имеет конкурентов. Хотя сразу советовать его в качестве универсального решения нельзя - в каждом конкретном случае надо решать по обстоятельствах.

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

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

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

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

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

Document.querySelector("nav").addEventListener("click", function (e) { var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e.preventDefault() var p = document.querySelector("main") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(function f(t) { console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) if (s st + d: cur < st + d) requestAnimationFrame(f) else requestAnimationFrame(() => p.scrollTop = st + d) }) }); * { box-sizing: border-box; } nav { position: sticky; width: 1.25em; float: left; margin: 8px; } a { display: block; line-height: 1.25em; text-align: center; } a:hover { background: silver; } html, body, main { height: 100%; margin: 0; } main { overflow: auto; } h1 { margin: 16px 0; background: antiquewhite; } 1 2 3 4 5 6 7 8 9 10 1 2

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

3

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

4

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

5

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

6

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

7

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

8

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

9

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

10

Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

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