Rolování na prvek stránky pomocí jQuery. Plynulé posouvání stránky nahoru v jQuery Posouvání stránky v jquery

Během několika posledních let se popularita jednostránkových (rolovacích) stránek vážně zvýšila. Ačkoli tenhle typ stránky a ne pro každého je stále užitečné vědět, jak fungují. Dnes ukážu jak vytvořit jednoduchý jednostránkový (rolovací) web pomocí jQuery.

Než začneme, můžete se podívat na Demo.

No, začněme...

Vytvoříme následující:

HTML

Označení (HTML) stránky bude extrémně jednoduché.

Nejprve si vytvoříme navigaci.

Udělali jsme to, že prvek nav má šířku 100 %, což znamená, že jeho šířka bude rovna šířce jeho nadřazeného prvku. U nav je vlastnost position nastavena na fixed , takže při rolování stránky bude prvek nav vždy před očima uživatele. Abychom vytvořili navigaci, umístili jsme značku ul do značky nav.

výhody:

1. Pokud má uživatel vypnutý javascript, odkazy stále fungují.
2. Pomocí jQuery načteme atribut href z každého odkazu.

Nyní, když jsme vytvořili jednoduchý navigační panel, můžeme přejít k hlavnímu obsahu stránky.

Jak vidíte, značení je velmi jednoduché. Skládá se z bloku obsahu, který obsahuje odstavce (p). Každý odstavec má své vlastní ID spojené s odkazem v naší navigaci.

CSS

Než začnete s CSS, nezapomeňte zahrnout . Odstraňuje problémy spojené s nekompatibilitou mezi různými prohlížeči a umožňuje vám pracovat, aniž byste se zajímali, zda bude web vypadat stejně ve všech moderních prohlížečích.

Začněme stylizací hlavního obsahu stránky, která je velmi jednoduchá.

Body ( font-family: arial; font-size: 15px; line-height: 25px; color: #515151; background: #fdfdfd; ) #content ( width: 500px; margin: 0 auto; padding-top: 40px; height : 2000px ) #content p ( okraj-dolní: 25px; )

V těle definujeme barvy textu a pozadí; Blok obsahu je 500 pixelů široký a vycentrovaný. Hodnota padding-top pro blok obsahu je 40px – to je provedeno tak, aby navigace neblokovala horních 40px obsahu. Výška je 2000 pixelů, aby se vešla do obsahu a zobrazovalo posouvání. I když to zpravidla není nutné. Každý odstavec má vlastnost margin-bottom 25px, která vám pomůže pochopit, kde končí jeden odstavec a kde začíná druhý.

Nyní přejdeme k navigaci:

Nav ( šířka: 100 %; pozice: pevná; výška: 40px; pozadí: bílá; okraj: 1px plný #CACACA; border-top: žádný; -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box -shadow: 0px 0px 3px 1px #ebebeb box-shadow: 0px 0px 3px 1px #ebebeb ) nav ul ( šířka: 750px; margin: 0 auto; ) nav ul li( float: left; width: 150px; text-align; : center; ) nav ul li a ( line-height: 40px; font-size: 16px; text-decoration: none; color: #515151; border-bottom: 1px tetted #515151; ) nav ul li a:hover( color : #000;

Aby bylo zajištěno, že navigace zabere celou šířku prohlížeče, je její hodnota šířky 100 % . Aby navigace zůstala na obrazovce monitoru při rolování, má deklaraci position:fixed. Výška je 40px, což je u horizontálního horního menu zcela běžné. Pro roztomilý vzhled byl použit jednoduchý styl. ul je vystředěný a široký 750 pixelů, aby měl každý odkaz dostatek místa. Každý li je navržen tak, aby plovoucí, takže všechny odkazy jsou na stejné lince. A konečně, odkazy mají také jednoduchý styl.

jQuery

Funguje to takto: když kliknete na navigační odkaz, posune se na odstavec, na který odkaz ukazuje.

Jako vždy začneme funkcí document.ready

$(dokument).připraveno(funkce())());

Nyní, než přejdeme k funkci kliknutí, napíšeme funkci scrollToDiv, která bude rolovat k bloku, který jsme vybrali. K dispozici budou 2 parametry - prvek, na který se provádí rolování, a výška navigační lišty v horní části stránky.

Funkce scrollToDiv(element,navheight)( )

Nyní popíšeme tři proměnné, které budeme potřebovat pro přesné rolování.

Funkce scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; )

