Show HN: Interactive CSS 3D Animation(ugrp.gitlab.io)
ugrp.gitlab.io
Show HN: Interactive CSS 3D Animation
https://ugrp.gitlab.io/artworks/square-ball/
Javascript is used to offer flexibility in how many HTML elements are generated (20), and give each an `index=` attribute. Each HTML element is animated with CSS 3D perspective, and each elements of the DOM can be clicked. The "unlocked artwork animation" is made using JS, to circle though each element, and toggle them as "active". Inspired by PsyCrypto https://qri.org/blog/psycrypto-contest
2 comments
Can someone explain what's going here with LSD and "decoding" these peices?
Well, as the animation is built with CSS, animating HTML elements, all of these, can be "clicked".
Because HTML elements can have ":active" states, which are stylable with CSS, it is possible to bring the "artwork" in different "states".
Because CSS can target elements, based on "some logic", such as "target the element that follows maybe this element, when it has the attribute <attr> and...", it is possible to bring the animation to update it self.
And as the original links points out, there are ways to "encode" the visual information, in ways that you might have to be in an altered state of consciousness, to be able to decode the message, from the visual data.
This CSS animation, is an attempt at playing with all the aspects, transforming an HTML page into a "small interactive visual artwork/game", which "reward" is to unlock a "state of the animation" that has a visual message.
Because HTML elements can have ":active" states, which are stylable with CSS, it is possible to bring the "artwork" in different "states".
Because CSS can target elements, based on "some logic", such as "target the element that follows maybe this element, when it has the attribute <attr> and...", it is possible to bring the animation to update it self.
And as the original links points out, there are ways to "encode" the visual information, in ways that you might have to be in an altered state of consciousness, to be able to decode the message, from the visual data.
This CSS animation, is an attempt at playing with all the aspects, transforming an HTML page into a "small interactive visual artwork/game", which "reward" is to unlock a "state of the animation" that has a visual message.