Part Two: Random Cool New Features
So this next section I did ponder for a while. I could take you straight on to a much better way of creating visuals within the DOM, but before I do that I want to introduce some new features we have in simple CSS that can really help our visuals later down the track. Our inspiration for this set is a little tumblr called Archery: Into the Continuum. Here I want to take inspiration from some of these random gifs, not exactly replicate them.
So first up, this gif:
Custom Properties
Or JavaScript all up in your CSS
And the much talked about CSS Custom properties. ✨💥💜 We can really use these to our advantage when doing audio vis work as we can reference them directly in our JavaScript and basically update our CSS in realtime.
Custom properties are declared at the start of your CSS with a :root block and can be references throughout your CSS, much like (but not entirely) pre-processor variables. So instead of declaring properties that make sense as far as styling goes, I’m going to be changing them within my JavaScript, so it makes sense to name them something a little more explicit.
For this we’ll create a —level property, and just grab one of the items of the frequencyData array and pipe it in. This is where the magic happens:
:root {
--level: 1;
}document.documentElement.style.setProperty('--level', frequencyData[10]/255);
This —level property will now update within our css. Oh. My. Gawd. I know right… 😱
Magic!
So if we use it on the opacity for instance:
i {
opacity: var(--level);
}Boom! Opacity of i updated! In real time, in our CSS.
I know - all the wows!