Plynulé posúvanie na ukotvenie v css. Plynulé posúvanie (plynulé posúvanie) vstupnej stránky

Všimnite si atribút name = "čistenie". Musí sa zhodovať s ID. Tu je samotný skript:

$ (funkcia () ($ ("a.scrollto")). kliknutie (funkcia () (nech elementClick = $ (toto) .attr ("href") nech cieľ = $ (elementClick) .offset (). top; $ ("html: nie je (: animované), telo: nie je (: animované)"). animovať ((scrollTop: cieľ), 1100); návrat false;));));

Ak potrebujete, ako ja, implementovať rolovanie na niekoľko prvkov, potom stačí zadať identifikátory, ako je tento a je to! Veľmi pohodlné a jednoduché na implementáciu. Netvrdím, že je to najlepšie, ale funguje to. Ak to niekto dokáže zjednodušiť, skrátiť alebo nejako vylepšiť, budem vám veľmi vďačný. Pokiaľ ide o mňa, tento efekt môže byť užitočný pre mnohých.

Upozorňujeme, že na začiatku článku sme uviedli názov a cestu skriptu takto:

To znamená, že musíte vytvoriť priečinok v koreňovom adresári vašej lokality s názvom js a vložiť doň súbor s názvom perehod.js. A už do nej vložte kód skriptu. Toto som ja, pre každý prípad. Zrazu niekto nebude rozumieť.

A to je na dnes všetko. Teraz viete, ako implementovať taký skvelý efekt, ako je plynulé posúvanie stránky na kotvu. Ahojte všetci!

P.s.:Ďakujeme tým, ktorí zareagovali na výzvu na sociálnych sieťach o pomoc s nápadmi na nové články. Neviem, prečo ste sa rozhodli písať do súkromných správ, radšej to nechajte v komentároch, aby sa ostatným ľuďom ľahšie napísali recenziu, ak uvidia, že to už urobil niekto odvážnejší.

Táto metóda má nevýhodu, nefunguje dobre s wow.js, ktorý sme použili pri vytváraní animácie v tomto článku. Niektoré animácie sa neprehrajú a na ich mieste zostane prázdne miesto. Ak niekto vie, ako to opraviť, napíšte do komentárov alebo do

V poslednej dobe si čoraz väčšiu obľubu získavajú animácie, ktoré sa prehrávajú pri posúvaní stránky. Všimol som si však, že drvivá väčšina prehliadačov nie je na takéto animácie stavaná. Prechádzanie stránkami pomocou myši nie je plynulé (ako vo Firefoxe), ale krokové. Výsledkom je, že animácie posúvania na stránkach sa tiež prehrávajú trhane. Problém tu podľa mňa vôbec nie je v prehliadačoch, ale v pluginoch, ktoré slúžia na vytváranie týchto animácií. Pretože práve tie umožňujú prudké skoky. Verím, že pre každú animáciu by mala existovať určitá maximálna rýchlosť prehrávania, pri ktorej bude animácia plynulá a používateľ bude schopný pochopiť, čo sa na stránke stalo. Ak so mnou súhlasíte, presuňte sa hladko a bez trhnutia pod mačku.

V tomto článku si povieme niečo o plugine na vytváranie rolovaním ovládaných animácií, ktorý som nazval Scrollissimo. Jeho najbližším analógom je doplnok ScrollMagic. Spoločný je ich účel a skutočnosť, že Greensock bol vybraný ako animačný engine. Ak vám to z nejakého dôvodu stále nie je známe, potom by ste si možno pre úplné pochopenie všetkého, čo sa deje, mali prečítať články o Greensock, ktoré už na Habré vyšli. Napríklad .

Okrem podobností majú tieto doplnky aj rozdiely. Vyzdvihol by som ale to hlavné – plynulú animáciu. Aby to nevyznelo neopodstatnene, tu je dôkaz. Moje slová potvrdzuje aj hlavná stránka ScrollMagic.

Ako sa to používa?

Spájame sa

Ak chcete začať používať Scrollissimo, musíte urobiť dve veci. Najprv pripojte Greensock. Môžete pripojiť len minimum požadovaných knižníc (TweenLite, TimelineLite a CSS):

alebo pripojte jednu knižnicu obsahujúcu všetky vyššie uvedené položky:

A za druhé pripájame samotné Scrollissimo. Knižnica je dostupná z úložiska. A pre používateľov altánku je tiež možné nainštalovať pomocou príkazu

