Chapter 2: Products Listing & Cascade Effect

Starting Snapshot

Next Steps

🖼️ Adding the poster block

For our next task, let's tackle a block that contains long image and some text. We'll refer to this block as the 'poster.' Let's dive in!

🪄 Poster scroll-based animation

With locomotive-scroll it's very easy to add a CSS progress to a specific DOM element. First let's start by adding some required HTML attributes to our block :

🔳 The product tile

Let's review this handy snippet

👕 Adding the products listing

Alright, now let's attack the main part of this chapter : The products listing.

🌊 Cascade Effect

Add some parallax to that product listing

✅ Result

What it should look like at the end of this chapter