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.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- NPM
Installation requires NPM which is included with Node. You can install Node by downloading the installer from the website.
To update NPM to the latest version:
npm install -g npm@latest
- Clone the repo
git clone https://github.com/sargalias/100-days-css.git
- Install NPM packages
npm install
npm start
- Start the project for development:
npm start - Serve the production build of your site:
npm run serve
- Build the project for production:
npm run build
- Format code with Prettier code formatter:
npm run format
- Gatsby - Static site generator based on React.
- React - The JavaScript framework used.
- Prettier - Code formatting
- react-intersection-visible - Package for easy notification of when a component is visible on-screen.
- react-lazyload - Package for lazy-loading React components.
- react-helmet - Document head manager for React.
- And some others, including Gatsby plugins.
This project is licensed under the MIT License - see the LICENSE.md file for details.