Bower install scrollissimo
Stiahnuté, teraz sa pripájame:

Voliteľne môžete (ale nie nevyhnutne) zahrnúť jQuery pre svoje pohodlie. Neskôr v článku napíšem kód pomocou neho pre väčšiu čitateľnosť.

Poskytol som možnosť spustiť Scrollissimo nielen pri posúvaní celej stránky, ale aj pri akejkoľvek inej udalosti, ale v drvivej väčšine situácií sa musíte prihlásiť na odber udalosti posúvania stránky:

$ (okno) .scroll (funkcia () (Scrollissimo.knock ();));
Teraz, kedykoľvek dôjde k udalosti rolovania, Scrollissimo vypočíta aktuálny priebeh animácií a prehrá ho.

POZNÁMKA: Ak nepotrebujete, aby doplnok počítal samotné rolovanie stránky, môžete odovzdať svoju vlastnú hodnotu vlastnosti scrollTop metóde knock (). Napríklad Scrollissimo.knock (1000) povie doplnku, že ste stránku posunuli 1000 pixelov.

POZNÁMKA: Na podporu tacho zariadení existuje dotykový adaptér scrollissimo.touch.js, ktorý bojuje proti zamrznutiu stránky pri posúvaní.

To je všetko, teraz môžete priamo animovať! Scrollissimo dokáže animovať doplnenia (jednotlivé animácie) a časové osy (poradie jednotlivých animácií). Začnime s dvojčatami.

Najjednoduchšia animácia

Povedzme, že máme pekný červený div s názvom Divy. Veľmi chce rásť, no zatiaľ je široký a vysoký len 50 pixelov.

#Divy (pozícia: pevná; hore: 0; vľavo: 0; výška: 50px; šírka: 50px; pozadie: červené;)
Urobme to na šírku 300 pixelov po 1000 pixeloch od začiatku stránky. Ak to chcete urobiť, najprv vytvorte príslušné dvojča, ako keby sme robili normálnu animáciu pomocou Greensock:

Var divyTween = nový TweenLite ($ ("# Divy"), 1 000, (šírka: 300));
POZNÁMKA: Ako ste si všimli, jediný rozdiel oproti štandardnej animácii na Greensock je ten, že trvanie animácie neurčujeme v sekundách, ale v pixeloch (v našom prípade 1000).

Dobre! Zostáva len dať toto dvojča Scrollissimu:

Scrollissimo.add (divyTween, 0, 6);
Teraz spomaľme a analyzujme túto líniu. Prvý argument je to isté dvojča, ktoré sme vytvorili. Druhým argumentom je, kde začať animáciu. V našom prípade je to začiatok stránky (0 pixelov). Tretí argument zostáva. Tu sa dostávame k hlavnej funkcii, ktorá Scrollissimo odlišuje od bežných pluginov. Tretím argumentom je maximálna rýchlosť prehrávania animácie. Táto rýchlosť sa meria v abstraktných bezrozmerných jednotkách a vyberá sa „okom“. Hneď odpoviem na otázku "Čo sa stane, ak neuvediete tretí parameter?" Ak neuvediete maximálnu rýchlosť, tak nebude. Táto animácia sa prehrá rovnakým spôsobom, ako by sa hrala s bežnými zásuvnými modulmi.

Časové harmonogramy

Divy sa teda rozrástla do šírky. Ako mu môžeme pomôcť rásť do výšky? Tu prichádzajú vhod animačné reťazce alebo, pokiaľ ide o Greensock, časové osy. Ak ste ich predtým používali na vytváranie animácií, nie je to pre vás nič nové. Rovnakým spôsobom, ako sme to urobili s dvojčaťom vyššie, to urobíme s časovou osou. jsFiddle

Var divyTimeline = new TimelineLite (); divyTimeline.to ($ ("# Divy"), 1000 (šírka: 300)); divyTimeline.to ($ ("# Divy"), 1000, (výška: 300)); Scrollissimo.add (divyTimeline, 0, 6);

Záver

To je všetko, čo potrebujete na úspešné vytváranie animácií posúvania pomocou aplikácie Scrollissimo. Na tomto možno dokončím článok. Na záver by som chcel povedať, že plugin je v štádiu aktívneho vývoja, má čo rásť a zlepšovať sa. Preto budem rád, ak budete mať akékoľvek otázky, rady a požiadavky na funkcie.

Rozloženie, animácia!