Proměnná offset je offset prvku. To je používáno proměnnou offsetTop k načtení hodnoty top . V důsledku toho získáme vzdálenost od horní části stránky k prvku. Proměnná totalScroll je zodpovědná za vzdálenost, kterou prohlížeč potřebuje k posouvání stránky. Bez horního navigačního panelu bude míra posouvání rovna hodnotě offsetTop. Při výpočtu proměnné totalScroll si však musíme pamatovat, že náš navigační panel blokuje horních 40 pixelů obsahu. Zde nám pomůže parametr navheight.

Nakonec stránku posouváme:

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

Funkce jQuery animate nám umožní implementovat plynulé rolování na požadované místo na stránce. V tomto případě trvá animace 500 milisekund.

Vlastnost scrollTop umožňuje nastavit míru, o kterou chcete stránku posouvat (vertikálně).

Zde je kompletní funkce scrollToDiv:

Funkce scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $("body,html").animate(( scrollTop: totalScroll ), 500) ;

Přejděme k funkci klikání.

$("nav ul li a").click(function())( return false; ));

Toto je jen kostra funkce kliknutí. Deklarování return false na konci zabrání prohlížeči následovat odkaz.

Než předáte prvek funkci, musíte pro něj najít název.

Var el = $(this).attr("href"); var elWrapped = $(el);

Proměnná el obsahuje hodnotu atributu href. Aby jQuery mohl používat proměnnou el, musí být zabalena do elWrapped. Následující kód jQuery nelze spustit:

#paragraph1.offset();

Ale umí to:

$("#odstavec1").offset();

To je důvod, proč je potřeba proměnná elWrapped.

Plná funkce kliknutí:

$("nav ul li a").click(function())( var el = $(this).attr("href"); var elWrapped = $(el); scrollToDiv(elWrapped,40); return false; ));

To je vše - teď máme jednoduchý stránka s odkazy, na které se po kliknutí posune na požadovanou část stránky.

Mezi vývojáři se již dávno zakořenila.
Tak. S pomocí pluginů uvedených v této kolekci můžete vytvořit moderní web s vynikající dynamikou. Myslím, že každý, kdo se zajímá o vývoj webových stránek, viděl tyto pluginy v akci. Při posouvání stránek, bloků, různých prvků nebo textu se objeví hladce, vyjíždět, točit atd. Jak ukazuje praxe, klientům se takové fentiflyushki opravdu líbí.
Nářadí rolovací efekty do stránky není tak obtížné, jak by se mohlo na první pohled zdát. Vše, co potřebujete, je kvalitní plugin a přímé ruce. Samozřejmě, že začínající návrhář rozvržení může mít potíže, ale pokud budete chvíli sedět, pochopíte principy fungování, bude se tento úkol zdát velmi jednoduchý.
Navzdory skutečnosti, že mnoho lidí má rádo animace na webu, neměli byste to přehánět, jinak skončíte s přetíženou, vizuálně špatně vnímanou stránkou, na které bude veškerá pozornost zaměřena na všechny tyto „pískání“ a ne na informace. které je třeba zprostředkovat návštěvníkovi. Navíc čím více skriptů je připojeno, tím pomaleji stránka funguje. Ve starších prohlížečích toto celé nemusí fungovat vůbec. Propojte efekty moudře. Často stačí jednoduchý hladký, nenápadný vzhled tvárnic. Tento efekt dodává stránce hladkost a dynamiku, díky čemuž je web živý. Ve své praxi jsem viděl spoustu stránek s efekty bez smyslu pro proporce. Z toho se mi dělá špatně - jediný pocit, který vyvstává. Ale pravděpodobně vývojáři doufali v „Wow efekt“. Tak. Používejte vše s rozumem a s mírou!
Úplně všechny pluginy volný, uvolnit, ale doporučoval bych se s licencemi seznámit, protože v některých případech musí být pro komerční využití splněna řada podmínek.

