Attack mot bakgrunden baserat på blob-animation i webbdesign

Animerade bakgrunder är ett vanligt inslag på moderna webbplatser. Det är inte längre en trend eller något extraordinärt. Det är bara ett av de möjliga sätten att dekorera ett hjälteområde nuförtiden. Även om det fortfarande finns ett problem med webbläsarkompatibilitet, har den här lösningen hittat ett eget sätt.

Det finns olika typer av animationer. Du kan gå igenom:

Medan för några år sedan inspirerade partikelanimation den konstellation som styrde hönsgården, stimulerar idag teardrop-animation sinnena hos kreativa team. Vad kan du göra? Löslöst beteende är oemotståndligt. Konverteringsrutiner visar hur en stor droppe som rör sig smidigt genom rymden lätt vinner över en onlinepublik och tar din webbplats till toppen.

För att dra fördel av den här konventionella tekniken förser vi dig med en uppsättning utvalda utdrag som ger dig en ledtråd om hur du bygger din egen bubbelanimation. Du kan göra det med traditionella eller nya verktyg. Hitta nu den perfekta matchningen för ditt nästa projekt.

Uwe Chardon blob-animation

Uwe Chardons version av denna populära lösning är praktisk och inspirerande. Den har en enkel, platt droppe med en fin orange färg och släta kanter i en ren miljö. Han lyckades efterlikna flytande beteende ganska bra.

Resultatet är en vinnande kombination av enkel form och komplext beteende som ser ganska imponerande ut.

Se Uwe Chardons rena CSS-animation

Ashton Holgate Blob

Exemplet ovan representerar en traditionell dropptyp med en oregelbunden form och en relativt uttrycksfull transformation. Detta Ashton Holgate-projekt håller sig dock till en mer gudomlig form, nästan på gränsen till cirkeln, och förändringarna är knappt märkbara. Men det verkar också speciellt.

Dessutom har konstnären också lekt med texten och tvingat den att ändra färg till motsatt sida när den träffar bubbelområdet.

Se Ashton Holgate’s Blob Pen

Fabio Ottaviani flytande hjullastare

Fabio Ottaviani har praktiserat den lekfulla karaktären hos manipulativt beteende som är inneboende i blob-animation. Dess bubblor är små, men den gör stor inverkan med sin bedårande twist och munterhet.

Även om det står “Laddare” på pennprojektets namnskylt kan den enkelt omvandlas till en dekorativ bakgrundsdetalj. Och för att göra detta är allt du behöver veta HTML och CSS, eftersom artisten inte använder någon JavaScript-magi. Smart.

Se Fabio Ottavianis Bounce Boom Liquid Loader

Shaws tygfläckstest

Till skillnad från det föregående exemplet genereras denna droppe helt av JavaScript. Så gör dig redo att kasta dig in i en intressant lösning och komplext spelande med grafik. Dessutom skiljer sig konceptet från andra i sitt primitiva utseende, som tillsammans med sitt ganska släta och lugna uppträdande skapar en lugn atmosfär.

Det är ganska universellt och neutralt. Därför kan det bli en perfekt animation för många projekt.

Titta på Shaw’s Canvas Pen Test

Jeffreys Blob

Denna Jeffrey-lösning är en vinnande kombination av två trender. Här kan du hitta en ojämn botten som är mycket vanlig nuförtiden och det flytande beteende som råder över andra alternativ.

Snuttar genereras med HTML, CSS och JavaScript. Det ser konsekvent ut över webbläsare och enheter. Konstnären använder en grundläggande fjäderalgoritm som gör att interaktionen med den stora bubblan känns verklig och inte konstgjord.

Observera att även om bubblan tar upp hälften av scenen så dominerar den inte tittaren. Ett smidigt och lugnt uppträdande ligger bakom denna försiktighet.

Titta på Jeffreys penna

Blobs av Charlotte Dann

Om en droppe inte räcker för att göra rätt intryck kan du alltid välja ett dussin av dem. Charlotte Dann visar med sitt snygga kodavsnitt hur du gör utan att förstöra den övergripande effekten och överväldigande dina besökare.

Det är bara en njutning att se. Den har många små rörliga bubblor som interagerar med varandra. Var och en ser ut som en liten ljuspunkt. Tillsammans bildar de en stor droppe som utstrålar värme på alla fronter.

Se Charlotte Danns Pen Blobs

Låt oss nu gå från den platta världen till den tredimensionella världen.

Georgi Nikoloffs Blob

Georgi Nikoloffs Blob är ett exempel. Den fångar omedelbart ögat med sina livfulla färger, högteknologiska utseende och dynamiska beteende. Utvecklare drar full nytta av den senaste tekniken och använder WebGL, GLSL och shaders till sin fördel. Även om den här lösningen är föremål för webbläsarkompatibilitet, ser den inspirerande ut.

Titta på Georgi Nikoloffs lurviga klump

Experiment 6 av Daniel Del Core

Daniel Del Core visar en onlinepublik hur man leker med Simplex-brus och fixar det med några noggrant återgivna texturer. Resultatet är en godisinspirerad paintball. Även om han rör sig ganska snabbt är han så attraktiv att det är svårt att ta bort blicken direkt.

Se penntest #6 av Daniel Del Core

Eli Fitch tappar falska frön

Till skillnad från det tidigare exemplet, som har den djärva personlighet och karisma som en spandex-besatt popstjärna från 80-talet, känns det här som något av blygsam futuristisk ingenjörskonst. Blobbarna är byggda av små partiklar som blir ljusare i vissa vinklar för en 3D-bild.

Inte överraskande använder konstnären magin med Three.js och genialt procedurarbete för att implementera konceptet.

Se Eli Fitchs partikelpenna #3 december

Edwin Chens CSS Blob Generator

Vi avslutar vår samling med Edwin Chens CSS Blob Generator. Som rubriken säger har denna kulspetspenna en liten lekplats där du kan skapa droppformer.

Här hittar du en liten panel där du kan tilldela en radie till varje kant. Även om det är statiskt och platt kan du enkelt kopiera resultatet och få det att röra sig med hjälp av JavaScript.

Se Edwin Chens CSS CSS-generatorprogramvara

Perfekt form för en avkopplande miljö

Det är inte överraskande att den smidiga, lugna naturen hos flytande beteende ökar i popularitet nu för tiden. Som en fascinerande liten bäck som rinner genom skogen, drar den in dig och fungerar som en ö av lugn i den ständigt föränderliga onlinevärlden.

Blob-baserad animering är avsedd att gynna moderna projekt. De är diskreta, även om de säkert drar till sig uppmärksamhet. Oavsett om du väljer en snygg, platt eller flamboyant 3D-realism kommer du enkelt att skapa en lugn atmosfär.

Det kommer att berika upplevelsen, försköna bakgrunden och samtidigt ge plats åt innehåll. Dessa plattformar hjälper dig att upprätthålla en balans mellan visuell och textdata.