V poslednej dobe sa všade začali objavovať webové stránky s efektmi paralaxného rolovania. Nechcel som si to nechať ujsť, a tak som vytvoril demo stránku s efektom paralaxného rolovania pomocou jQuery a CSS.
Čo je to "paralaxa"? Aj keď nepoznáte pojem „paralaxné posúvanie“, túto techniku pravdepodobne poznáte. Paralaxné rolovanie je 2D animačný proces, ktorý vytvára ilúziu hĺbky. Animácia vrstiev popredia je rýchlejšia ako animácia vrstiev pozadia. Keď sledujete idúce auto, zdá sa, že predmety pred autom sa pohybujú rýchlejšie ako predmety za autom. Parallax scrolling využíva rovnaký princíp, aby si divák myslel, že sleduje 3D scénu.Môžete rolovať ako zvyčajne, použiť navigačnú ponuku na pravej strane stránky alebo tlačidlá na ďalší/predchádzajúci, ktoré sa zobrazujú pod každým článkom.
Stránka obsahuje štyri nezávisle animované vrstvy, ktoré vytvárajú ilúziu hĺbky.
V Safari (aspoň na mojom počítači) je posúvanie plynulé, ale demo by malo fungovať v každom modernom prehliadači.
Vylúčenie zodpovednosti 1: Keďže je to všetko len experiment, neoptimalizoval som demo tak, aby fungovalo na mobilných zariadeniach.
Vylúčenie zodpovednosti 2: Navigačné menu použité v ukážke pochádza z webovej stránky Nike Better World. Ak plánujete na svojej stránke používať podobnú navigáciu, majte na pamäti jej pôvod.
Ako to funguje Články a vrstva pozadia majú pevnú pozíciu pomocou CSS a tiež majú vlastnosť z-index, aby sa zabezpečilo, že sa nad vrstvou pozadia objavia nové vrstvy. Používajú sa štyri vrstvy: malé oblaky, veľké oblaky, teplovzdušný balón/obrázok krajiny, vrstva článku./* predná vrstva (balón/obrázok na šírku) */ #parallax-bg3 ( z-index: 3; pozícia: pevná; ľavá: 50%; /* zarovnať ľavý okraj so stredom okna */ hore: 0; šírka: 940px ; ľavý okraj: -470px; /* posun doľava o polovicu šírky prvku */ )
Každá vrstva má absolútne umiestnenie. Toto bola najťažšia časť celého procesu, pretože prvky museli byť umiestnené tak, aby pri rolovaní na ktorýkoľvek zo štyroch článkov bol článok zarovnaný rovnako vzhľadom na okno prehliadača. V tomto prípade to bolo dosiahnuté pokusom a omylom.
#bg3-1 ( pozícia: absolútna; hore: -111 pixelov; vľavo: 355 pixelov; ) #bg3-2 ( pozícia: absolútna; hore: 812 pixelov; vľavo: 321 pixelov; ) /* a tak ďalej... */
Na vytvorenie efektu paralaxného rolovania je potrebných len niekoľko riadkov kódu pomocou jQuery. Bol som prekvapený, aké to bolo ľahké.
$(okno).bind("rolovanie",funkcia(e)( parallaxScroll(); )); function parallaxScroll())( var scrolled = $(window).scrollTop(); $("#parallax-bg1").css("top",(0-(scrolled*.25))+"px"); $ ("#parallax-bg2").css("top",(0-(scrolled*.5))+"px"); $("#parallax-bg3").css("top",(0 - (posunuté*.75))+"px"); )
Vrstva popredia je vždy zarovnaná k hornej časti dokumentu, zatiaľ čo pohyb ostatných vrstiev sa prispôsobuje na základe ich hĺbky.
Čím je vrstva nižšia, tým sa pohybuje pomalšie.
Zvyšok kódu jQuery slúži na ovládanie navigácie. Keď používateľ klikne na navigačné tlačidlo, stránka sa posunie na príslušný článok. Ak má používateľ vypnutý JavaScript, do hry vstupujú „kotvy“ použité na odkazoch. Stále vám umožňujú pohybovať sa po stránke, ale bez animácie.
Ďalšie kroky Som si istý, že existuje mnoho ďalších spôsobov, ako vytvoriť efekt posúvania paralaxy, a dúfam, že moje skúsenosti poslúžia ako východiskový bod pri skúmaní tejto metódy.Zistite, ako vytvoriť efekt posúvania paralaxy pomocou CSS.
ParalaxaParalaxné posúvanie je trend webovej stránky, pri ktorom sa obsah na pozadí (t. j. obrázok) pri posúvaní pohybuje inou rýchlosťou ako obsah v popredí. Kliknutím na odkaz nižšie uvidíte rozdiel medzi webovou stránkou s paralaxným rolovaním a bez neho.
Poznámka: Paralaxné posúvanie nie vždy funguje na mobilných zariadeniach/smartfónoch. Efekt na mobilných zariadeniach však môžete vypnúť pomocou mediálnych dopytov (pozrite si posledný príklad na tejto stránke).
Ako vytvoriť efekt paralaxného rolovaniaPoužite prvok kontajnera a pridajte obrázok na pozadí kontajnera so špecifickou výškou. Potom použite pozadie: fixné na vytvorenie skutočného efektu paralaxy. Ďalšie vlastnosti pozadia sa používajú na dokonalé vycentrovanie a mierku obrázka:
Príklad s pixelmi
.paralaxa(
/* Použitý obrázok */
background-image: url("img_parallax.jpg");
/* Nastavte konkrétnu výšku */
výška: 500px;
/* Vytvorenie efektu rolovania paralaxy */
pozadie: pevné;
pozadie-pozícia: stred;
background-repeat: no-repeat;
veľkosť pozadia: obal;
}
Vo vyššie uvedenom príklade sa na nastavenie výšky obrázka používajú pixely. Ak chcete použiť percentá, napríklad 100 %, aby sa obrázok zmestil na celú obrazovku, nastavte výšku paralaxového kontajnera na 100 %. Poznámka: Musíte tiež použiť výšku: 100 % na a :
Príklad s percentamitelo, html (
výška: 100 %;
}
paralaxa (
/* Použitý obrázok */
background-image: url("img_parallax.jpg");
/* Plná výška */
výška: 100 %;
/* Vytvorenie efektu rolovania paralaxy */
pozadie: pevné;
pozadie-pozícia: stred;
background-repeat: no-repeat;
veľkosť pozadia: obal;
Paralaxový efekt je veľmi zaujímavá technika. Pri rolovaní sa obrázok na pozadí pohybuje pomalšie ako obsah, čo má za následok ilúziu 3D priestoru. V tomto návode ukážeme jednoduchý a efektívny spôsob, ako dosiahnuť úžasný efekt.
OznačovanieTáto technika je založená na riadení rýchlosti pohybu obrázka na pozadí. Vytvorme HTML značku obsahujúcu dve sekcie s atribútmi "data-type" a "data-speed" . Účel atribútov bude odhalený o niečo neskôr:
Značky s atribútmi typu údajov a rýchlosti údajov vám umožňujú zjednodušiť a zprehľadniť označovanie.
Podľa špecifikácie sa všetky atribúty začínajúce na data- budú považovať za súkromné úložisko dát. Navyše nemajú žiadny vplyv na šablónu.
Keďže potrebujeme ovládať rýchlosť rolovania obrázkov na pozadí, ako kľúčové parametre použijeme data-type="background" a data-speed="10".
Potom ku každej značke pridáme značku.
Absolútne polohovanie Jednoduchý paralaxový efekt
Pozadie tagu budeme rolovať pomalšie ako jeho obsah, t.j. To vytvára ilúziu paralaxy.
CSSNež sa dostaneme k mágii jQuery, pridajme ku každému prvku v kóde CSS obrázky na pozadí.
#home ( pozadie: url(domov.jpg) 50% 0 opakovanie opravené; minimálna výška: 1000px; ) #about (pozadie: adresa URL(približne.jpg) 50% 0 min.výška bez opakovania: 1000px; )
A poďme definovať štýly pre zostávajúce prvky našej ukážkovej stránky.
#home ( pozadie: url(home-bg.jpg) 50 % 0 opakovanie opravené; minimálna výška: 1 000 pixelov; výška: 1 000 pixelov; okraj: 0 auto; šírka: 100 %; maximálna šírka: 1 920 pixelov; poloha: relatívna; ) #home article ( výška: 458px; pozícia: absolútna; zarovnanie textu: na stred; hore: 150px; šírka: 100 %; ) #about ( pozadie: url(o-bg.jpg) 50 % 0 opakovanie opravené; min-výška : 1000px; výška: 1000px; okraj: 0 auto; šírka: 100%; maximálna šírka: 1920px; pozícia: relatívna; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0,8); box- tieň: 0 0 50px rgba(0,0,0,0.8); ) #o článku ( výška: 458px; pozícia: absolútna; zarovnanie textu: na stred; hore: 150px; šírka: 100 %; )
Magický kódPoužívame jQuery. Začnime štandardnou metódou document.ready(), aby sme sa uistili, že stránka je načítaná a pripravená na manipuláciu.
$(dokument).pripravene(funkcia())( ));
Teraz potrebujeme pozornosť. Prvá vec, ktorá sa tu stane, je iterácia cez všetky prvky s atribútom data-type="background" na stránke.
$(document).ready(function())( $("sekcia")).each(function())( var $bgobj = $(this); // Priraďte objekt )); ));
K funkcii .each() pridáme ďalšiu funkciu.scroll() , ktorá sa volá pri spustení rolovania.
$(okno).scroll(funkcia () (
Musíte určiť, ako dlho používateľ posúval stránku, a potom vydeliť výslednú hodnotu hodnotou definovanou v atribúte data-speed.
Var yPos = -($window.scrollTop() / $bgobj.data("rýchlosť"));
$window.scrollTop() – získa aktuálnu hodnotu posúvania zhora. $bgobj.data("rýchlosť") odkazuje na atribút dátovej rýchlosti v značke. yPos je konečná hodnota, ktorá sa používa na posúvanie. Používa sa však záporná hodnota, pretože pozadie sa pohybuje v opačnom smere, ako sa posúva používateľom.
V našom príklade je atribút dátovej rýchlosti nastavený na 10. Predpokladajme, že sa okno prehliadača posúva o 57 pixelov. To znamená, že 57 pixelov sa vydelí číslom 10 = 5,7 pixelov.
// Zhromažďovanie pozícií na pozadí var coords = "50% "+ yPos + "px"; // Presun pozadia $bgobj.css(( backgroundPosition: coords ));
Teraz musíme zhromaždiť všetky údaje do jednej hodnoty. Ak chcete zachovať statickú horizontálnu polohu pozadia, použijeme pre vlastnosť xPosition hodnotu 50 %. Potom pridáme yPos ako hodnotu vlastnosti yPosition a potom priradíme súradnice k pozadiu: $bgobj.css(( backgroundPosition: coords )); .
Konečný kód bude vyzerať takto:
$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Priraďte objekt $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Spojte súradnice pozadia var coords = "50 % "+ yPos + "px"; // Presuňte pozadie $bgobj.css (( backgroundPosition: coords )); )); )); ));
Klip pre IEJedna vec zostáva: staršie verzie IE nedokážu zobraziť a značky. Oprava je jednoduchá; použijeme štandardné riešenie na vytváranie prvkov, ktoré zázračne prinúti prehliadač rozpoznať značky HTML5.
// Vytvorenie prvkov pre IE document.createElement("článok"); document.createElement("sekcia");
Okrem toho používame súbor resetovania CSS aby všetky prehliadače zobrazovali stránku rovnako.
Každý rok sme svedkami toho, že prichádzajú a odchádzajú rôzne trendy webdizajnu. A niekedy sa stane, že určitý „trik“ sa po určitom čase opäť začne široko používať.
V roku 2012 mnohé zahraničné stránky využívali veľmi zaujímavý efekt požičaný z hier – paralaxné rolovanie. Vo všeobecnosti to bola doba módy pre 3D, takže sa snažili urobiť webové stránky trojrozmerné, viacvrstvové.
Po roku či dvoch na paralaxu akosi zabudli a tie stránky, ktoré boli žiarivými príkladmi jej využitia, prešli redizajnom, pričom sa rozhodli pre iné vizuálne techniky. Dnes tento efekt zažíva oživenie a ľudia o ňom opäť začínajú hovoriť.
Pripomeňme si, čo to je, kde a ako ho použiť, a tiež zvážime niekoľko nápadných príkladov použitia paralaxy.
Paralaxné rolovanie – čo je to za zver?
Paralaxový efekt na webových stránkach je veľmi ľahko rozpoznateľný – využíva viacero pozadí, ktoré sa zdajú byť pohybujúce sa rôznou rýchlosťou, aby sa vytvoril pocit hĺbky (vytvára umelý 3D efekt). Táto technika bola široko používaná v hrách „starého štýlu“ a je tiež zaujímavým trendom vo webdizajne.
Termín pochádza z gréckeho „paralaxa“, čo znamená „zmena“. Dnes si tento trend opäť razí cestu do sveta web dizajnu.
Paralaxné posúvanie môže byť štandardné, vertikálne alebo horizontálne a so zmenou smeru.
Ide o veľmi zaujímavý dizajnový koncept, ktorý vyzerá úžasne, no zároveň si vyžaduje starostlivú prácu. Musíte nielen premyslieť implementáciu, ale aj tvrdo pracovať na optimalizácii - inak sa na mobilných zariadeniach alebo na veľkých obrazovkách môžu vrstvy spomaliť a váš výtvor nielen ozdobia, ale jednoducho znetvoria.
Pri používaní paralaxy sa snažte neurobiť jednu hlavnú chybu, ktorá sa na takýchto stránkach často vyskytuje – hlavná vrstva má veľmi vysokú rýchlosť pohybu a v dôsledku toho používateľ nemôže správne zobraziť informácie alebo fotografiu. Trochu som pootočil kolieskom - a fotka alebo text už išli ďaleko dole, skúsil som to vrátiť - všetko bolo skryté hore. Ako napr. Vo fáze optimalizácie dbajte na rýchlosť rolovania vrstiev, tá hlavná by sa v ideálnom prípade mala pohybovať rovnakou rýchlosťou ako rolovacia lišta. Ale pokojne sa môžete pohrať so zvyškom prvkov, ktoré slúžia na dekoráciu.
Kde sa prihlásiť?
Paralaxné posúvanie vyzerá skvele na stránkach s malým obsahom. Toto je ideálne riešenie pre stránky s jednou stránkou a vizitkami.
Povedzme, že máte len stručné informácie o firme, kontakty a pár fotiek. Jednoduchý web s takýmto obsahom bude pôsobiť nudne a nezaujímavo. Ale ak sem pridáte nezvyčajné efekty, ako je paralaxa, používatelia si tento zdroj budú dlho pamätať!
V dnešnej dobe je skutočne veľmi ťažké upútať pozornosť ľudí. Mnohé stránky sú plné flash efektov, zvukových prekrytí a iných nezvyčajných funkcií. Každý sa snaží vyniknúť čo najlepšie – preto sa dizajnéri opäť začali vracať k paralaxe.
Tento efekt je vhodný aj pre jednostránkové stránky, ktoré predstavujú produkt alebo rad produktov. Po premyslení konceptu môžete vytvoriť niečo skutočne jedinečné.
Niekoľko príkladov
Teraz prejdime od teórie k praxi a zvážme niekoľko stránok, ktoré používajú paralaxné posúvanie. Možno v tejto kolekcii načerpáte inšpiráciu alebo nájdete originálne nápady.
Tu je originálny katalóg topánok, ktorý okrem paralaxy využíva ešte jednu vec.Spolu tieto techniky vytvárajú zvláštnu atmosféru.
Strana, ako vidíte, sa pohybuje jednou rýchlosťou a geometrické tvary sa pohybujú inou, o niečo pomalšie.
Paralaxa tu ide opäť ruka v ruke so zvukom a pomáha vyrozprávať celý príbeh. Okrem 3D efektu tu vidíme aj ďalšie módne trendy – čiernobiele dizajnové farby, ručné kresby, ručne písané písma. Ak ste príliš leniví otáčať kolieskom, zapnite automatické posúvanie a užívajte si.
Vitajte v Miláne! Ponorte sa do sveta talianskeho umenia!
Tu vidíme ďalšie nezvyčajné riešenie - na zobrazenie stránky nie je potrebné otáčať kolieskom, ale presúvať obsah pomocou tlačidla myši. Okrem toho sa stránka môže natiahnuť do strán aj nadol.
Môžete tiež sledovať zoznam nižšie, samotná stránka vám ukáže správne miesto.
Vedeli by ste takto originálne predstaviť náhradné diely a iný hardvér? Toto je príklad toho, ako môže paralaxa pomôcť urobiť webovú stránku produktu zapamätateľnou a zaujímavou, aj keď je produkt veľmi špecifický a určený pre úzky okruh ľudí.
Tu je zaujímavá verzia webovej stránky reštaurácie. Textového obsahu je málo a dizajnér našiel geniálne riešenie – skombinovať ho s jasnými fotografiami, ktoré sú umiestnené na inej vrstve a pohybujú sa inou rýchlosťou. Celkom čerstvé a originálne.
Tu vidíme nádherné 3D efekty, ktoré sa vytvárajú pomocou videa na pozadí, fotografií rôznych veľkostí a dokonca aj rozmazaním tých prvkov, ktoré sa zdajú byť priamo „pred nosom používateľa“. A samozrejme rôzne rýchlosti pohybu vrstiev.
Pozoruhodný príklad neštandardného prístupu k paralaxe. Pozadie, ktoré sa pohybuje samo, kombinované s textom, ktorý sa posúva nadol; 3D modely vytvorené vpravo; meniace sa farby pozadia pri rolovaní – to všetko robí stránku skutočne nezabudnuteľnou.
Publikujeme implementáciu veľmi jednoduchého paralaxového efektu pri posúvaní stránky. Tento paralaxový efekt sa nielen veľmi ľahko inštaluje a konfiguruje, ale aj samotný skript paralaxy je malý a nevyžaduje ďalšie nastavenia. Tento skript funguje s pripojenou knižnicou jQuery.
ZDROJE
prepojenie paralaxového efektu je také jednoduché ako lúskanie hrušiek a funguje s pripojenou knižnicou jQuery.
Verzia jQuery v archíve je jquery-1.11.3.min.js Ale tento paralaxový efekt funguje s novšími verziami knižnice jQuery aj so staršími verziami. Skontroloval som!
Preto najprv pripojíme jQuery k dokumentu HTML a potom samotný skript parallax.min.js
Zapojenie vyzerá takto:
No, teraz HTML CSS paralaxné pripojenieVezmite blok, môže to byť hlavička, sekcia, div, päta.
Pomenujte blok div konkrétne s akoukoľvek triedou a priraďte ho:
šírka: 100%
minimálna výška: 400px;
Aj keď to nie je dôležité.
sekcia class="paralaxa"
CSS .paralaxa ( min-height: 400px; background: transparent; ) Povinné atribúty paralaxy
data-parallax="scroll" - potrebný na spustenie skriptu;
data-image-src="img/bg_4.jpg - obrázok, alebo skôr cesta k obrázku;
Stránka vývojára poskytuje úplný zoznam atribútov.
class="parallax" - akákoľvek trieda, je to napísané vyššie.
section class="parallax" - nápis vo vnútri bloku s efektom paralaxy, v tomto prípade nadpis.
Materiál je prevzatý zo zahraničia. A uvádza sa len na informačné účely.