Velikosti prvků a posouvání

Posouvání je důležitou součástí uživatelské zkušenosti. Udělat to zajímavým je jedním z hlavních úkolů každého designéra. Čím poutavější je cesta uživatele webem, tím déle na něm zůstane.

Pryč jsou doby, kdy animace a rolování byly od sebe odděleny. Posouvání nyní doplňuje interaktivní design a vytváří emocionální spojení s uživatelem. Zde je 10 nejzajímavějších a nejpopulárnějších nápadů na rolování, které můžete použít ve svých projektech.

#1 Klasický přístup

Objekty, které by měly zmizet, se zprůhlední a místo nich se na obrazovce objeví nové. Jedná se o poměrně univerzální řešení, které je vhodné pro všechny typy stránek a navíc vypadá moderně a stylově.

Na rozdíl od již tak nudného posuvníku vám tato animace umožňuje implementovat nejtradičnější způsob posouvání, což z ní dělá ideální volbu pro weby s dosti konzervativním pojetím.

#2 Napůl animovaný web

Dalším zajímavým typem rolovací animace je web, kde je dynamická pouze polovina obrazovky. Je to skvělé řešení například pro portfolio, kde můžete předvést své projekty (obrázky se mohou měnit, ale text zůstává stejný).

Tento typ animace je také ideální pro reklamní weby, protože umožňuje divákům prezentovat senzační titulky vzrušujícím a originálním způsobem.

#3 Horizontální rolování

Zařízení orientovaná na šířku jsou stále oblíbená, což znamená, že horizontální posouvání je stále aktuální. Místo standardního nudného rolování můžete svým uživatelům nabídnout něco víc: zajímavou a poutavou animaci.

Horizontální posouvání šetří místo na obrazovce a také umožňuje prohlížet různé kategorie obsahu posouváním stránky do stran.

# 4 Překrývání objektů

Pokud plánujete spuštění mobilní aplikace, rozhodně byste tomuto typu animací měli věnovat pozornost. Je to skvělé pro dotykové obrazovky, protože vám umožňuje doslova vrstvit nové objekty na ty, které jste již přejeli. Tento přístup simuluje interakci lidí se skutečnými časopisy, knihami, kartami atd.

Tento typ animace posouvání se dobře hodí k designu Material a Flat operačních systémů Android a iOS.

#5 Asynchronní rolování prvků

Tento typ animace je vhodný pro stránky s velkým množstvím obsahu, ať už jde o obrázky, videa nebo text. Tento přístup ušetří vašim uživatelům nutnost dlouhého přetahování posuvníku, dokud na obrazovce nenajdou informace, které potřebují.

Asynchronní posouvání umožňuje kombinovat bohaté nadpisy s hlavním textem na stejné obrazovce, aniž by uživatelé museli posouvat stránku dolů.

#6 Předveďte produkt z různých úhlů

Pokud je váš web (nebo jeho samostatná stránka) věnován jednomu produktu, má smysl ukázat jej z různých úhlů pohledu, včetně pomocí animace. To vám umožní nenápadně předvést svůj produkt uživatelům, i když nechtějí vidět hlavní kolotoč obrázků.

#7 Imitace zvlnění papíru

Proč nesimulovat interakci uživatele se skutečným papírovým svitkem? Toto řešení vypadá svěže a umožňuje zpestřit klasické rolování textu. Tuto animaci lze použít na zpravodajských webech a dalších webových zdrojích s velkým množstvím textového obsahu.

#8 Zoom + Posouvání

Posouvání přiblížením je ideální pro podrobné předvedení produktů a umožňuje uživatelům je důkladně prozkoumat přímo na webu. Tento typ animace funguje obzvláště dobře u produktů, které jsou vysoce detailní.

#9 Posouvání barev

Animace posouvání vypadá obzvláště kreativně, protože nejen posouvá objekty, ale také mění jejich barvu. Tento přístup je pro typografii mimořádně účinný, protože barva zde hraje důležitou roli. Posouvání barev je skvělé řešení pro jasné vstupní stránky a umožňuje vytvořit jasnou vizuální bariéru mezi různými informacemi nebo projekty.

Navíc taková animace bude hrát do rukou hudebním webovým zdrojům, čímž zbaví designéry nutnosti používat příliš mnoho obrázků.

#10 Nativní mobilní rolování