WOW.js

Není špatné plugin pro implementaci animace prvků při rolování. Má spoustu možností vzhledu animovaných bloků a je docela snadné jej přizpůsobit.

ScrollMagic

Další populární plugin, se kterým můžete implementovat složité animace, které budou spoušť, když se váleček myši posouvá. Plugin v tomto případě umožňuje vytvářet opravdu složité pohybové efekty, měnit pozadí stránky a celkově deformovat tvary. ScrollMagic se často používá na propagačních stránkách, které vyžadují hodně animací.

Scrollme

Jednoduchý a lehký plugin, se kterým můžete implementovat efektivní animaci při rolování. Můžete měnit měřítko, otáčet, přesouvat, zmenšovat nebo zvyšovat průhlednost libovolného prvku.

Superscrollorama

Superscrollorama - silný, ale těžký plugin pro tvorbu animací při rolování. Jeho arzenál obsahuje mnoho různých nastavení pro animaci textu, jednotlivé prvky DIV včetně efektů.
Podrobnější informace naleznete v dokumentaci k tomuto pluginu jQuery.

onScreen

Vynikající plugin, který často používáme v našich projektech. Od umožňuje snadno a rychle provádět různé efekty prvků objevujících se při rolování stránky. Plugin je lehký a nenačítá stránku.

Jedna stránka

Plugin OnePage jQuery umožňuje rozdělit stránku na samostatné obrazovky s výškou 100 % a animovat přechod mezi nimi. Stačí jen lehké postrčení, abyste mohli začít rolovat na další obrazovku. Stejný efekt byl použit na propagační stránce 5s.
Existují problémy s, jako téměř se všemi podobnými pluginy. Pokud se text nevejde na výšku, jednoduše se ořízne a posuvník se nezobrazí.

FSVS

Plugin je svou funkčností velmi podobný předchozímu. Udělejme posuvným posouváním po obrazovkách pomocí css3. Má podobný problém při prohlížení na telefonech. Pohyb po obrazovkách ve formě samostatných snímků je možný buď pomocí rolleru myši, nebo kliknutím na tečkovou boční navigaci.

jInvertScroll

jInvertScroll vám umožňuje vytvářet cool horizontální paralaxní rolování. Když rolujete myší dolů, všechny prvky na stránce se pohybují vodorovně a také s při různých rychlostech, což vytváří efekt paralaxy.

Trasové body

Waypoints je plugin jQuery, který umožňuje zobrazit jakýkoli prvek, když je návštěvník v daném bodě stránky. Když například návštěvník dočte článek na webu a přiblíží se na konec textu, na straně stránky se objeví informační okno s výzvou, aby si přečetl další článek nebo podobný článek.

Scrollocue

Originální plugin pro konkrétní úkoly. Umožňuje pohybovat se po stránce zvýrazněním bloků jednoduchým kliknutím pravá klávesa myší na stránku. S každým novým kliknutím se níže uvedený prvek zvýrazní, čímž se stránka trochu posune. Podporováno je také posouvání pomocí kláves se šipkami na klávesnici.

Posouvání ukazatele průběhu

Zajímavé řešení, které lze použít pro zobrazení průběhu čtení informací na stránce. Je také možné rozdělit text do sekcí a to vše se vizuálně zobrazí na libovolném místě stránky, které vám vyhovuje.

multiScroll.js

multiScroll.js je plugin jQuery podobný předchozím dvěma plugin pro kluzkou obrazovku, ale má jeden podstatný rozdíl. Pokud se v předchozích případech obrazovka jednoduše překlopila, pak tato připomíná spíše moderní posuvník obrázků. Obrazovka je rozdělena na dvě stejné části a levá se posouvá nahoru a pravá dolů. Tím se obsah prakticky roztrhne.
Tento plugin lze použít například pro vytvoření portfolia pro fotografa nebo designéra. Myslím, že návštěvníci vaši stránku ocení.

