Change class in viewport: create animations with pure CSS

When a specific element of the page enters the viewport, it adds the CSS class “in-viewport” to that element.

When the same element goes out from the viewport it remove the CSS class “in-viewport” and adds the class “not-in-viewport”.

To target the elements, you just need to assign them the CSS class “cciv-el”.

It’s useful to add your custom animations on scroll just with a few lines of CSS.

This is a plugin for CSS developers who want to add simple but effective animation only with pure CSS.

In case the user disables JavaScript, the body of the page will have the CSS class “cciv-no-script”. Use it to don’t show strange things when JavaScript is disabled.

The plugin is ultra light. It adds a few lines of pure JavaScri…