Image revealing animation

[umerzamanlive]

Hey guys,

I want to add On scroll image revealing animation on my website. Check out the link below to see the image revealing animation which I want to add in my website but I can’t seem to find anything helpful example or library on the internet so I could do it myself. It would be great if you guys could help me to do this animations.

Here is the Link: http://renvoye.com/case-mixpanel

Best Regards,
Umer Zaman

[Beverleyh]

This is one way http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm

• Notes/explanation at the bottom.
• Article linked at the top.
• Script in the source code.

The logic
1. Watch a “trigger” element as the page scrolls.
2. When the “trigger” element appears in the bottom of the viewport, add a class to a “target” element (trigger and target can be the same thing, or different).
3. The newly added class triggers a CSS animation.

[umerzamanlive]

Hey thanks for the reply though but this is not what i’m looking for and I know how On scroll animations works and did lot of On scroll animations myself but I can’t seem to do image reveal animation on my own. It would be great if you could share the right (image revealing animation) example.

Thanks

[Beverleyh]

Look at Animate.css… “fadeInUp” seems about right. You can extract the pertinent CSS directly from the library (leaving suitable credits in your stylesheet of course) so that you’re only loading in a few lines of CSS rather than the whole shebang.

[Author]

Posts