My attempt at recreating some of the 100 Days CSS frames, with additional features.
- Responsiveness: These have been made almost 100% responsive, meaning that if you resize the frame width and height, it will be as though you zoomed in / out. The notable exceptions are the frames which contain text, as text can’t be sized relative to its container with CSS.
- Easy changes to each frame: Every frame has several variables which can be changed to affect how the image looks. Some math was used to make this work.
- Animations pause if the frame is not visible on the screen: This is because slower devices such as mobile were experiencing significant slowdown as more frames were added.
- Page is pre-rendered.
- Lazy loading of CSS frames further down the page.