Všechny scénáře posouvání můžete svázat s interakcí uživatele s dotykovou obrazovkou, což mu dává naprostou svobodu jednání. Díky tomu bude zážitek co nejvíce vzrušující. Vaši uživatelé se budou moci nejen vizuálně, ale i hmatově ponořit do interakce s prvky rozhraní.

Nyní máte 10 nápadů, jak vytvořit dechberoucí rolovací animace. Zbývá jen vybrat ten, který nejvíce odpovídá konceptu vašeho projektu!

Existuje mnoho vlastností JavaScriptu, které vám umožňují číst informace o prvku: šířka, výška a další geometrické charakteristiky. V této kapitole je budeme nazývat „metriky“.

Často jsou vyžadovány, když potřebujeme přesunout nebo umístit prvky pomocí JavaScriptu.

Jednoduchý příklad

Jako jednoduchý příklad pro demonstraci vlastností použijeme následující prvek:

 #example 

Prvek má ohraničení, odsazení a rolování. Kompletní sada vlastností. Všimněte si, že zde nejsou žádné okraje, protože nejsou součástí prvku a neexistují pro ně žádné speciální vlastnosti JavaScriptu.

Výsledek vyglyadit tak:

Výše uvedený obrázek záměrně demonstruje nejsložitější a nejkompletnější případ, kdy má prvek také posuvník. Některé prohlížeče (ne všechny) mu ubírají místo tím, že jej odebírají z oblasti vyhrazené pro obsah (výše označené jako „šířka obsahu“).

Bez zohlednění posuvníku by tedy byla šířka obsahu 300px, ale pokud předpokládáme, že šířka posuvníku je 16px (jeho přesná hodnota závisí na zařízení a prohlížeči), zbývá pouze 300 – 16 = 284px a s tím musíme počítat. Proto jsou příklady v této kapitole uvedeny s posuvníkem. Bez něj budou některé výpočty jednodušší.

Dolní oblast výplně může být vyplněna textem

Padding-bottom je na našich ilustracích zobrazen prázdný, ale pokud prvek obsahuje hodně textu, bude překrývat padding-bottom , to je normální.

Metriky

Zde je obecný obrázek s geometrickými vlastnostmi:

Hodnoty vlastností jsou čísla, předpokládá se, že jsou v pixelech.

Začněme zkoumat tím, že začneme z vnějšku prvku.

offsetParent, offsetLeft/Top

Tyto vlastnosti se používají zřídka, ale protože se jedná o „nejexternější“ metriky, začneme jimi.

Vlastnost offsetParent obsahuje předchůdce prvku, který interně používá prohlížeč k výpočtu souřadnic při vykreslování.

Tedy nejbližší předek, který splňuje následující podmínky:

Vlastnosti offsetLeft/offsetTop obsahují souřadnice x/y vzhledem k levému hornímu rohu offsetParent .

V níže uvedeném příkladu má vnitřní prvek prvek jako offsetParent a vlastnosti offsetLeft/offsetTop jsou posuny vzhledem k levému hornímu rohu ( 180 ):

Existuje několik situací, kdy má offsetParent hodnotu null:

1. Pro skryté prvky (s vlastností CSS display:none nebo když není v dokumentu přítomna).
2. Pro prvky a .
3. Pro prvky s polohou:pevná .

offsetWidth/Height

Nyní přejděme k samotnému prvku.

Tyto dvě vlastnosti jsou nejjednodušší. Obsahují „vnější“ šířku/výšku prvku, tedy jeho plnou velikost včetně okrajů.

• offsetWidth = 390 – vnější šířka bloku, lze ji získat přidáním šířky CSS (300px), vnitřních výplní (2 * 20px) a okrajů (2 * 25px).
• offsetHeight = 290 – vnější výška bloku.

Metriky pro nezobrazené prvky jsou nulové.

Souřadnice a velikosti v JavaScriptu jsou nastaveny pouze pro viditelné prvky.

Pokud má prvek (nebo kterýkoli z jeho rodičů) display:none nebo není v dokumentu přítomen, pak jsou všechny jeho metriky nulové (nebo null, pokud je offsetParent ).

Například vlastnost offsetParent je null a offsetWidth a offsetHeight jsou 0, když jsme prvek vytvořili, ale ještě jsme ho nevložili do dokumentu, nebo pokud má prvek (nebo jeho rodič) display:none .

Můžeme to použít ke kontrole viditelnosti:

function isHidden(elem)

Všimněte si, že funkce isHidden také vrátí hodnotu true pro prvky, které jsou skutečně zobrazeny, ale mají velikost nula.

