Control Pixel Art Sprites With CSS Scroll-Driven Animations
These fancy, new, CSS scroll-driven animations are proving to be pretty darn powerful. I found Bramus' concept of using them to detect scroll direction intriguing, and after experimenting a bit, discovered that detecting multiple axes allows you to directionally control an image sprite! Without JavaScript! This involves creating stepped sprite animations for each direction and running them when that direction is detected.
The Concept
I'd recommend reading the single axis explanation first as Bramus goes into the core concept. The multi axis is essentially the same, just duplicated for the horizontal axis which can be seen in the Wormhole demo and my reduced experiment. Detecting both axes just comes down to adding another animation timeline for the inline axis, and when you combine this with style queries, you get 4 way control over an image sprite.
@container style(--scroll-block-direction: 1) {
.character:before {
animation-name: to-bottom;
}
}
@container style(--scroll-inline-direction: 1) {
.character:before {
animation-name: to-right;
}
}See the Pen 4 direction pixel art sprite control with CSS Scroll-Driven Animations by James Basoo (@jbasoo) on CodePen.
Your browser doesn't support Scroll-Driven Animations, here's a video of the demo instead. Live demo on Codepen
You might notice that diagonal movement is a little rough, however this is totally fixable. My reduced experiment shows that it's possible to infer a diagonal directions! By combining horizontal and vertical detection in style queries, we get 8 detectable directions!
@container style(--scroll-block-direction: 1) and style(--scroll-inline-direction: 1) {
h1:before {
content: "↘";
}
}This then allows us to use an 8 direction character sprite to handle diagonal movement, albeit with slightly janky results.
See the Pen 8 direction pixel art sprite control with CSS Scroll-Driven Animations by James Basoo (@jbasoo) on CodePen.
Your browser doesn't support Scroll-Driven Animations, here's a video of the demo instead. Live demo on Codepen
Caveats
The main caveat here is that the character doesn't remain in the direction they're pointed at. This is due to the scroll direction not persisting and returning to an idle state. I'm pretty sure I saw a demo around for triggering and persisting a state through scroll-driven animations or maybe animation-fill-mode might help, but it's 2AM at the time of writing so that's a job for future James.
Another caveat is that the web just wasn't meant for this. Controlling a character via scroll is pretty janky so I'm not sure it would be viable for an actual game. Still, it's a fun, zero JS experiment!
Pondering Possibilities
The original demos utilised scroll velocity but I haven't tried that yet. The possibilities seem endless here, but I was pondering whether showing cartoony "speed lines" on fast scroll would be feasible. Bramus sounded hopeful so I may give that a shot at some point.
To be honest I still haven't fully grasped the original concept, I need to do more tinkering. I've only managed to detect 8 directions, but maybe one of you maths boffins can figure out more fine-grained directionality based on the velocities/directions.
Happy coding, you got this!