browserSwipe.js

další plugin pro rolování přes celou obrazovku, s jehož pomocí vzniká efektní přechod přes obrazovky. Dostupné efekty zahrnují posuvný přechod, přechod s otočením na celou obrazovku, přiblížení a horizontální posouvání po obrazovkách. Všechny efekty můžete kombinovat na jedné stránce.

jQuery.panelSnap

Plugin pro posuvné rolování na celé obrazovce. Plugin se na první pohled neliší od předchozích, má však vnitřní rolovací oblast. Pokud rolujeme na konec vnitřního obsahu, pak automaticky dojde k přechodu na další obrazovku. Teoreticky je to tak řešení problémů pro responzivní weby. Pokud je vnitřní okno vyrobeno v plné velikosti, na malých obrazovkách se obsah, který se nevejde na výšku, neztratí.

Jak to všechno začalo

HTML kód tlačítek:

Nahoru

Dolů

CSS styly:

#nahoru
{
šířka:60px;
výška:60px;
poloha:pevná;
dole:50px;
vlevo:20px;
background-color:#000000;
border-radius:30px;
}
#dolů
{
šířka:60px;
výška:60px;
poloha:pevná;
dole:50px;
vlevo:90px;
background-color:#000000;
border-radius:30px;
}
.pPageScroll
{
barva:#FFFFFF;
font:bold 12pt "Comic Sans MS";
text-align:center;
}

V důsledku toho máme v levém dolním rohu prohlížeče dva kruhy s nápisy „Nahoru“ a „Dolů“.

Problémy začínají

Nyní přichází ta zábavná část – JavaScript, nebo spíše jQuery. Jak víte, pro organizaci posouvání se provádějí manipulace s vlastnostmi scrollTop a scrollLeft. V jQuery se tyto manipulace provádějí pomocí metod .scrollTop() a .scrollLeft(). Zajímá nás pouze .scrollTop.
První, nejjednodušší možnost posouvání vypadala takto:

//Zpracování kliknutí na tlačítko "Nahoru".
$("#up").click(function())(
//Musíte přejít na začátek stránky
$("body").animate(("scrollTop":0),,"pomaly");
});

//Ošetření kliknutí na tlačítko "Dolů".
$("#down").click(function())(
//Musíte přejít na konec stránky
var vyska=$("telo").height();
$("body").animate(("scrollTop":height),"pomaly");
});

Vše je velmi jednoduché a nenáročné. Ale smůla, pokud v Chromu bylo všechno docela bez mráčku a pěkné, v Opeře to bylo také docela snesitelné (rolování nahoru bylo provedeno okamžitě), pak „Škodlivá liška“ rolování úplně odmítla. Bez váhání jsem nahradil řádek: $(“body”).animate “body” s “html”, situaci jsem radikálně změnil: FireFox začal fungovat, Opera přestala trhavě rolovat nahoru a začala to dělat plynule, ale nyní Chrome přestal reagovat k manipulaci s tlačítky. Z výše uvedených zkoušek následovala následující možnost, stravitelná všemi prohlížeči: $(“html,body”).animate... Nebyly nalezeny žádné jiné přijatelné metody pro rolování, které fungují ve všech prohlížečích.

Přidáme nějaké volánky a mašle

