На одному із сайтів потрібно було реалізувати прокрутку (скролл) сторінки нагору з плавною анімацією. На jquery це робиться однією командою:

$("html,body").animate((scrollTop:0),500);

А на чистому яваскрипті трохи складніше:

var t;
function scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) (
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
) else (
clearTimeout(t);
}
return false;
}

Змінна topдорівнює поточній відстані прокручування сторінки в пікселях. Кожні 30 мс ця величина зменшується в 1,5 рази, у результаті плавно сягає нуля. Це імітація якості ease-out в анімаціях CSS.

Якщо вам потрібно скролити сторінку вгору лінійно, без прискорення, то пишемо якось так:

window.scrollTo(0,-20);

Тоді сторінка скролюватиметься нагору зі швидкістю 20 пікселів у 30 мс.

Чим обумовлений період 30 мс? Кофмортна частота оновлення екрана – приблизно 30 кадрів за секунду, отже, тривалість кожного кадру – 30 мс. Для ідеальної гладкості можна зробити 60 кадрів за секунду, і тоді таймаути мають бути приблизно по 15 мс. Але це може підтримувати на слабких пристроях.

Подяка автору сайту

Якщо Ви хочете підтримати проект, скористайтесь платформою Яндекс.Гроші – це конфіденційно та безпечно.

Привіт, друзі. Хочу торкнутися такої теми, як плавний перехід до якоря-посилання на сторінці сайту. Якщо ви пишете на своєму сайті об'ємні тексти, грамотно його форматуєте, скріншотами та іншими елементами, то плавний скролінг до якоря надасть оформленню ще більшої привабливості. Але давайте спочатку дізнаємося, що це таке і як воно буде працювати. Приклад роботи можна спостерігати на цій сторінці, натиснувши на пункти цього списку.

Що таке якір-посиланняЯк зробити посилання-якір 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") 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

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