About the Demo
Who
This demo was originally created by Manoela llic, who is the editor-in-chief at Codrops.
What
This demo shows on-scroll animations on images in columns and rows.
Where
The original demo article can be found here.
When
This demo was created in 2023.
Why
This concept was interesting to me because I thought of a layout of an online store. Online store product pages are often laid out as a grid with squares/rectangles like this demo. If a company wanted to give their online store a little extra flair, I think this demo could provide that.
Instructions to Implement Demo
- Go to Tympanus.net.
- Click Variation 4 in the navigation menu.
- Right-click and select "inspect" or use control/command + shift + c.
- Select the "Sources" tab.
- In the left side file structure, you will see the Development/OnScrollColumnsRows folder. Click the small triangle on the left next to the folder name to see into all the folders within this folder. Then, select one file at a time. The selected file's code will appear. Use command/control + a to copy the entire code for a file.
- For each file that is copied, create an a duplicate file structure in your code editor with the same file names and then paste the code in the appropriate file.
- Make any customizations you would like to the code. For example: I changed the background color to "whitesmoke" and inserted new images.