Учините своје везе на истој страници мало лепшим за коришћење са овим природним ефектом глатког померања.
Глатко померање је техника која се користи у веб развоју за стварање флуидног искуства померања за кориснике. Побољшава навигацију унутар веб странице тако што анимира кретање померања уместо подразумеваног наглог скока.
Овај свеобухватни водич за веб програмере ће вам помоћи да примените глатко померање користећи ЈаваСцрипт.
Глатко померање је када веб страница глатко скролује до жељеног одељка, уместо да тренутно скаче тамо. Ово чини искуство померања пријатнијим и неприметнијим за корисника.
Глатко померање може да побољша корисничко искуство веб странице на неколико начина:
- Побољшава визуелну привлачност елиминисањем наглих и наглих скокова померања, додајући дашак елеганције.
- Подстиче ангажовање корисника пружајући флуидно и беспрекорно искуство померања. Ово, заузврат, мотивише кориснике да даље истражују садржај.
- На крају, глатко померање олакшава навигацију корисницима, посебно када се ради о дугачким веб страницама или кретању између различитих одељака.
Да бисте применили глатко померање, можете да измените подразумевано понашање померања користећи ЈаваСцрипт.
ХТМЛ структура
Прво направите потребне елементе за означавање за различите оквире за приказ и навигацију за померање између њих.
html>
<htmllang="en"><head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head><body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav><sectionid="section1">
<h2>Section 1h2>
section><sectionid="section2">
<h2>Section 2h2>
section><sectionid="section3">
<h2>Section 3h2>
section><scriptsrc="./script.js">script>
body>
html>
Овај ХТМЛ се састоји од траке за навигацију која садржи три ознаке сидра. Атрибут хреф сваког сидра специфицира јединствени идентификатор циљног одељка (нпр. одељак1, одељак2, одељак3). Ово осигурава да свака веза на коју кликнете води до одговарајућег циљног елемента.
ЦСС Стилинг
Затим примените неки ЦСС како бисте страницу учинили видљиво привлачном и организованом. Додајте следеће у стиле.цсс:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}navul {
display: flex;
gap: 10px;
justify-content: center;
}navulli {
list-style: none;
}navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Ово ће приказати везе као ред дугмади и сваки одељак као елемент пуне висине. Али приметите како клик на везу доводи до тога да прегледач тренутно скочи на одговарајући одељак, без анимације.
Имплементација ЈаваСцрипт
У другом случају, да бисте додали глатку анимацију када кликнете на ознаку сидра, користите метод сцроллИнтоВиев(). Метод сцроллИнтоВиев() је а уграђени ЈаваСцрипт метод класе Елемент која вам омогућава да померате елемент у видљиво подручје прозора претраживача.
Када позовете овај метод, претраживач прилагођава позицију померања контејнера елемента (као што је прозор или контејнер који се може померати) да би елемент био видљив.
Додајте свој ЈаваСцрипт код у сцрипт.јс фајл. Почните тако што ћете слушати да ли ће се покренути догађај ДОМЦонтентЛоадед пре него што урадите било шта друго. Ово обезбеђује само покретање повратног позива када је ДОМ потпуно учитан и спреман је да манипулише.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);Затим дефинишите макеЛинксСмоотх() функција. Почните тако што ћете изабрати ознаке сидра у навигацији, јер желите да промените њихово понашање. Затим пређите преко сваке везе и додајте слушалац догађаја за догађај клика.
functionmakeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
На крају, дефинишите смоотхСцролл() функција која узима објекат слушаоца догађаја. Позовите превентДефаулт() да бисте осигурали да прегледач не изврши своју подразумевану радњу када кликнете на везу. Код који следи ће га заменити.
Узмите хреф вредност тренутне ознаке сидра и сачувајте је у променљивој. Та вредност треба да буде ИД циљног одељка, са префиксом „#“, па је користите да изаберете елемент одељка преко куериСелецтор(). Ако је циљни елемент присутан, покрените га сцроллИнтоВиев методу и проследите „глатко“ понашање у параметар објекта да бисте завршили ефекат.
functionsmoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Уз то, ваша готова веб страница ће се глатко померати до сваког одељка када кликнете на везу:
Да бисте додатно побољшали искуство глатког померања, можете фино подесити одређене аспекте.
Можете подесити вертикални положај померања помоћу блокирати својство аргумента подешавања. Користите вредности као што су „почетак“, „центар“ или „крај“ да бисте идентификовали део циљног елемента до којег треба да скролујете:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Додавање ефеката ублажавања
Примените ефекте ублажавања на анимацију померања да бисте створили природнији и визуелно привлачнији прелаз. Олакшавајуће функције као што су олакшавање, ослобађање или прилагођено кубно-безијеове криве може да контролише убрзање и успоравање померања. Можете да користите прилагођену функцију времена са ЦСС својством понашања померања или ЈаваСцрипт библиотеком као што је „глатко померање“ да бисте постигли исти резултат.
/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Уверите се да ваша примена глатког померања ради доследно у различитим прегледачима. Тестирајте и решите све недоследности или недоследности које се могу појавити у вези са прегледачем.
Можете користити веб локацију као што је Могу ли да користим да тестирате подршку претраживача приликом израде. Размислите о коришћењу ЈаваСцрипт библиотеке или полифила да бисте обезбедили компатибилност међу прегледачима и обезбедили беспрекорно искуство за све кориснике.
Глатко померање додаје додир елеганције и побољшава корисничко искуство стварањем течног и визуелно пријатног ефекта померања. Пратећи кораке наведене у овом водичу, веб програмери могу да имплементирају глатко померање користећи ЈаваСцрипт.
Фино подешавање понашања померања, додавање ефеката ублажавања и обезбеђивање компатибилности између прегледача додатно побољшајте искуство глатког померања, чинећи ваше веб странице привлачнијим и пријатнијим за њих навигирати.
