[araes]

Tried this a little bit ago when making a website to try and qualify for the No JS Club inclusion. Wanted to include a bunch of interactive torches that would light when you click on them, and then turn off with subsequent clicks. Grabbed a bunch from the old Geocities gif image archive [1], and then turned them into something similar to this article.

[1] https://gifcities.org/search?q=torch

Part I found a bit difficult was using background images, rather than using <img src""> links, and performing x and y shifting to minimize the use of enormous aspect ratio image files (really long strip of image sideways).

Finally settled on something that looks like:

  .fire_torch2.trch_sprt {
    position: absolute;
    width: 24px;
    height: 53px;
    bottom: 0px;
    left: 0px;
    background-image: url('../items/fire_torch2_sprite.png');
    background-position: 0px 0px;
    background-size: 120px 265px; /* 5 columns * 24px, 5 rows * 53px */
    animation:
      fireTorch2SpriteX 0.55s steps(5) infinite, /* 1 second to complete one row */
      fireTorch2SpriteY 2.75s steps(5) infinite;
    display: none;
  }

  @keyframes fireTorch2SpriteX {
    from { background-position-x: 0; }
    to { background-position-x: -120px; } /* 5 columns * 24px */
  }

  @keyframes fireTorch2SpriteY {
    from { background-position-y: 0; }
    to { background-position-y: -265px; } /* 5 rows * 53px */
  }

Interactivity is handled by using the checkbox hack like so:

  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_drk { display: none; }
  .fire_torch:has( .Lntrn_fire_swtch:checked ) .trch_sprt { display: inline-block; }

The part that's weird with background images though, is that you have to set them up with negative (-) background shifts. So the 24px x 53px image actually shifts -120px sideways each time it goes through an x-loop.

Further, since the sprite sheet is actually 120px x 265px to handle 5 rows of 5 frames, it then requires a somewhat complicated @keyframe definition setup. It actually needs one x-loop that's short, and loops endlessly, going through the full 5 frames, and a second 5x step length y-loop that then iterates once every full x-loop.

Actually imagery and animations that can be played with can be found here: https://araesmojo-eng.github.io under "Lantern Tests Menu"

NOTE: Needs the lantern to function and light the torches. Requires other minor puzzles on the website.