Vyřešili jsme tu nejjednodušší část. Základní funkcionalita byla dosažena, nyní můžete přijít s něčím zajímavějším. První, co vás upoutá, je rychlost rolování. V přítomnosti jakéhokoli druhu bohatého obsahu se používání rolování stává skutečným testem sklonu k epilepsii. Proto bych chtěl, aby rolování bylo plynulejší. Řešení je přímočaré, nastavte si určitou časovou konstantu, po kterou má rolování probíhat. Jednoznačná výhoda: jednoduchost řešení. Stejně zřejmá nevýhoda: objem obsahu se nebere v úvahu. Chytré řešení: vypočítat dobu provádění rolování v závislosti na velikosti obsahu. Začněme.
V kódu obou tlačítek je potřeba přidat výpočet aktuální pozice. Přesně k tomu slouží metoda jQuery() metoda.scrollTop().
Zde se objevují již známé problémy: $("body").scrollTop() funguje pouze v Chrome, $("html").scrollTop() nefunguje v Chrome. Což je, obecně řečeno, překvapivé, protože se ukazuje, že s konstrukcí $(“body”).animate((“scrollTop”:height),”slow”) v Opeře můžeme posouvat tělo a po přijetí vlastnost scrollTop značky body je rovna nule, což, soudě podle popisu prvku. scrollTop platí pro prvky, které nelze posouvat.
Volba $(“body,html”) pro nás z pochopitelných důvodů není vhodná. Hledáme alternativy. Ukazuje se, že aktuální pozici lze získat z objektů okna a dokumentu způsobem, který vyhovuje všem prohlížečům. Myslím, že stojí za zmínku, že jejich použití pro animaci (například takto: $(document).animate.) nevede k ničemu dobrému.
Takže jako pracovní možnost pro zjištění aktuální pozice vezměme: $(document).scrollTop();
Nyní se zamysleme nad tím, jak počítáme čas. Obecně lze říci, že řešení je triviální a všem známé: čas = cesta/rychlost. K určení cesty nám stačí aktuální poloha. Také potřebujete souřadnice cílového bodu. S tlačítkem „Nahoru“ je vše jednoduché, souřadnice cílového bodu na svislé ose je nula, což znamená, že cesta je Současná situace. U tlačítka „Dolů“ je vše trochu složitější, potřebujeme získat „výšku“ dokumentu. Už očekáváme problémy, že? Ale ne, všechno se zde ukazuje jako velmi jednoduché. Zcela vhodnou výšku lze získat pomocí selektoru „body“, „html“ nebo document.
Tak. Máme cestu, teď potřebujeme rychlost. Zde vše záleží na vás osobně. Vizuálním odhadem se mi rychlost 1,73 zdála pohodlná (údaj nemá žádný základ, jakkoli vážný a byl předstírán okem).

Finální verze

Takže pracovní kód vypadá takto:

$(document).ready(function())(
//Zpracování kliknutí na tlačítko "Nahoru".
$("#up").click(function())(
//Musíte přejít na začátek stránky

var scrollTime=curPos/1.73;
$("body,html").animate(("scrollTop":0),scrollTime);
});

//Ošetření kliknutí na tlačítko "Dolů".
$("#down").click(function())(
//Musíte přejít na konec stránky
var curPos=$(document).scrollTop();
var vyska=$("telo").height();
var scrollTime=(výška-curPos)/1,73;
$("body,html").animate(("scrollTop":height),scrollTime);
});
});

Navíc můžete přidat koeficienty, kterými by se čas nebo rychlost násobily v závislosti na cestě, abyste získali větší flexibilitu, ale nebudu se tím zabývat.

souhrn

Výsledkem je velmi jednoduchá implementace posouvání stránek, která funguje v každém moderním prohlížeči.
Byly provedeny testy pro DOCTYPE: XHTML 1.0 Strict in Prohlížeče Chrome 10, Opera 10, Opera 11, Firefox 4, internet Explorer 8, Internet Explorer 9.

Nějaké problémy:

• border-radius, jak víte, nefunguje v IE8, ale rozložení napříč prohlížeči není tématem tohoto tématu.
• V Opeře 10 je instrukce: $("body,html").animate(("scrollTop":0),scrollTime); vede k okamžitému přechodu do horní části stránky. Tento problém zmizí s přechodem na Operu 11.

UPD: Poslední příklad byl opraven.

