├Ütok na animovan├ę pozadie zalo┼żen├ę na blob vo webdizajne

Animovan├ę pozadie je popul├írnou ─Źrtou modern├Żch webov├Żch str├ínok. U┼ż to nie je trend alebo nie─Źo mimoriadne. Je to iba jeden zo ┼żivotaschopn├Żch sp├┤sobov, ako ozdobi┼ą oblas┼ą hrdinu dnes. Aj ke─Ć st├íle existuje probl├ęm s kompatibilitou prehliada─Źa, rie┼íeniu sa podarilo n├íjs┼ą medzeru pre seba.

Existuj├║ r├┤zne typy anim├íci├ş. M├┤┼że┼í n├íjs┼ą:

K├Żm pred nieko─żk├Żmi rokmi dominovali kuracie dru┼żice anim├ície ─Źast├şc in┼ípirovan├ę kon┼ítel├íciou, dne┼ín├ę kvap├┤─Źkov├ę anim├ície vzru┼íuj├║ myse─ż tvoriv├Żch t├şmov. ─îo m├┤┼że┼í urobi┼ą? ─îist├ę spr├ívanie je neodolate─żn├ę. Rutina transform├ície, ktor├í ukazuje, ako sa ve─żk├í kvapka plynulo pohybuje vo vesm├şre, ─żahko vyhr├í online publikum a stavia va┼íe str├ínky do ─Źela.

Aby ste mohli vyu┼żi┼ą t├║to konven─Źn├║ techniku, pon├║kame v├ím zbierku vynikaj├║cich ├║tr┼żkov k├│du, ktor├ę v├ím poskytn├║ predstavu o tom, ako vytvori┼ą svoju vlastn├║ bublinov├║ anim├íciu. M├┤┼żete to urobi┼ą pomocou nov├Żch alebo tradi─Źn├Żch n├ístrojov. Teraz n├íjdeme perfektn├Ż z├ípas pre v├í┼í ─Ćal┼í├ş projekt.

Animácia blobov Uwe Chardon

Verzia tohto popul├írneho rie┼íenia Uwe Chardon je praktick├í a in┼ípirat├şvna. M├í jednoduch├║ a ploch├║ kvapku s kr├ísnou oran┼żovou farbou a hladk├Żmi okrajmi, ktor├í je umiestnen├í v ─Źistom prostred├ş. Dok├ízal ve─żmi dobre napodobni┼ą spr├ívanie siete.

V├Żsledkom je v├Żhern├í kombin├ícia jednoduchej formy a zlo┼żit├ęho spr├ívania, ktor├í vyzer├í dos┼ą p├┤sobivo.

Sledujte ─Źist├║ anim├íciu CSS od Uwe Chardon’s Pen

Ashton Holgate Blob

Vy┼í┼íie uveden├Ż pr├şklad predstavuje tradi─Źn├Ż typ kvapky nepravideln├ęho tvaru a relat├şvne v├Żraznej transform├ície. Tento projekt Ashtona Holgate v┼íak dodr┼żiava bo┼żskej┼íiu podobu, ktor├í takmer obklopuje kruh, a zmeny s├║ takmer nepostrehnute─żn├ę. Vyzer├í to v┼íak aj v├Żnimo─Źne.

Okrem toho sa umelec tie┼ż pohral s textom a prin├║til ho zmeni┼ą farbu na opa─Źn├║, ke─Ć sa dotkne oblasti s bublinami.

Pozri Blob pero od Ashtona Holgate

Odskakovac├ş naklada─Ź tekut├şn od Fabio Ottaviani

Fabio Ottaviani realizoval hrav├║ povahu podmaniv├ęho spr├ívania spojen├║ s anim├íciami blob. Bublina je s├şce mal├í, ale svojou kr├ísnou premenou a z├íbavou m├í ve─żk├Ż vplyv.

Hoci typov├Ż ┼ít├ştok pera hovor├ş ÔÇ×Nab├şja─ŹkaÔÇť, d├í sa ─żahko zmeni┼ą na dekorat├şvny detail pozadia. Aby ste to mohli urobi┼ą, v┼íetko, ─Źo potrebujete vedie┼ą, je HTML a CSS, preto┼że umelec nepou┼ż├şva ┼żiadne k├║zla JavaScript. M├║dra.

Pozri Kvapalinov├Ż naklada─Ź s v├Żsuvnou d├Żzou od Fabio Ottaviani

Test ┼íkv┼Ľn na pl├ítne od spolo─Źnosti Shaw

Na rozdiel od predch├ídzaj├║ceho pr├şkladu je tento pokles ─Źisto generovan├Ż skriptom JavaScript. Pripravte sa teda na ponorenie sa do vzru┼íuj├║ceho rie┼íenia a zlo┼żit├ęho hrania s grafikou. Koncept sa okrem toho l├ş┼íi od ostatn├Żch svojim primit├şvnym vzh─żadom a ve─żmi hladk├Żm a pokojn├Żm spr├ívan├şm, ktor├ę v┼íeobecne vytv├íra pokojn├║ atmosf├ęru.

Je celkom univerz├ílny a neutr├ílny. Takto by sa mohla sta┼ą perfektnou anim├íciou na pozad├ş pre r├┤zne projekty.

Pozri Shawov test Canvas Pen

Blob od Jeffrey

Toto rie┼íenie Jeffrey je v├ş┼ąaznou kombin├íciou dvoch trendov. Tu n├íjdete nepravideln├ę dno, ktor├ę je dnes ve─żmi popul├írne a ─Źist├ę spr├ívanie, ktor├ę prevl├ída nad in├Żmi mo┼żnos┼ąami.

