Jak obnovit drsný skartovač uměleckých děl pomocí mřížky CSS

CodePen v ceně

Představovat skartování “Po dešti” Anne Blenker. (Promiň Anne)

V pátek Banksy zasáhla svět opět skartováním „Girl With Balloon“ ihned poté, co v aukci přinesla 1,4 milionu dolarů. Zatímco všichni debatují o tom, zda se kresba kvůli tomu zvýšila nebo snížila, domníval jsem se, že by bylo zábavné znovu vytvořit efekt v CodePen.IO pomocí CSS Grid. Můžete se podívat na výsledek mého hodinového freestyle sezení na CodePen a pokračovat ve čtení pro rychlý přehled o mém přístupu.

Nebyl jsem stydlivý vytvářet na tomto drsném řešení spoustu prvků, a tak jsem nashromáždil řadu divů, které byly většinou umístěny absolutně, a pak jsem středový prvek # piece uprostřed vystředil.

Přímo uvnitř # kusu jsou dvě divy: #window a #frame. #frame je prostě 100% x 100% obrázek rámečku kresby, který umístíme na vrchol všeho. #Window je umístěno níže a je také vystředěno uvnitř #piece. Tento #window obsahuje náš #painting div, který obsahuje #originální i #shredded obraz. Skutečná magie se vyskytuje uvnitř #shredded prostřednictvím řady .shred divs, které použijeme kombinaci mřížky na pozadí a mřížky CSS k vytvoření skartovaných verzí našeho obrázku kresby. Každý .shred umístí pozadí mírně doleva.

#shredded {background: url (ARTWORK_URL); dole: 0; displej: mřížka; mezera ve sloupci mřížky: 3px; sloupce mřížky-šablony: opakování (11, 1fr); pozice: absolutní; }
#shredded .shred: nth-child (1) {Pozice na pozadí: 0% 0%; } #shredded .shred: nth-child (2) {background-position: 10% 0%; } #shredded .shred: nth-child (3) {pozice na pozadí: 20% 0%; } #shredded .shred: nth-child (4) {pozice na pozadí: 30% 0%; } #shredded .shred: nth-child (5) {Pozice na pozadí: 40% 0%; } #shredded .shred: nth-child (6) {pozice na pozadí: 50% 0%; } #shredded .shred: nth-child (7) {pozice na pozadí: 60% 0%; } #shredded .shred: nth-child (8) {pozice na pozadí: 70% 0%; } #shredded .shred: nth-child (9) {pozice na pozadí: 80% 0%; } #shredded .shred: nth-child (10) {pozice na pozadí: 90% 0%; } #shredded .shred: nth-child (11) {pozice na pozadí: 100% 0%; }

Moje hackerské řešení pak posouvá celou # malbu dolů pomocí translateY a také mění velikost #originální kresby na 0. Protože #originální div je umístěn na vrcholu #shredded a #shredded je umístěn na dně, odečtením jeho výšky se odhalí drcený obrázek níže. Tyto animace můžete velmi snadno provádět přímo v CSS. Rozhodl jsem se však hodit Anime.JS, takže jsem měl trochu větší kontrolu nad zastavením a resetováním animace, protože jsem věděl, že přidám schopnost změnit obrázek. Zde je návod, jak Anime.JS usnadňuje práci s animacemi:

anime ({cíle: '#original', výška: 0, trvání: 100000, uvolnění: 'lineární'})
anime ({cíle: '#painting', translateY: '100%' trvání: 100000, uvolnění: 'lineární'})

A to je o tom. Můžete se kopat do zbytku CodePen a podívat se, jak jsem zapojil schopnost změnit obrázek pomocí vynikající knihovny Javascript Load Image od Vue a Blue Imp.

Byl to hodinový hack, takže jsem si jist, že čtenáři budou mít na mysli mnohem elegantnější řešení. Řekl někdo lineární gradienty? Rád bych slyšel, jak byste to udělal a jaké vylepšení byste mohli udělat. Šťastný skartování!