Skip to main content

ALL DAY LONG part 2: images

· One min read

Implementing the animation.

ALL DAY LONG (7 part series)
  1. Introduction
  2. Concept
  3. Images
  4. HTML
  5. CSS
  6. JS
  7. Conclusion

Images​

Using Figma, I recreated the lettering with simple shapes, getting it close enough to the original. The gap between the top and bottom words is baked into the images. Because the ribbon flips vertically, the back image must be vertically mirrored so the text appears correct when the fragment rotates.

Result​

With that, the images are ready to be used in the animation. Check the HTML code in the next post.

front.png



back.png