klientNahoře/vlevo

Jdeme dál. Uvnitř prvku máme ohraničení.

Existují pro ně vlastnosti metriky clientTop a clientLeft.

V našem příkladu:

• clientLeft = 25 – šířka levého rámu
• clientTop = 25 – šířka horního rámu

…Ale ve skutečnosti těmito vlastnostmi vůbec nejsou šířky rámečků, ale odsazení vnitřní části prvku od vnější.

Jaký je v tom rozdíl?

Nastává, když je dokument rozložen zprava doleva (arabský nebo hebrejský operační systém). Posuvník je v tomto případě vlevo a pak vlastnost clientLeft zahrnuje také šířku posuvníku.

V tomto případě bude clientLeft rovno 25 , ale s rolováním – 25 + 16 = 41 .

Zde je odpovídající příklad v hebrejštině:

clientWidth/Height

Tyto vlastnosti představují velikost oblasti uvnitř hranic prvku.

Zahrnují šířku oblasti obsahu spolu s odsazením , ale bez posouvání:

Na obrázku výše se nejprve podíváme na clientHeight .

Neexistuje žádné vodorovné posouvání, takže je to přesně to, co je uvnitř hranic: výška CSS 200 pixelů plus horní a spodní odsazení (2 * 20 pixelů), celkem 240 pixelů.

Nyní clientWidth – šířka obsahu zde není 300px , ale 284px , protože 16px je vyhrazeno pro posuvník. Takže: 284px plus levé a pravé odsazení – celkem 324px.

Pokud není žádné odsazení, pak se šířka/výška klienta přesně rovná velikosti oblasti obsahu uvnitř ohraničení mínus posuvník (pokud existuje).

Takže v případech, kdy s jistotou víme, že tam není žádná výplň, můžeme pomocí clientWidth/clientHeight získat rozměry vnitřní oblasti obsahu.

scrollWidth/Height

Tyto vlastnosti jsou jako clientWidth/clientHeight , ale zahrnují také rolovanou (neviditelnou) část prvku.

Na obrázku výše:

• scrollHeight = 723 – plná vnitřní výška včetně rolované oblasti.
• scrollWidth = 324 – plná vnitřní šířka, v tomto případě nedochází k rolování, takže se rovná clientWidth .

Tyto vlastnosti lze použít k “roztažení” prvku na jeho plnou šířku/výšku.

// распахнуть элемент на всю высоту element.style.height = `$px`;

Kliknutím na tlačítko rozbalíte prvek:

scrollLeft/scrollTop

vlastnosti scrollLeft/scrollTop – šířka/výška neviditelného, ​​aktuálně rolovaného, ​​část prvku vlevo a nahoře.

Následující obrázek ukazuje hodnoty scrollHeight a scrollTop pro svisle se posouvající blok.

Jinými slovy, vlastnost scrollTop je “kolik již bylo posunuto nahoru”.

vlastnosti scrollLeft/scrollTop lze změnit

Na rozdíl od většiny vlastností, které jsou pouze pro čtení, lze hodnoty scrollLeft/scrollTop změnit a prohlížeč bude prvek posouvat.

Když kliknete na další prvek, provede se kód elem.scrollTop += 10. Posune se tedy o 10 pixelů dolů.

Nastavení scrollTop na 0 nebo velkou hodnotu jako 1e9 posune prvek úplně nahoru/dolů.

Neberte šířku/výšku z CSS

Podívali jsme se na metriky prvků DOM, které lze použít k získání různých výšek, šířek a dalších vzdáleností.

Jak ale víme z kapitoly Styly a třídy, výšku a šířku CSS lze získat pomocí getComputedStyle .

Proč tedy nezískat například šířku prvku pomocí getComputedStyle , jako je tento?

let elem = document.body; alert( getComputedStyle(elem).width ); // показывает CSS-ширину elem

Proč bychom místo toho měli používat metrické vlastnosti? Důvody jsou dva:

1. Za prvé, vlastnosti CSS width/height závisí na další vlastnosti, box-sizing , která definuje „jaké“ tyto CSS šířka a výška vlastně jsou. Ukázalo se, že například změna velikosti boxu pro pohodlnější rozložení takový JavaScript přeruší.
2. Za druhé, vlastnosti CSS width/height lze nastavit na auto , například pro vložený prvek:

 alert( getComputedStyle(elem).width ); // auto 

