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.