Představuji obrovský seznam rolovacích pluginů jQuery pro váš web. Nejrůznější rolovací triky k nám přišly ze zahraničí nedávno a sužovaly řadu moderních portálů a stránek, které chtěly vyniknout. Práce na vertikálním rolování by mohla velmi dobře zlepšit konverze a nepochybně zlepšit uživatelský dojem. Díky zajímavým přístupům JS + CSS3 můžete vylepšit rozhraní vašeho webu. Pokud přidáte trochu fantazie, můžete pro svůj web získat něco jedinečného z jakéhokoli pluginu. Koneckonců, každý web se snaží vystoupit z šedé hmoty různé způsoby. Díky rolování můžete přesunout některé stránky na stránku s implementovaným pluginem, což zlepší příjem důležitá informace uživatel. Tato technologie nejlépe se hodí pro různá portfolia nebo předvedení produktu atd.

Pojďme rovnou k věci.

Mazaný

Sly je JavaScriptová knihovna pro pokročilé jednosměrné rolování s podporou pro navigaci prvků. Může být použit jako jednoduchý nástroj pro výměnu rolování a navigace nebo jako skvělé navigační a animační rozhraní pro paralaxní stránky.

Posouvací cesta jQuery

Toto je plugin pro definování vlastních cest posouvání.

Okna

AnimateScroll

AnimateScroll je plugin jQuery, který vám umožňuje posouvat se na jakoukoli část stránky pouhým voláním funkce animatesscroll() s ID nebo třídou prvku, na který chcete přejít.

ScrollMe

Při posouvání stránky může ScrollMe měnit měřítko, otáčet, překládat a měnit průhlednost prvků na stránce. Je snadné jej nastavit a nevyžaduje jediný řádek javascriptu.

stickUp

Jednoduchý plugin, který „připne“ prvek do horní části okna prohlížeče, když se posouvá, a udržuje jej vždy na očích. Tento plugin funguje na vícestránkových webech, ale má další funkce pro rozvržení jednoho pageru.

Blokovat rolování

Blokovat rolování je plugin jQuery, který mění sadu prvků na bloky a zobrazuje je po jedné obrazovce. Cílem je rozdělit stránku na kousky pro lepší prezentaci a tok uživatelů. Scroll lock automaticky změní velikost stránky.

Starscroll

Vytvořit div jako pozadí... aktivovat plugin; animace rolování. Plugin automaticky nastaví div, aby fungoval neviditelně.

Scrolldeck

Scrollocue

Scrollocue je zásuvný modul jQuery pro vytvoření jednoduchého autocue/teleprompter systému pro procházení řádků textu.

scrollorama

Stellar.js

Stellar.js je plugin jQuery, který poskytuje efekty paralaxního posouvání pro jakýkoli prvek posouvání.

Super scroll orama

Paralaxa

Responzivní 3D posouvání

jQuery Scrollify

Plugin jQuery, který vám pomůže posouvat a přichytávat sekce. Kompatibilní s Touch.

vivus.js

Vivus je odlehčená (bez závislostí) třída JavaScriptu, která vám umožňuje animovat SVG tím, že jim dává možnost kreslení.

jQuery slimScroll

slimScroll je malý (4,6 kB) plugin jQuery, který přemění jakýkoli div na rolovatelnou oblast s pěkným posuvníkem.

jQRangeSlider

jQuery.pin

Chtěli jste někdy připojit něco na stranu textu? Potřebovali jste někdy tenký, lepkavý prvek, který by tiše seděl při posouvání dolů?

jQuery.Pin tady pro pomoc! Vložte libovolný prvek do nejlepší část kontejner. Snadno jej vypněte pro menší velikosti obrazovek, kde není místo pro tento druh šmejdů.

Nekonečný AJAX rolování

Overscroll

Overscroll je plugin jQuery a polyfill pro mobilní rolovací styl Safari. Je navržen pro použití v desktopových prohlížečích s Nejnovější verze jQuery.

jQuery.localScroll

Parallax ImageScroll – plugin jQuery

Plugin kompatibilní s JQuery a amd pro vytvoření efektu paralaxy, jak je uvedeno na spotify.com.

fullPage.js