Je tu ještě jeden důvod: posuvník. Někdy kód funguje dobře i bez posuvníku, ale jakmile se objeví, začnou se objevovat chyby. K tomu dochází, protože posuvník v některých prohlížečích „žere“ prostor z oblasti vnitřního obsahu. Takže skutečná šířka obsahu je méně Šířky CSS. To je přesně to, co vlastnosti clientWidth/clientHeight berou v úvahu.

…Ale s getComputedStyle(elem).width je situace jiná. Některé prohlížeče (např. Chrome) vrátí skutečnou vnitřní šířku mínus šířku posuvníku, zatímco některé (např. Firefox) vrátí vlastnost CSS samotnou (posuvník ignorují). Tyto rozdíly mezi prohlížeči jsou dalším důvodem, proč nepoužívat getComputedStyle , ale používat metrické vlastnosti.

Pokud váš prohlížeč zobrazuje posuvník (například ve Windows to dělají téměř všechny prohlížeče), můžete to sami vyzkoušet kliknutím na tlačítko v prvku iframe níže.

Prvek s textem má ve stylech specifikovanou vlastnost CSS width:300px.

V systémech Windows, Firefox, Chrome a Edge rezervujte místo pro posuvník. Firefox ale zobrazuje 300 pixelů, zatímco Chrome a Edge méně. Je to proto, že Firefox vrací šířku CSS, zatímco jiné prohlížeče vrací „skutečnou“ šířku mínus rolování.

Upozornění: popsané rozdíly se týkají pouze čtení vlastnosti getComputedStyle(. ).width z JavaScriptu, vizuální zobrazení je v obou případech správné.

Celkem

Prvky mají následující geometrické vlastnosti (metriky):

• offsetParent – ​​nejbližší umístěný rodič CSS nebo nejbližší td , th , table , body .
• offsetLeft/offsetTop – pozice v pixelech levého horního rohu vzhledem k offsetParent .
• offsetWidth/offsetHeight – „vnější“ šířka/výška prvku včetně okrajů.
• clientLeft/clientTop – vzdálenost od levého horního vnějšího rohu k vnitřnímu. U operačních systémů zleva doprava se tyto vlastnosti rovnají šířkám levého/horního okraje. Pokud je jazyk operačního systému takový, že orientace je zprava doleva, takže svislý posuvník je spíše vlevo než vpravo, pak clientLeft zahrne do své hodnoty jeho šířku.
• clientWidth/clientHeight – šířka/výška obsahu spolu s vnitřní výplní, ale bez posuvníku.
• scrollWidth/scrollHeight – šířka/výška obsahu, podobně jako clientWidth/Height , ale bere v úvahu rolovanou, neviditelnou oblast prvku.
• scrollLeft/scrollTop – šířka/výška rolované části prvku shora, počítáno od levého horního rohu.

Všechny vlastnosti jsou pouze pro čtení kromě scrollLeft/scrollTop , které při změně způsobí, že prohlížeč posune prvek.

úkoly

Zjistěte velikost svitku zespodu

Vlastnost elem.scrollTop obsahuje velikost posouvané oblasti měřenou shora. Jak vypočítáte velikost svitku dole (říkejme tomu scrollBottom )?

Napište odpovídající výraz pro libovolný prvek prvku .

PS Check: pokud nedochází k posouvání vůbec nebo je prvek zcela posouván – měl by dát 0 .

let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Jinými slovy: (plná výška) mínus (část rolovaná shora) mínus (viditelná část) – výsledek je přesně stejný jako velikost rolování zdola.

Zjistěte šířku posuvníku

Napište kód, který vrátí šířku standardního posuvníku.

Pro Windows se obvykle pohybuje od 12 do 20 pixelů. Pokud prohlížeč nepřiděluje místo pro posuvník (to se také stává, může být průhledný nad textem), pak hodnota může být 0px .

PS Váš kód by měl fungovat v jakémkoli HTML dokumentu bez ohledu na jeho obsah.

Chcete-li získat šířku posuvníku, vytvořte prvek s rolováním, ale bez ohraničení a odsazení.

Potom bude rozdíl mezi jeho plnou šířkou offsetWidth a šířkou interního obsahu clientWidth roven rolování:

// создадим элемент с прокруткой let div = document.createElement('div'); div.style.overflowY = 'scroll'; div.style.width = '50px'; div.style.height = '50px'; // мы должны вставить элемент в документ, иначе размеры будут равны 0 document.body.append(div); let scrollWidth = div.offsetWidth - div.clientWidth; div.remove(); alert(scrollWidth);