V poslední době se všude začínají objevovat weby s paralaxními rolovacími efekty. Nechtěl jsem si to nechat ujít, a tak jsem vytvořil demo stránku s efektem paralaxního rolování pomocí jQuery a CSS.
Co je to "paralaxa"? I když neznáte pojem „paralaxní rolování“, pravděpodobně tuto techniku znáte. Paralaxní rolování je 2D animační proces, který vytváří iluzi hloubky. Animace vrstev popředí je rychlejší než animace vrstev pozadí. Když sledujete jedoucí auto, zdá se, že se předměty před vozem pohybují rychleji než předměty za vozem. Parallax scrolling využívá stejný princip, aby si divák myslel, že sleduje 3D scénu.Můžete se posouvat jako obvykle, použít navigační nabídku na pravé straně stránky nebo tlačítka další/předchozí, která se zobrazují pod každým článkem.
Stránka obsahuje čtyři nezávisle animované vrstvy, které vytvářejí iluzi hloubky.
Posouvání je v Safari (alespoň na mém počítači) plynulé, ale demo by mělo fungovat v každém moderním prohlížeči.
Prohlášení 1: Vzhledem k tomu, že se jedná pouze o experiment, neoptimalizoval jsem demo pro práci na mobilních zařízeních.
Prohlášení 2: Navigační nabídka použitá v ukázce pochází z webu Nike Better World. Pokud plánujete na svém webu používat podobnou navigaci, mějte na paměti její původ.
Jak to funguje Články a vrstva pozadí mají pevnou pozici pomocí CSS a také mají vlastnost z-index, aby se zajistilo, že se nad vrstvou pozadí objeví nové vrstvy. Používají se čtyři vrstvy: malé mraky, velké mraky, obrázek horkovzdušného balónu/krajiny, vrstva článku./* přední vrstva (balón/obrázek na šířku) */ #parallax-bg3 ( z-index: 3; pozice: pevná; levá: 50 %; /* zarovnat levý okraj se středem okna */ nahoře: 0; width: 940px ; margin-left: -470px; /* posun doleva o polovinu šířky prvku */ )
Každá vrstva má absolutní polohu. To byla nejobtížnější část celého procesu, protože prvky musely být umístěny tak, aby při rolování na kterýkoli ze čtyř článků byl článek zarovnán rovnoměrně vzhledem k oknu prohlížeče. V tomto případě toho bylo dosaženo metodou pokusu a omylu.
#bg3-1 ( pozice: absolutní; nahoře: -111px; vlevo: 355px; ) #bg3-2 ( pozice: absolutní; nahoře: 812px; vlevo: 321px; ) /* a tak dále... */
K vytvoření efektu posouvání paralaxy je potřeba jen pár řádků kódu pomocí jQuery. Překvapilo mě, jak snadné to bylo.
$(okno).bind("scroll",function(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 popředí je vždy zarovnána k horní části dokumentu, zatímco pohyb ostatních vrstev je upraven podle jejich hloubky.
Čím nižší vrstva, tím pomaleji se pohybuje.
Zbytek kódu jQuery slouží k ovládání navigace. Když uživatel klikne na navigační tlačítko, stránka se posune na odpovídající článek. Pokud má uživatel vypnutý JavaScript, vstupují do hry „kotvy“ použité na odkazech. Stále umožňují pohyb po stránce, ale bez animace.
Další kroky Jsem si jistý, že existuje mnoho dalších způsobů, jak vytvořit efekt posouvání paralaxy, a doufám, že moje zkušenost poslouží jako výchozí bod pro zkoumání této metody.Naučte se, jak vytvořit efekt posouvání paralaxy pomocí CSS.
ParalaxaParalaxní posouvání je trend webových stránek, při kterém se obsah na pozadí (tj. obrázek) při posouvání pohybuje jinou rychlostí než obsah v popředí. Kliknutím na odkaz níže uvidíte rozdíl mezi webem s paralaxním rolováním a bez něj.
Poznámka: Paralaxní rolování nefunguje vždy na mobilních zařízeních/smartphonech. Efekt na mobilních zařízeních však můžete deaktivovat pomocí dotazů na média (viz poslední příklad na této stránce).
Jak vytvořit efekt posouvání paralaxyPoužijte prvek kontejneru a přidejte do kontejneru obrázek na pozadí s konkrétní výškou. Poté použijte background-attachment: fixed k vytvoření skutečného efektu paralaxy. K dokonalému vystředění a zmenšení obrázku se používají další vlastnosti pozadí:
Příklad s pixely
.paralaxa(
/* Použitý obrázek */
background-image: url("img_parallax.jpg");
/* Nastavit konkrétní výšku */
výška: 500px;
/* Vytvoří efekt posouvání paralaxy */
pozadí-příloha: pevná;
pozadí-pozice: střed;
background-repeat: no-repeat;
background-size: cover;
}
Ve výše uvedeném příkladu se k nastavení výšky obrázku používají pixely. Pokud chcete použít procenta, například 100 %, aby se obrázek vešel na celou obrazovku, nastavte výšku paralaxního kontejneru na 100 %. Poznámka: Musíte také použít výšku: 100 % na a :
Příklad s procentytělo, html (
výška: 100 %;
}
paralaxa (
/* Použitý obrázek */
background-image: url("img_parallax.jpg");
/* Plná výška */
výška: 100 %;
/* Vytvoří efekt posouvání paralaxy */
pozadí-příloha: pevná;
pozadí-pozice: střed;
background-repeat: no-repeat;
background-size: cover;
Paralaxový efekt je velmi zajímavá technika. Při rolování se obrázek na pozadí pohybuje pomaleji než obsah, což má za následek iluzi 3D prostoru. V tomto tutoriálu si ukážeme jednoduchý a efektivní způsob, jak získat úžasný efekt.
OznačeníTato technika je založena na řízení rychlosti pohybu obrázku na pozadí. Vytvořme HTML značku obsahující dvě sekce s atributy "data-type" a "data-speed" . Účel atributů bude odhalen o něco později:
Značky s atributy typu dat a datové rychlosti vám umožňují zjednodušit a zpřehlednit vaše označování.
Podle specifikace budou všechny atributy začínající na data- považovány za soukromé úložiště dat. Navíc nemají žádný vliv na šablonu.
Protože potřebujeme ovládat rychlost rolování obrázků na pozadí, použijeme pro klíčové parametry data-type="background" a data-speed="10".
Poté ke každé značce přidáme značku.
Absolutní polohování Jednoduchý efekt paralaxy
Pozadí tagu budeme rolovat pomaleji než jeho obsah, tedy . To vytváří iluzi paralaxy.
CSSNež se dostaneme ke kouzlu jQuery, přidáme ke každému prvku v kódu CSS obrázky na pozadí.
#home ( pozadí: url(domov.jpg) 50 % 0 opakování opraveno; min-výška: 1000px; ) #about (pozadí: url(přibližně.jpg) 50% 0 min.výška bez opakování: 1000px; )
A pojďme definovat styly pro zbývající prvky naší demo stránky.
#home ( background: url(home-bg.jpg) 50 % 0 opakování opraveno; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relativní; ) #home article ( výška: 458px; pozice: absolutní; zarovnání textu: na střed; nahoře: 150px; šířka: 100 %; ) #about ( pozadí: url(o-bg.jpg) 50 % 0 opakování opraveno; min-výška : 1000px; výška: 1000px; okraj: 0 auto; šířka: 100%; max-šířka: 1920px; pozice: relativní; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0,8); box- stín: 0 0 50px rgba(0,0,0,0.8); ) #o článku ( výška: 458px; pozice: absolutní; zarovnání textu: na střed; nahoře: 150px; šířka: 100 %; )
Magický kódPoužíváme jQuery. Začněme standardní metodou document.ready(), abychom se ujistili, že je stránka načtena a připravena k manipulaci.
$(dokument).připraveno(funkce())());
Nyní potřebujeme pozornost. První věc, která se zde stane, je iterace všech prvků s atributem data-type="background" na stránce.
$(document).ready(function())( $("sekce").each(function())( var $bgobj = $(this); // Přiřazení objektu )); ));
K funkci .each() přidáme další funkci.scroll() , která se zavolá při zahájení rolování.
$(okno).scroll(funkce () (
Musíte určit, jak dlouho uživatel posouval stránku, a poté vydělit výslednou hodnotu hodnotou definovanou v atributu data-speed.
Var yPos = -($window.scrollTop() / $bgobj.data("rychlost"));
$window.scrollTop() – získání aktuální hodnoty posunu shora. $bgobj.data("speed") odkazuje na atribut data-speed v označení. yPos je konečná hodnota, která se používá pro rolování. Je však použita záporná hodnota, protože pozadí se pohybuje v opačném směru, než se uživatel posouvá.
V našem příkladu je atribut rychlosti dat nastaven na 10. Předpokládejme, že se okno prohlížeče posouvá o 57 pixelů. To znamená, že 57px je děleno 10 = 5,7px.
// Shromáždění pozice na pozadí var coords = "50% "+ yPos + "px"; // Přesunutí pozadí $bgobj.css(( backgroundPosition: coords ));
Nyní musíme shromáždit všechna data do jedné hodnoty. Aby vodorovná poloha pozadí zůstala statická, použijeme pro vlastnost xPosition hodnotu 50 %. Poté přidáme yPos jako hodnotu vlastnosti yPosition a poté přiřadíme souřadnice k pozadí: $bgobj.css(( backgroundPosition: coords )); .
Konečný kód bude vypadat takto:
$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Přiřazení objektu $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Sestavte souřadnice pozadí var coords = "50 % "+ yPos + "px"; // Posuňte pozadí $bgobj.css (( backgroundPosition: coords )); )); )); ));
Klip pro IEJedna věc zůstává: starší verze IE neumí zobrazovat a tagovat. Oprava je snadná; použijeme standardní řešení pro vytváření prvků, které magicky přinutí prohlížeč rozpoznat HTML5 tagy.
// Vytvoření prvků pro IE document.createElement("článek"); document.createElement("sekce");
Navíc používáme resetovací soubor CSS aby všechny prohlížeče zobrazily stránku stejně.
Každý rok jsme svědky toho, že různé trendy webdesignu přicházejí a odcházejí. A někdy se stane, že se určitý „trik“ po nějaké době začne znovu široce používat.
V roce 2012 mnoho zahraničních stránek využívalo velmi zajímavý efekt vypůjčený z her – paralaxní rolování. To byla obecně doba módy pro 3D, takže se snažili udělat webové stránky trojrozměrné, vícevrstvé.
Po roce či dvou na paralaxu jaksi zapomněli a ty stránky, které byly zářnými příklady jejího použití, prošly redesignem a zvolily jiné vizuální techniky. Dnes tento efekt zažívá oživení a lidé o něm opět začínají mluvit.
Pojďme si připomenout, co to je, kde to použít a jak, a také zvážit několik nápadných příkladů použití paralaxy.
Paralaxní rolování – co je to za bestii?
Paralaxový efekt na webových stránkách je velmi snadno rozpoznatelný – využívá více pozadí, které se zdánlivě pohybují různou rychlostí, aby vytvořil pocit hloubky (vytvářel umělý 3D efekt). Tato technika byla široce používána ve hrách „starého stylu“ a je také zajímavým trendem ve webovém designu.
Termín pochází z řeckého „paralaxa“, což znamená „změna“. Dnes si tento trend znovu razí cestu do světa webdesignu.
Paralaxní rolování může být buď standardní, vertikální nebo horizontální a se změnou směru.
Jedná se o velmi zajímavý designový koncept, který vypadá úžasně, ale zároveň vyžaduje pečlivou práci. Musíte nejen promyslet implementaci, ale také tvrdě pracovat na optimalizaci - jinak se na mobilních zařízeních nebo na velkých obrazovkách mohou vrstvy zpomalit a váš výtvor nejen ozdobí, ale jednoduše znehodnotí.
Při používání paralaxy se snažte neudělat jednu hlavní chybu, která se na tomto druhu stránek často vyskytuje – hlavní vrstvě je dána velmi vysoká rychlost pohybu a v důsledku toho uživatel nemůže správně zobrazit informace nebo fotografii. Trochu jsem pootočil kolečkem – a fotka nebo text už šly hodně dolů, zkusil jsem to vrátit – všechno bylo schované nahoru. Jako například. Ve fázi optimalizace si dejte pozor na rychlost rolování vrstev, ta hlavní by se v ideálním případě měla pohybovat stejnou rychlostí jako posuvník. Se zbytkem prvků, které slouží k dekoraci, si ale můžete klidně pohrát.
Kde se přihlásit?
Paralaxní rolování vypadá skvěle na stránkách s malým obsahem. Toto je ideální řešení pro jednostránkové weby a weby s vizitkami.
Řekněme, že máte jen stručné informace o firmě, kontakty a pár fotek. Jednoduchý web s takovým obsahem bude vypadat nudně a nezajímavě. Ale pokud sem přidáte neobvyklé efekty, jako je paralaxa, uživatelé si tento zdroj budou pamatovat na dlouhou dobu!
V dnešní době je skutečně velmi těžké upoutat pozornost lidí. Mnoho stránek je plné flashových efektů, zvukových překryvů a dalších neobvyklých funkcí. Každý se snaží vyniknout co nejlépe – proto se konstruktéři začali k paralaxe opět vracet.
Tento efekt je také dobrý pro jednostránkové stránky, které představují produkt nebo produktovou řadu. Po promyšlení konceptu můžete vytvořit něco skutečně jedinečného.
Několik příkladů
Nyní přejděme od teorie k praxi a zvažte několik stránek, které používají paralaxní rolování. Možná v této kolekci načerpáte inspiraci nebo najdete originální nápady.
Zde je originální katalog bot, který kromě paralaxy využívá ještě jednu věc.Tyto techniky dohromady vytvářejí zvláštní atmosféru.
Stránka, jak vidíte, se pohybuje jednou rychlostí a geometrické tvary se pohybují jinou, o něco pomaleji.
Zde jde paralaxa opět ruku v ruce se zvukem a pomáhá vyprávět celý příběh. Kromě 3D efektu zde vidíme i další módní trendy – černobílé designové barvy, ruční kresby, ručně psaná písma. Pokud jste příliš líní otáčet volantem, zapněte automatické rolování a užívejte si.
Vítejte v Miláně! Ponořte se do světa italského umění!
Zde vidíme další neobvyklé řešení – pro zobrazení webu není třeba otáčet kolečkem, ale přetahovat obsah tlačítkem myši. Navíc se stránka může roztáhnout jak do stran, tak dolů.
Můžete se také řídit seznamem níže, stránka sama vám ukáže správné místo.
Mohl byste takto originálně prezentovat náhradní díly a další hardware? Toto je příklad toho, jak paralaxa může pomoci k tomu, aby byl produktový web zapamatovatelný a zajímavý, i když je produkt velmi specifický a určený pro úzký okruh lidí.
Zde je zajímavá verze webových stránek restaurace. Textového obsahu je málo a designér našel geniální řešení – zkombinovat jej s jasnými fotografiemi, které jsou umístěny v jiné vrstvě a pohybují se jinou rychlostí. Docela svěží a originální.
Zde vidíme nádherné 3D efekty, které jsou vytvářeny pomocí videa na pozadí, fotografií různých velikostí a dokonce i rozmazání těch prvků, které se zdají být uživateli přímo „před nosem“. A samozřejmě různé rychlosti pohybu vrstev.
Pozoruhodný příklad nestandardního přístupu k paralaxe. Pozadí, které se samo pohybuje v kombinaci s textem, který se posouvá dolů; 3D modely vytvořené vpravo; měnící se barvy pozadí při posouvání – to vše dělá web skutečně nezapomenutelným.
Publikujeme implementaci velmi jednoduchého paralaxního efektu při rolování stránky. Tento paralaxní efekt se nejen velmi snadno instaluje a konfiguruje, ale samotný skript paralaxy je malý a nevyžaduje další nastavení. Tento skript pracuje s připojenou knihovnou jQuery.
PRAMENY
připojení paralaxového efektu je stejně snadné jako loupání hrušek a funguje s připojenou knihovnou jQuery.
Verze jQuery v archivu je jquery-1.11.3.min.js Ale tento paralaxní efekt funguje jak s novějšími verzemi knihovny jQuery, tak se staršími. Zkontroloval jsem!
Proto nejprve připojíme jQuery k HTML dokumentu a poté samotný skript parallax.min.js
Zapojení vypadá takto:
No a teď HTML CSS paralaxní spojeníVezměte blok, může to být záhlaví, sekce, div, zápatí.
Pojmenujte blok div konkrétně libovolnou třídou a přiřaďte jej:
šířka: 100%
min-výška: 400px;
I když to není důležité.
sekce class="paralaxa"
CSS .parallax ( min-height: 400px; background: transparent; ) Povinné atributy paralaxy
data-parallax="scroll" - potřebný pro běh skriptu;
data-image-src="img/bg_4.jpg - obrázek, nebo spíše cesta k obrázku;
Stránka vývojáře poskytuje úplný seznam atributů.
class="parallax" - jakákoli třída, to je napsáno výše.
section class="parallax" - nápis uvnitř bloku s efektem paralaxy, v tomto případě nadpis.
Materiál je převzat ze zahraničí. A je uveden pouze pro informační účely.