├Ütr┼żok k├│du je vyroben├Ż pomocou HTML, CSS a JavaScript. Vyzer├í konzistentne vo viacer├Żch prehliada─Źoch a zariadeniach. Umelec pou┼ż├şva z├íkladn├Ż jarn├Ż algoritmus, v─Ćaka ktor├ęmu je interakcia s ve─żkou bublinou skuto─Źn├í a nie umel├í.

V┼íimnite si, ┼że hoci bublina zaber├í polovicu sc├ęny, nepreva┼żuje div├íkov. Za toto uv├í┼żenie stoj├ş hladk├ę a pokojn├ę spr├ívanie.

Pozrite sa na Jeffreyho pero

Charlotte Dann Blobs

Ak jedna kvapka nesta─Ź├ş na vytvorenie vhodn├ęho dojmu, m├┤┼żete si vybra┼ą v┼żdy tucet. Charlotte Dann so svoj├şm ┼íikovn├Żm ├║tr┼żkom k├│du v├ím uk├í┼że, ako to urobi┼ą, bez toho, aby ste zni─Źili celkov├Ż efekt a zap├┤sobili na n├ív┼ítevn├şkov.

Jeho ├║ryvok k├│du je iba pote┼íen├şm. M├í ve─ża mal├Żch bubl├şn v pohybe, ktor├ę vz├íjomne p├┤sobia. Ka┼żd├Ż vyzer├í ako mal├Ż bod svetla. Spolo─Źne vytv├íraj├║ ve─żk├║ kvapku, ktor├í vy┼żaruje teplo na v┼íetk├Żch frontoch.

Sledujte Pen Blobs Charlotte Dann

Teraz sa presu┼łte z rovinn├ęho sveta do trojrozmern├ęho sveta.

Blob Georgi Nikoloff

Blok Georgiho Nikoloffa je pr├şkladom. Okam┼żite upozor┼łuje svojou ┼żiarivou farbou, vyspel├Żm vzh─żadom a dynamick├Żm spr├ívan├şm. V├Żvoj├ír v plnej miere vyu┼ż├şva pokro─Źil├ę technol├│gie a vyu┼ż├şva WebGL, GLSL a shadery vo svoj prospech. Aj ke─Ć toto rie┼íenie podlieha kompatibilite prehliada─Źa, vyzer├í to in┼ípirat├şvne.

Pozri perie peria Georgiho Nikoloffa

Experimentova┼ą 6 autor: Daniel Del Core

Daniel Del Core ukazuje publiku online, ako si zahra┼ą so ┼íumom Simplex a opravi┼ą ho starostlivo reprodukovan├Żmi text├║rami. V├Żsledkom je paintbalov├í lopta in┼ípirovan├í sladkos┼ąami. Aj ke─Ć sa pohybuje ve─żmi r├Żchlo, je tak├ę fascinuj├║ce, ┼że je ┼ąa┼żk├ę okam┼żite zlo┼żi┼ą o─Źi.

Pozrite si experiment s perom # 6 autor: Daniel Del Core

Eli Fitch Kvapka falo┼ín├Żch ─Źast├şc

Na rozdiel od predch├ídzaj├║ceho pr├şkladu, ktor├Ż m├í v├Żrazn├║ osobnos┼ą a charizmu popovej hviezdy 80. rokov posadnut├║ spandexom, vyzer├í to ako nie─Źo zo skromn├ęho bud├║ceho techna. Blok je skon┼ítruovan├Ż z mal├Żch ─Źast├şc, ktor├ę s├║ v niektor├Żch uhloch jasnej┼íie pre 3D vzh─żad.

Je prekvapuj├║ce, ┼że umelec pri realiz├ícii tohto konceptu vyu┼ż├şva k├║zlo Three.js a d├┤myseln├ę texturovan├ę procedur├ílne pr├íce.

Pozri falo┼ín├ę pero ─Źast├şc Eli Fitcha ─Ź. 3December

Generátor CSS Blob od Edwina Chena

Na┼ía zbierka uzavrieme s gener├ítorom CSS Blob od Edwina Chena. Ako u┼ż n├ízov napoved├í, toto gu─ż├┤─Źkov├ę pero m├í mal├ę ihrisko, na ktorom je mo┼żn├ę vytvori┼ą tvar kvapky.

Tu n├íjdete mal├Ż panel, kde m├┤┼żete ka┼żdej hrane priradi┼ą polomer. Hoci je statick├Ż a ploch├Ż, m├┤┼żete ho ─żahko skop├şrova┼ą a presun├║┼ą pomocou JavaScriptu.

Pozri generátor pera CSS Edwina Chena

Perfektn├Ż tvar pre relaxa─Źn├ę prostredie

Nie je prekvapuj├║ce, ┼że pokojn├í a jemn├í povaha tekut├ęho spr├ívania sa dnes st├íva popul├írnou. Rovnako ako fascinuj├║ci mal├Ż potok pretekaj├║ci lesom v├ís pri┼ąahuje a sl├║┼żi ako ostrov pokoja v neust├íle sa meniacom online svete.

Anim├ície zalo┼żen├ę na blob s├║ navrhnut├ę tak, aby boli pr├şnosom pre modern├ę projekty. S├║ diskr├ętne, aj ke─Ć ur─Źite pri┼ąahuj├║ pozornos┼ą. ─îi u┼ż si vyberiete elegantn├Ż, ploch├Ż alebo extravagantn├Ż 3D v├Żtvor, ─żahko si vytvor├şte pokojn├║ atmosf├ęru.

Obohat├ş z├í┼żitok, skr├í┼íl├ş pozadie a z├írove┼ł uvo─żn├ş obsah. Tieto s├║vislosti pom├┤┼żu udr┼ża┼ą rovnov├íhu medzi vizu├ílnymi a textov├Żmi ├║dajmi.