Lehký a snadno použitelný plugin pro vytváření webů s rolováním na celou obrazovku (také známý jako weby s jednou stránkou, vstupní stránky), můžete také přidat nějaké vodorovné posuvníky do částí webu.

Parallax.js

Jarallax

Jarallax je open-source JavaScriptová knihovna zdrojový kód, což usnadňuje přizpůsobení css na základě interakce. Jarallax usnadňuje vytvoření paralaxního rolovacího webu

jInvertScroll

Jquery fullContent.js

Celý obsah jQuery umožňuje kompletně vytvářet webové stránky.

jQuery Posouvání jedné stránky

Vytvořte web s posouváním jedné stránky (web pro iPhone 5S) pomocí pluginu pro posouvání po jedné stránce.

jQuery Parallax Plugin

jQuery Parallax je skript, který simuluje efekt paralaxy, jak je znázorněno na nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

Portfolia

Portfolia je lehký plugin galerie jQuery pro vaše krásné vodorovně se posouvající obrázky, který podporuje prohlížeče pro stolní počítače, tablety a mobilní zařízení.

Rolovací paralaxní plugin

Rolovací paralaxa — nový plugin jQuery, který spojuje efekt paralaxy s posuvníky a kolečkem myši. To umožňuje, aby se obrázek na pozadí nebo cokoli jiného posouvalo jiným tempem než webová stránka, když uživatel posouvá. Výsledný efekt paralaxy je snadný způsob, jak vytvořit iluzi hloubky na vašem webu.

Scrolltab

Scrolly

scrollr

Samostatná paralaxní rolovací knihovna pro mobilní zařízení(Android + iOS) a PC. Žádné jQuery. Jen běžný JavaScript (a nějaká kouzla).

SMINT

Smint je jednoduchý plugin jQuery, který pomáhá s navigací na jednostránkových webech.

Vlastní posuvník obsahu jQuery

Vysoce přizpůsobitelný vlastní posuvný plugin jQuery. Mezi vlastnosti patří vertikální a/nebo vodorovný pruh posuvník, vlastní hybnost posouvání, kolečko myši (prostřednictvím pluginu jQuery mousewheel), podpora klávesnice a Dotyková obrazovka, motivy připravené k použití a přizpůsobení pomocí pomocí CSS, podpora RTL směru, parametry volby pro kompletní ovládání rolovacích funkcí, metody pro spouštění akcí jako rolování, aktualizace, zničení atp.

Plugin ScrollUpBar

Zásuvný modul (jQuery) se skryje horní panel při rolování dolů a zobrazuje jej při rolování nahoru. To je užitečné zejména na mobilních rozhraních, abyste ušetřili drahocenný prostor.

StickyTableHeaders

jQuery panelSnap

isInViewport.js

Vodopád

plugin jquery vodopád jako jsou Pinterest, huaban.com, faxianla.com

Scroller

jQuery.SerialScroll

jScroll

jScroll je plugin pro nekonečné posouvání jQuery, který napsal Philipp Klausinski. Nekonečné rolování; také známé jako líné načítání, nekonečné posouvání, autopeer, nekonečné stránky atd.

FoldScroll

plugin scrollUp jQuery

Posunout nahoru je lehký plugin jQuery pro vytvoření vlastní funkce Scroll Up, která bude snadno fungovat s jakýmkoli webem.

multiScroll.js

Vytvořte rozdělené stránky se dvěma svislými posuvníky. Kompatibilní s mobilní telefony a zařízení a starší prohlížeče, jako je IE 8.

Libovolný posuvník seznamu

qpScroll

qpScroll je plugin jQuery, který vytváří pozadí paralaxy pro jakoukoli stránku nebo div. Nastavení je velmi snadné. Lze jej přidat do jakékoli existující stránku aniž byste museli měnit HTML značky.

jQuery Stick 'em

Parallax.js

Paralaxní motor reaguje na orientaci chytrého zařízení. Pokud není k dispozici hardware detekce gyroskopu nebo detekce pohybu, použije se místo toho poloha kurzoru.

