Skvělý způsob, jak upoutat pozornost návštěvníka na vaše webové stránky, je "úvodní obrazovka" nebo "úvodní obrazovka". Úspěšné je však velmi obtížné z jednoho jednoduchého důvodu: úvodní obrazovky snadno dráždí uživatele.
Splash obrazovky mohou fungovat, pokud se objeví rychle a jsou snadno nepřípustné. Mohou být vizuálně zarážející a krásné a uživatelé se chtějí procházet, aby se dozvěděli více. Tento styl intros pracuje velmi dobře na stránkách pro rolování na jedné stránce. Nebo "styl banneru" webdesignu, který se dostal do módy s plochým designem. To může být také velmi užitečné, aby se pěkně vypadající "pozadí video" stylu intro, které jsou také all-hněv v tuto chvíli.
To, co vám dnes chci ukázat, je základní způsob, jak tento efekt dosáhnout, který můžete snadno upravit tak, aby se do webu dostaly příjemné intros.
Pokud byste chtěli vidět, co budeme budovat, existuje demo zde. A ty můžeš stažení všech zdrojových souborů zde.
Označení
Pokusíme se udržet značku pro tuto jednoduchost. Tímto způsobem lze skutečně provádět na již existujících místech, stejně jako na nových projektech.
Takže v podstatě chceme udělat dvě divy. Jedna s třídou splash a druhá s třídou obalu . (Třída wrapperu může existovat nějakým způsobem pro vás, pokud ji implementujete na již existující stránku, takže budete možná muset změnit název této třídy).
A je to. To je vše, co potřebujeme sémanticky. Ovšem zřejmě přidáme nějaký fiktivní obsah a tituly, abychom měli v našem demo něco, na co se podíváme. Také budeme potřebovat nějaký druh šipky pro přidání do úvodní obrazovky, aby uživatel ukázal, že se může posunout dolů (protože to bude náš způsob, jak ztratit úvodní obrazovku a přinést hlavní obsah).
Takže tady je jednoduché značkování, které se děje uvnitř značky těla :
Lorem ipsum dolor sedět amet, consectetur adipisicing elit. Dolor řídil sapiente tváře dočasné akusamusu minus laborum porro odit sebou dolorum enim optio alias v nulla laudantium voluptatibus quibusdam quaerat providence, který je pro daný voluptatem modi maionres cumque saepe quidem ducimus numquam a commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, chyba, porro facere cumperiente de consecrate necessitatibus id sapiente solita veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Chyba, která se objevuje po uplynutí této doby, může způsobit, že se na displeji objeví jen občasné zvukové ztráty. Architekt, natus fuga non perferendis veritatis nihil odpuzovat dolorum rerum quidem
Vysvětlete, co se tady děje trochu podrobněji: začínáme tím, že se nám podaří splash div. Uvnitř toho máme titul, a náš indikátor (který je zde obrazem šipky, ale může být vše, co chcete, aby to bylo zřejmé). Pak zavřeme tuto div a otevříme další s třídou obalu . Uvnitř toho máme jen nějaký obecný obsah stránek, který bude pro každý případ jiný, ale tady to budeme jednodušší: název, nějaká navigace, hlavní obsahová oblast a zápatí. Potom je jQuery zahrnuto z rozhraní Google API, protože jej budeme používat pro funkčnost a konečně odkazujeme na jiný .js soubor, který je náš vlastní, v němž budeme psát náš jQuery kód.
V oblasti úvodní obrazovky můžete také zaznamenat vyblednutí názvu třídy. Tuto třídu využijeme k přidání některých hezkých animací CSS3 k určitým prvkům a zvýraznění úvodu. Je zřejmé, že pokud se podíváte na výsledky nyní, nebude to vůbec nic, musíme to teď všechno stylovat. Když už mluvíme o tom, pojďme do CSS ...
Styling
Znovu se pokusíme zachovat styly jednoduché a užitečné. Toto je vše prosté CSS. Za prvé, začneme s názvem třídy .fade-in. (To musí být deklarováno nahoře v našem souboru CSS, takže můžeme deklarovat různé časy zpoždění animace na dalších prvcích dále.)
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
Nejdříve deklarujeme klíčové snímky a voláme animaci fadeIn. Vychází z opacity 0 na hodnotu 1. Potom zaměříme přímo na název třídy a určíme, že má opacitu 0. a volejte animaci, kterou jsme právě specifikovali, aby to trvalo 0,3s a dejte jí zpoždění 0,5s.
Nyní se podívejme na CSS potřebnou pro naši domovskou stránku:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
Vyzýváme obrázek na pozadí (tady je to jen černobílá fotografie ulice), kterou centráváme, a také se ujistíme, že pokrývá celou obrazovku v jakékoli velikosti a přiloží ji - což znamená, Nehodlám se posunout. Poté jej nastavíme na "pevnou" pozici a určíme, že by měla být od vrcholu, vpravo, dolů a vlevo ve vzdálenosti 0, a proto vyplní celé okno prohlížeče. Dáme mu minimální výšku, protože to, co umístíme uvnitř, bude absolutně umístěno. Ujistěte se, že má vysoký z-index, protože chceme, aby se zobrazil nad zbytkem obsahu na stránce (která se nyní umístí přímo pod úvodní obrazovku, protože má pevnou pozici).
Tady je, to jsou všechny styly, které jsou skutečně zapotřebí, aby se úvodní obrazovka objevila na správném místě na stránce. Plnění obrazovky a především obsahu, aniž by se změnila tok stránky vůbec. Takže teď vám rychle dám zbytek CSS, který hlavně umístí titul na správné místo, přidá se pěkná šipka dolů směřující k označení, že uživatel by se měl posunout. A konečně některé základní styly pro stránku a několik mediálních dotazů:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
Takže zde máme obecné styly karoserie, některé vrchní polstrování na titul, kde také zpomalíme ztrátu animace o další půl sekundy. Takže má svůj vlastní vchod. Šipka je naprosto umístěna, aby byla vždy ve středu a dolní části obrazovky. Má další zpoždění o půl sekundy, než se konečně zobrazí na obrazovce. Přidáváme některé přechody CSS3 tak, aby se změnily pozice na stavu: hover. Konečně máme několik drobných změn dotazů na média, abychom na menších obrazovkách vypadali trochu hezčí. Ale samozřejmě se tyto styly změní podle vašeho návrhu.
jQuery
Jak jsme již dříve deklarovali, vytvoříme soubor s názvem main.js v adresáři js . Uvnitř toho budeme psát náš jQuery, který způsobí, že úvodní obrazovka zmizí na rolovacím panelu nebo když kliknete na odkaz se šipkou. Tady to je:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ ("splash-arrow"). {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}) $ $ (okno) .scroll (funkce () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} , 100), $ (". Wrapper"), zpoždění (100) .animate ({"opacity": "1.0"}, 800);});
Nejprve zabalíme naše první několik příkazů uvnitř funkce připravené pro doklady a jednáme pouze s plně načtenou stránkou. Takže, abychom začali, zkontrolujte, zda je naše úvodní obrazovka viditelná. Pokud tomu tak je, vytvoříme obal neviditelný (takže nemáme žádný záblesk obsahu při načítání obrázku na pozadí, a také, že po dokončení příjezdu do stránky dojde k závěrečnému zeslabení animace). Potom přidáme funkci k obsluze kliknutí na šipku. Takže pokud uživatel na ni klikne, úvodní obrazovka se posune nahoru (a proto zmizí), a pak animujeme opacitu obalu zpátky na hodnotu 1.
Tento malý blok kódu je (téměř) stejný, který budeme používat ihned po funkci $ .scroll $ (window) . Takže když se uživatel posouvá, posuneme splash a tentokrát animujeme zpět na začátek stránky (takže uživatel nezačíná na polovinu stránky) a oživí neprůhlednost obalového prvku. Přidáme také řádek $ (window) .off ("listovat"); který zastaví okno od skutečného posouvání, když nechceme. Když se uživatel nejdříve posouvá, chceme, aby se animace vypnulo a ve skutečnosti stránka nebyla posouvána. Jakmile však intro zmizí, stránka se normálně posouvá.
Závěr
Takže to máte, je to velmi jednoduché (lehké), ale elegantní řešení, které má na začátek stránky přidat úvodní obrazovku a nechat zmizet na rolovacím panelu, nebo když uživatel klikne na určitý prvek. Neváhejte si vzít tento kód, použít jej a upravit jej tak, aby vyhovoval vašim potřebám.
Jak jsem se zmínil na začátku, tato technika může být použita mnoha různými způsoby, takže se kreativní!