Java: Плавная прокрутка без jQuery | Smooth scroll without jQuery - видео HD
00:11:02
Обнаружено блокирование рекламы на сайте
Для существования нашего сайта необходим показ рекламы. Просим отнестись с пониманием и добавить сайт в список исключений вашей программы для блокировки рекламы (AdBlock и другие).
12n.ru 18177 роликов
6659 просмотров на сайте 12n.ru
Плавная прокрутка без jQuery | Smooth scroll without jQuery - видео.
В сегодняшнем уроке поговорим, как сделать плавную прокрутку на чистом JS без использования jQuery. @MaxGraph — cайты как страсть — Канал автора с 5 лет опытом фриланса и веб-разработки. На канале есть уроки по wordpress, по самым сложным темам в верстке, по доступности сайтов для людей с ограниченными возможностями. Автор показывает хорошие плагины на чистом js — канал без jquery. Кейсы из реальной работы, то, что приходилось писать самому с нуля. Исходники из урока: codepen.io/Aislam23/pen/zYvpNrNПодпишитесь на канал, если вам нравятся эти видео: goo.gl/Zuu7wEБольше контента в нашей группе Вконтактеhttps://vk.com/glo_academyИли в нашем Telegram-канале t.me/glo_academyПрисоединяйтесь к нашему сообществу Discordhttps://discord.gg/k5XzZ68Telegram-канал «Лысый из браузера»: tele.click/baldfrombrowserЧтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academyЗаказать рекламу на канале: vk.me/aislam23 или t.me/aislam23---------Я использую хостинг Link Host с 2014 года link-host.net/billing/pl.php?1786
развернуть свернуть
// Scroll to anchors
(function () {
const smoothScroll = function (targetEl, duration) {
const headerElHeight = document.querySelector('.header').clientHeight;
let target = document.querySelector(targetEl);
let targetPosition = target.getBoundingClientRect().top — headerElHeight;
let startPosition = window.pageYOffset;
let startTime = null;
const ease = function(t,b,c,d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t — 2) — 1) + b;
};
const animation = function(currentTime){
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime — startTime;
const run = ease(timeElapsed, startPosition, targetPosition, duration);
window.scrollTo(0,run);
if (timeElapsed < duration) requestAnimationFrame(animation);
};
requestAnimationFrame(animation);
};
const scrollTo = function () {
const links = document.querySelectorAll('.js-scroll');
links.forEach(each => {
each.addEventListener('click', function () {
const currentTarget = this.getAttribute('href');
smoothScroll(currentTarget, 1000);
});
});
};
scrollTo();
}());