Slinky.js

Slinky.js je plugin jQuery pro vytváření krásných rolovacích navigačních seznamů se skládanými záhlavími.

Infinity.js

Infinity.js je UITableView pro web: urychluje procházení dlouhými seznamy a udržuje vaše nekonečné zdroje nepřerušované a stabilní pro vaše uživatele. Je malý, časem prověřený a vysoce účinný.

Libovolná kotva

Trasové body

Trasové body je knihovna, která usnadňuje spuštění funkce, kdykoli přejdete na prvek.

jQuery.kinetic

Posouvání ukazatele průběhu

V tomto smyslu existují dvě složky. Obsah a pruhy. Každá sekce obsahu má ID, které pomáhá vypočítat procento. Každý pruh má odkaz na plynulé rolování do dané sekce.

jQuery Smooth Div Scroll

Plynulé posouvání Div je plugin jQuery, který posouvá obsah vodorovně doleva nebo doprava.

Příběh jQuery

Jednoduchý plugin jQuery, který rozšiřuje plugin animateScroll o možnosti jedné stránky.

jQuery Animation Scroll Plugin

jQuery.ScrollTo

Plugin jQuery Endless Scroll

Nekonečné posouvání (neboli nekonečné posouvání) je oblíbená technika mezi weby 2.0, jako je Google Reader a Live Image Search, kde místo procházení prvky pomocí tradičních technik stránkování stránka jednoduše načítá nové prvky připojené ke konci.

V poslední době se typy stránek tzv Vstupní stránka- nebo "vstupní stránky". Jsou pohodlné, protože uživatel obdrží vše nezbytné informace na jedné stránce. Nejčastěji se jedná o informace o produktu, které jej popisují ze všech stran, činí jasno silné stránky a výhody a samozřejmě zadat objednávku.

Takové stránky jsou poměrně dlouhé, takže pro snazší orientaci v nich často vytvářejí navigační nabídku s odkazy na konkrétní sekce. Pojďme se naučit, jak zajistit, aby se web po kliknutí na odkaz plynule posouval na požadované místo.

$("a" ) .click (funkce () ( var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; $("html, tělo" ) .animate (( scrollTop: destination ) , 600 ) ;

Alternativní pohled

Dříve jsme to dělali trochu jinak – používali jsme definici prohlížeče – $.browser.safari || $.browser.webkit a v závislosti na podmínce provedl buď $("body").animate() nebo $("html").animate() . Od verze 1.9 jQuery - $.browser byl odstraněn, a proto nebude fungovat. Ale můžete upravit kód a získat následující skript:

var se shoduje, prohlížeč; jQuery.uaMatch = function ( ua ) ( ua = ua.toLowerCase () ; var match = /(chrome)[ \/]([\w.]+)/ .exec ( ua ) || /(webkit)[ \ /]([\w.]+)/ .exec ( ua ) || /(opera)(?:.*verze|)[ \/]([\w.]+)/.exec (ua) || /(msie)[\s?]([\w.]+)/ .exec ( ua ) || /(trojzubec)(?:.*? rv:([\w.]+)|)/.exec (ua) || ua.indexOf("kompatibilní")< 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec (ua) || ; return ( browser: match[ 1 ] || "" , verze: match[ 2 ] || "0" ) ; ); spárováno = jQuery.uaMatch(navigator.userAgent); //IE 11+ oprava (Trident) matched.browser = matched.browser == "trojzubec" ? "msie" : matched.browser ; prohlížeč = ( ); if ( matched.browser ) ( browser[ matched.browser ] = true ; browser.version = matched.version ; ) $("a" ) .click (funkce () ( var elementClick = $(this) .attr ( "href " ); var destination = $(elementClick) .offset () .top ; if (browser.chrome || browser.webkit ) ( $("body" ) .animate (( scrollTop: destination ) , 600 ) ; ) else ( $("html" ) .animate (( scrollTop: destination ) , 600 ) ) return false ;

To je vše. Hodně štěstí všem!