Want to have a gorgeous, interactive timeline feature on your website like this?
Then follow these simple steps to upgrade your website too!
Add a blank strip, and stretch it to full width and set the height to 1000 pixels.

2. Create a two tone image (the two colors are the different colors you'll see as you scroll) and set it as the background for the strip

3. Duplicate this strip so the new one is right under the original, and set the background scroll effect to reveal for both strips.

4. Create a timeline cutout element in your preferred design interface (I used Adobe Illustrator). Add a new strip with a height of 2000 pixels and set this image as the background. Then set the color behind the image to an opacity of 0.

5. Drag your 2000 pixel tall strip over the other two strips until it's perfectly aligned on top.

6. Add your text and images, animate them, and enjoy your new gorgeous timeline feature!


Comentários