10 dramatick├Żch pr├şkladov prezenta─Źn├Żch obrazoviek webdizajnu

Chcete urobi┼ą dramatick├Ż vchod? Chcete svojich n├ív┼ítevn├şkov zahria┼ą sk├┤r, ako na nich zap├┤sobia neuverite─żn├Żmi anim├íciami, sofistikovan├Żmi z├í┼żitkami z kni┼żnice alebo iba inteligentn├Żm dizajnom? Pravdepodobne by ste teda mali da┼ą o─Źi na plochu.

Vych├ídzal zo sveta stoln├ęho softv├ęru a zakorenil sa vo webdizajne. 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.

Mnoh├ş si myslia, ┼że oblas┼ą hrdinov podporuje vytvorenie tohto vz├ícneho prv├ęho dojmu. Existuj├║ v┼íak usilovn├ş a svedomit├ş umelci v oblasti k├│dovania, ktor├ş radi boduj├║ a prech├ídzaj├║ t, veriac, ┼że ÔÇőÔÇősa po─Ź├şta ka┼żd├í sekunda. Tak to je.

─î├şm sk├┤r za─Źnete roz┼íirova┼ą svoje publikum online, 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 verejnos┼ąou. A ak si mysl├şte, ┼że nab├şja─Źka nie je schopn├í uk├íza┼ą va┼íu kreativitu, prezenta─Źn├ę obrazovky ur─Źite maj├║ ur─Źit├Ż potenci├íl.

Vyu┼żite cel├║ obrazovku

V─Ćaka uv├ştacej anim├ícii m├íte k dispoz├şcii cel├║ obrazovku, nielen mal├Ż prvok. S├║ ako otv├íranie ├║verov├Żch sekvenci├ş pre filmy, ktor├ę s─żubuj├║ verejnosti nie─Źo neuverite─żn├ęho a vzru┼íuj├║ceho z├íujmu.

Tedd Arcuri SmokeT

Three.js nie je dobr├Żm spolo─Źn├şkom na vytv├íranie r├Żchlych a ─żahk├Żch prezent├íci├ş, ale v pr├şpade Tedda Arcuriho to ur─Źite funguje. Tu sa pou┼ż├şva vysoko realistick├Ż a odborne reprodukovan├Ż dymov├Ż efekt na zlep┼íenie vzh─żadu p├şsmena ÔÇ×TÔÇť. T├í je tu ─Źisto symbolick├í, preto┼że ju mo┼żno ─ż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 domovsk├í str├ínka Timothyho Giblina. Je to 100% klasick├ę prezenta─Źn├ę pl├ítno, 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 Hitesh Sahu

Tento pr├şklad je menej p├┤sobiv├Ż ako rie┼íenie Timothyho Giblina, ale je praktickej┼í├ş a dnes ho mo┼żno vidie┼ą v┼íade. V podstate je to leniv├ę za┼ąa┼żenie presunut├ę na ─Ćal┼íiu ├║rove┼ł. Odha─żte prvky domovskej str├ínky jeden po druhom z├íbavn├Żm a kreat├şvnym sp├┤sobom, v─Ćaka ─Źomu s├║ veci ove─ża zauj├şmavej┼íie.

Existuje nieko─żko zauj├şmavej┼í├şch ─Źast├ş 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 podporuje 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─żov.

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 pozadie obr├ízka. Pr├şjemn├ę a z├íbavn├ę

Williams ‘My Splash

Williams ‘My Splash je ─Ćal┼í├şm reprezentat├şvnym pr├şkladom klasickej dom├ícej 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 r├┤znym projektom.

Animovan├í uv├ştacia obrazovka Dmytra ─Żvivsk├ęho

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

Pozrite sa na animovan├║ uv├ştaciu obrazovku peria Dmytra Lvivsk├ę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├ş to bez ÔÇ×spotrebovaniaÔÇť drah├Żch zdrojov, preto┼że pou┼ż├şva iba CSS3. Je to jednoduch├ę, elegantn├ę, skromn├ę ÔÇőÔÇőa ─żahk├ę.

Humorista

Nasleduj├║ce pr├şklady ukazuj├║, ┼że ├║vodn├║ obrazovku je mo┼żn├ę pou┼żi┼ą aj na nastavenie t├│nu webovej str├ínky 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 starom├│dny, brut├ílne jednoduch├Ż a dokonale lad├ş s ak├Żmko─żvek osobn├Żm portf├│liom v├Żvoj├írov.

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

─îi u┼ż m├íte na mysli ┼ítatistick├Ż alebo d├ítov├Ż projekt, klesaj├║ci po─Źet Thibault Jan Beyer je dobr├Żm za─Źiatkom v├í┼ího rozpr├ívania. Anim├ícia sa otv├íra s klesaj├║cimi ─Ź├şslami, ktor├ę nakoniec dosiahnu podlahu 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 Domovská obrazovka Matta Feinsteina

Marvel Splash Screen 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 pr├şjemn├í anim├ícia m├í n├ídhern├║ komick├║ atmosf├ęru. Je to replika ├║vodnej sekvencie pre filmy Marvel ─Źo vyzer├í neuverite─żne.

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├║ ve─żmi v├í┼żne a sna┼żia sa zmeni┼ą ich na akciu nabit├║ s├║─Źas┼ą hry.

Uv├ştacie obrazovky vo webdizajne s├║ ├║─Źinn├ę, pokia─ż s├║ r├Żchle, kr├ítke, ─żahk├ę a do tej miery. Samozrejme pon├║kaj├║ cel├║ obrazovku, aby v├ím uk├ízali genialitu. St├íle mus├şte pokra─Źova┼ą vo svojej p├┤vodnej misii. Jedn├í sa o postriekania, ktor├ę by mali vzbudi┼ą z├íujem a okam┼żite z palice urobi┼ą vzru┼íuj├║ce rie┼íenie.