
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 JavaScript code in the footer and nothing else.
No additional HTTP requests, no additional queries to the database.
If you measure the performance with or without this plugin, you will not notice any difference.
This plugin is useful if:
With the following few lines of pure CSS for example you can create a rotation effect.
.cciv-el{transition: 2s transform ease}
.cciv-el.in-viewport{transform:rotateY(0deg)}
.cciv-el.not-in-viewport{transform:rotateY(180deg)}
.cciv-no-script .cciv-el{transform:none !important}
You can read more about CSS animations and transitions on W3Schools:
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/css/css3_transitions.asp
You can change the selector to target the elements that you want to animate using the filter ‘cciv_el_selector’.
If for example instead of the CSS class .cciv-el you want something specific to your case, you can add this code in the functions.php of your child theme if any, or in a functional plugin:
add_filter( 'cciv_el_selector','my_cciv_selector' ); function my_cciv_selector( $selector ){ return '#my-custom-id .my-custom-class'; //The elements will not be target anymore by .cciv-el but by what you specify here } Don’t lose time any more with heavy jQuery effects, you need just a few lines of CSS, the rest is given by this plugin using few lines of 100% pure JavaScript inlined in the footer.
No performance loss, and no time loss if you have CSS skills.
Starting from $0 per month.
Rating
Reviewers
1 reviews
Tags
Developed By
Jose
Quick & Easy
Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!
Testimonial plugins for Wordpress
Galleries plugins for Wordpress
SEO plugins for Wordpress
Contact Form plugins for Wordpress
Forms plugins for Wordpress
Social Feeds plugins for Wordpress
Social Sharing plugins for Wordpress
Events Calendar plugins for Wordpress
Sliders plugins for Wordpress
Analytics plugins for Wordpress
Reviews plugins for Wordpress
Comments plugins for Wordpress
Portfolio plugins for Wordpress
Maps plugins for Wordpress
Security plugins for Wordpress
Translation plugins for Wordpress
Ads plugins for Wordpress
Video Player plugins for Wordpress
Music Player plugins for Wordpress
Backup plugins for Wordpress
Privacy plugins for Wordpress
Optimize plugins for Wordpress
Chat plugins for Wordpress
Countdown plugins for Wordpress
Email Marketing plugins for Wordpress
Tabs plugins for Wordpress
Membership plugins for Wordpress
popup plugins for Wordpress
SiteMap plugins for Wordpress
Payment plugins for Wordpress
Coming Soon plugins for Wordpress
Ecommerce plugins for Wordpress
Customer Support plugins for Wordpress
Inventory plugins for Wordpress
Video Player plugins for Wordpress
Testimonials plugins for Wordpress
Tabs plugins for Wordpress
Social Sharing plugins for Wordpress
Social Feeds plugins for Wordpress
Slider plugins for Wordpress
Reviews plugins for Wordpress
Portfolio plugins for Wordpress
Membership plugins for Wordpress
Forms plugins for Wordpress
Events Calendar plugins for Wordpress
Contact plugins for Wordpress
Comments plugins for Wordpress
Analytics plugins for Wordpress
Common Ninja Apps
Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.
Showcase videos with a video gallery that organizes clips from multiple sources in clear visual layouts that keep visitors watching and support higher conversions.
Add interactive image hotspots to your site to turn static visuals into clickable guided experiences that improve engagement.

Show Facebook posts in a live Facebook feed that keeps content fresh, boosts social proof, and helps visitors engage more with your brand.
Add a Stripe Button to your website to give customers a fast, trusted checkout experience.
Showcase clips with a video slider that plays videos from multiple sources in a smooth slideshow, improving design and keeping visitors engaged.
Add a currency converter to your site so users can view equivalent values in their local currency for easier global access.
Show Medium articles in a Medium feed that keeps content fresh, improves readability, and helps visitors discover more posts.
Show LinkedIn posts in a live feed that keeps updates current, builds credibility, and helps visitors engage with your brand.
Scroll to element button that improves navigation by letting visitors jump directly to key sections, reducing friction and boosting overall engagement.
Add a customizable leaderboard to your site to display rankings, track scores, and encourage friendly competition.
Show social proof that displays real user activity to build trust instantly, boost credibility, and help increase conversions across your site.
Add announcements to your site to share important updates, keep visitors informed, and guide them toward actions that support engagement and conversions.
More plugins
The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!
