‘Banksy Artwork Shredder’ Lets You Recreate The Epic Prank Effect Using CSS Grid
By Izza Sofia, 10 Oct 2018
Anonymous British street artist Banksy pulled an art prank over the weekend that made headlines around the world.
Banksy’s Girl with Balloon painting shredded itself via a hidden mechanism within its frame, seconds after fetching US$1.4 million at an auction held by Sotheby’s.
The stunt has not only elicited responses from brands such as McDonald’s and IKEA, but also artists worldwide. Now, web developer Lee Martin has created a ‘Banksy Artwork Shredder’ so you can recreate this effect on your own.
On Medium, Martin introduced the tutorial in CodePen.IO where you can achieve the same effect using CSS Grid.
With Martin’s series of codes and explanation on how to achieve the desired effect, you can recreate similar graphics to these animated examples, shown below.
Those interested can learn more in the tutorial and get the codes here.
First of all, check out these cool assets. If you consider this a stack of 🥞 ... the wooden panel would be the bottom, the green square middle, and the picture frame with "shred lines" top. pic.twitter.com/fjqPR0PJ74— Lee Martin (@leemartin) October 9, 2018
So the first thing I would do is overlay the green square on top the wooden panel and animate it down about half it's height over tht period of 10 seconds. pic.twitter.com/jJPvDF1WSj— Lee Martin (@leemartin) October 9, 2018
Then if we overlay the picture frame on top of that. Voila. pic.twitter.com/fyIVkCWccW— Lee Martin (@leemartin) October 9, 2018
Of course, a little bit of sound doesn't hurt either. 🔈 pic.twitter.com/1enImWEtoO— Lee Martin (@leemartin) October 9, 2018
Then you can choose your image. Whatever you want. pic.twitter.com/rwMsyi9bYm— Lee Martin (@leemartin) October 9, 2018
[via Medium, opening image via Lee Martin]
More related news