10 dramatick├Żch pr├şkladov ├║vodn├Żch obrazoviek vo webdizajne

Chcete urobi┼ą dramatick├Ż vchod? Chcete svojich n├ív┼ítevn├şkov pred zahriat├şm zahria┼ą ├║┼żasn├Żmi anim├íciami, experimentmi ┼ípi─Źkov├Żch kni┼żn├şc alebo iba chytr├Żm dizajnom? Potom by ste pravdepodobne mali da┼ą o─Źi na ├║vodn├║ obrazovku.

Poch├ídza zo sveta desktopov├ęho softv├ęru a ├║spe┼íne sa zap├íja do webdizajnu. Je r├Żchly, r├Żchly, ─żahk├Ż, relat├şvne jednoduch├Ż a v├Żkonn├Ż. V┼żdy hovor├şme o tom, ako m├┤┼że prv├Żch p├ír sek├║nd urobi┼ą ve─żk├Ż rozdiel. V┼íetko mus├ş by┼ą od za─Źiatku dokonal├ę. Uv├ştacie obrazovky s├║ jednou z t├Żch s├║─Źast├ş webov├Żch aplik├íci├ş, ktor├ę priamo s├║visia s ├║spechom tejto misie.

V├Ą─Ź┼íina z nich si mysl├ş, ┼że oblas┼ą hrdinov podporuje vytvorenie tohto vz├ícneho prv├ęho dojmu. S├║ v┼íak usilovn├ş a svedomit├ş umelci, ktor├ş miluj├║ bodku i a kr├ş┼żik t, veriac, ┼że ÔÇőÔÇősa po─Ź├şta ka┼żd├í sekunda. Tak to je.

─î├şm sk├┤r za─Źnete roz┼íirova┼ą svoje online publikum, t├Żm lep┼í├ş bude v├í┼í prv├Ż dojem. Preto sme svedkami nieko─żk├Żch origin├ílnych rie┼íen├ş v tejto oblasti. V skuto─Źnosti a v skuto─Źnosti otv├íraj├║ konverz├íciu medzi webom a publikom. A ak si mysl├şte, ┼że nab├şja─Źka nem├í schopnos┼ą uk├íza┼ą svoju kreativitu, potom ├║vodn├ę obrazovky maj├║ ur─Źite nejak├Ż potenci├íl.

Vyu┼żite cel├║ obrazovku

V─Ćaka uv├ştacej anim├ícii je v├ím k dispoz├şcii cel├í obrazovka, nie iba mal├Ż prvok. S├║ ako otv├íranie ├║verov├Żch sekvenci├ş z filmov, ktor├ę s─żubuj├║ publiku nie─Źo neuverite─żn├ę, ─Źo vzbudzuje z├íujem.

Tedd Arcuri SmokeT

Three.js nie je dobr├Żm spolo─Źn├şkom na vytv├íranie r├Żchlych a ─żahk├Żch ├║vodov, av┼íak v pr├şpade Tedda Arcuriho to ur─Źite funguje. Tu sa pou┼ż├şva vysoko realistick├Ż a ┼íikovne reprodukovan├Ż dymov├Ż efekt na zlep┼íenie vzh─żadu p├şsmena ÔÇ×TÔÇť. T├í je tu ─Źisto symbolick├í, preto┼że sa d├í ─żahko zmeni┼ą na logo, maskota alebo n├ízov.

,

Uv├ştacia str├ínka Timothyho Giblina

V├Ą─Ź┼íina prezenta─Źn├Żch obrazoviek ide ruka v ruke s identitou zna─Źky. Napr├şklad str├ínka Spot Timothyho Giblina. Je to 100% klasick├í prezenta─Źn├í obrazovka, ktor├í predstavuje identitu zna─Źky obohaten├║ o kreat├şvne myslenie umelca. Autor n├ím ukazuje, ako sa dr┼ża┼ą zlat├ęho m├ędia. Jej koncept je origin├ílny a z├írove┼ł skromn├Ż. Objavte iba jedno logo, ale tento objav upozor┼łuje.

Anim├ícia uv├ştacej obrazovky od Hitesh Sahu

Tento pr├şklad je menej p├┤sobiv├Ż ako rie┼íenie Timothyho Giblina, je v┼íak praktickej┼í├ş a dnes ho mo┼żno vidie┼ą v┼íade. V podstate je to leniv├ę za┼ąa┼żenie presunut├ę na ─Ćal┼íiu ├║rove┼ł. Odhalte prvky domovskej str├ínky jeden po druhom hravo a tvorivo a veci ove─ża zauj├şmavej┼íie.

Existuje nieko─żko zauj├şmavej┼í├şch ├║tr┼żkov k├│du. Pozrime sa spolu na kolekciu a n├íjdeme to najlep┼íie pre v├í┼í ─Ćal┼í├ş projekt.

Klasick├ę rie┼íenia

Chcete na dom├ícej obrazovke pou┼żi┼ą overenej┼í├ş pr├şstup? Nasleduj├║ce pr├şklady v├ím pom├┤┼żu sa tam dosta┼ą.

Uv├ştacia obrazovka Adam Blum

Tradi─Źn├Ż k─║zav├Ż efekt podopiera kr├ísu rie┼íenia Adam Blum. Obsahuje ─Źist├ę a ─Źist├ę pozadie a nieko─żko k─ż├║─Źov├Żch fr├íz, ktor├ę sa objavuj├║ jedna po druhej. Vyu┼żite silu o─Źak├ívania – primit├şvny, ale realizovate─żn├Ż sp├┤sob, ako vzbudi┼ą z├íujem pou┼ż├şvate─ża.

Nirajan Play On

Aby bolo vy┼í┼íie uveden├ę rie┼íenie trochu zauj├şmavej┼íie, m├┤┼żete do tohto pera prida┼ą manipul├ície na pozad├ş, ako to urobil Niranjan. Jeho projekt Play On pon├║ka n├ídhern├ę posuvn├ę prechody medzi poloprieh─żadn├Żmi kryc├şmi vrstvami aplikovan├Żmi na pozad├ş obr├ízka. Pekn├ę a z├íbavn├ę

Williams ‘My Splash

Williams ‘My Splash je ─Ćal┼í├şm reprezentat├şvnym pr├şkladom klasickej ├║vodnej obrazovky. Koncept m├í dve f├ízy. Anim├ícia spo─Źiatku odhal├ş podpis autora miernym a pohodln├Żm tempom. Potom sa objav├ş ─Źierna obrazovka. Jedn├í sa o elegantn├ę, elegantn├ę a profesion├ílne rie┼íenie, ktor├ę sa prisp├┤sobuje mnoh├Żm projektom.

Animovan├í uv├ştacia obrazovka Dmytro Lvivsky

Animovan├í ├║vodn├í obrazovka od Dmytra Lvivsk├ęho je perfektn├Żm v├Żchodiskov├Żm bodom pre vytvorenie v├í┼ího vlastn├ęho rie┼íenia. Anim├ícia JavaScriptu m├í viacero obrazoviek a tradi─Źn├Ż prechod medzi nimi. Posledn├Ż menovan├Ż je zalo┼żen├Ż na ├║─Źinku, pri ktorom hru vedie kruh.

Pozrite si animovan├║ uv├ştaciu obrazovku peria Dmytra ─Żvivsk├ęho (@UnforbiddenYet) na str├ínke CodePen.

Jednoduch├ę vyblednutie CSS3 od Gilesa Papwortha

Toto je neuverite─żne zjednodu┼íen├ę rie┼íenie. Rutina spo─Ź├şva v postupnom zobrazovan├ş blokov textu spolu s tradi─Źn├Żm efektom vyblednutia. Rob├ş v┼íak v┼íetko, ─Źo by mal. A ─Źo je najd├┤le┼żitej┼íie, rob├ş tak bez ÔÇ×jedeniaÔÇť va┼íich cenn├Żch zdrojov, preto┼że pou┼ż├şva iba CSS3. Je to jednoduch├ę, elegantn├ę, skromn├ę ÔÇőÔÇőa ─żahk├ę.

Humorista

Nasleduj├║ce pr├şklady ukazuj├║, ┼że ├║vodn├í obrazovka sa d├í pou┼żi┼ą aj na nastavenie t├│nu webovej str├ínky hne─Ć od za─Źiatku.

Anim├ícia na─Ź├ştavania konzoly Andrew Tunnecliffe

Napr├şklad, ak ste k├│dova─Ź, anim├ícia na─Ź├ştania konzoly Andrew Tunnecliffe vytvor├ş spr├ívnu atmosf├ęru. Je to star├í ┼íkola, brut├ílne jednoduch├ę a ide├ílne s akouko─żvek osobnou pe┼ła┼żenkou pre v├Żvoj├írov.

Padaj├║ce ─Ź├şsla Thibault Jan Beyer

Ak m├íte na mysli ┼ítatistick├Ż alebo d├ítov├Ż projekt, padaj├║ce ─Ź├şsla spolo─Źnosti Thibault Jan Beyer s├║ dobr├Żm za─Źiatkom v├í┼ího rozpr├ívania. Anim├ícia sa otv├íra klesaj├║cimi ─Ź├şslami, ktor├ę nakoniec narazia na zem a otvoria hlavn├║ obrazovku. M├í geometrick├ę k├║zlo obohaten├ę o niektor├ę digit├ílne korenie.

V neposlednom rade

Stan Lee bude pre mnoh├Żch ─żud├ş v┼żdy ÔÇ×hl├║pym bratom Bruce LeeÔÇť. Pre n├ís je to ikona, ktor├í st├íla za vesm├şrom, kde dobr├ę v├ş┼ąazstvo nad zlom a ktor├ę bude nav┼żdy v na┼íich srdciach.

Marvel Splash Screen Matta Feinsteina

Marvel Splash Screen od Matta Feinsteina nie je presne poctou, ale v┼íetk├Żm fan├║┼íikom superhrdiny sa to bude p├í─Źi┼ą. N├ízov hovor├ş s├ím za seba. Jeho uv├ştacia anim├ícia m├í n├ídhern├║ komick├║ atmosf├ęru. Je to replika ├║vodnej sekvencie pre filmy z Marvel ─Źo vyzer├í ├║┼żasne.

Ako urobi┼ą splash

Uv├ştacie obrazovky sa m├┤┼żu pou┼ż├şva┼ą ako alternat├şva nab├şja─Źiek, pokia─ż nie s├║ samozrejme ┼ąa┼żk├ę. Bohu┼żia─ż, st├íle existuj├║ ─żudia, ktor├ş ich ber├║ pr├şli┼í v├í┼żne a sna┼żia sa ich premeni┼ą na akciu nabit├║ ─Źas┼ą hry.

Uv├ştacie obrazovky vo webdizajne s├║ ├║─Źinn├ę, ak s├║ r├Żchle, kr├ítke, ─żahk├ę a priame k bodu. Samozrejme v├ím poskytuj├║ cel├║ obrazovku, aby ste uk├ízali svojho g├ęnia. St├íle mus├şte pokra─Źova┼ą vo svojej p├┤vodnej misii. S├║ to postriekania, ktor├ę by mali vzbudi┼ą z├íujem a okam┼żite zmeni┼ą taktovku na vzru┼íuj├║ce rie┼íenie.