
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
Contact Form plugins for Wordpress
Maps plugins for Wordpress
Translation plugins for Wordpress
Chat plugins for Wordpress
Slider plugins for Wordpress
Reviews plugins for Wordpress
Contact plugins for Wordpress
Galleries plugins for Wordpress
SEO plugins for Wordpress
Forms plugins for Wordpress
Comments plugins for Wordpress
Backup plugins for Wordpress
Privacy plugins for Wordpress
Optimize plugins for Wordpress
Tabs plugins for Wordpress
Social Sharing plugins for Wordpress
Events Calendar plugins for Wordpress
Comments plugins for Wordpress
Social Feeds plugins for Wordpress
Social Sharing plugins for Wordpress
Portfolio plugins for Wordpress
Video Player plugins for Wordpress
popup plugins for Wordpress
SiteMap plugins for Wordpress
Payment plugins for Wordpress
Coming Soon plugins for Wordpress
Inventory plugins for Wordpress
Testimonials plugins for Wordpress
Portfolio plugins for Wordpress
Membership plugins for Wordpress
Forms plugins for Wordpress
Analytics plugins for Wordpress
Events Calendar plugins for Wordpress
Sliders plugins for Wordpress
Analytics plugins for Wordpress
Reviews plugins for Wordpress
Security plugins for Wordpress
Ads plugins for Wordpress
Music Player plugins for Wordpress
Countdown plugins for Wordpress
Email Marketing plugins for Wordpress
Membership plugins for Wordpress
Ecommerce plugins for Wordpress
Customer Support plugins for Wordpress
Video Player plugins for Wordpress
Tabs plugins for Wordpress
Social Feeds 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.
Create interactive video polls that use engaging clips to boost participation, gather insights, and help visitors vote in a more dynamic way.
Display ratings from multiple platforms in a reviews trust box that builds credibility, social proof, and boosts conversions.
Use a timeline widget to display events and milestones in chronological order with images and text so visitors understand your story clearly.
Add pricing tables to your site to present plans clearly, help visitors compare features, and guide them toward faster and more confident conversions.
Use a notification bar to alert users, highlight offers, and drive clicks that boost engagement, signups, and conversions.

An Info List presents key details in a clear, structured format to improve user experience and support conversions.

Create consent forms that collect signatures, save submissions, send notifications, and help you manage approvals efficiently.
Show progress clearly with animated progress bars that visualize goals, highlight achievements, and keep visitors engaged and motivated.
Use a live weather forecast widget to show current conditions and upcoming predictions, giving visitors real time local weather updates for better planning.
Encourage interaction with social votes that let visitors like, upvote, and rank content, boosting engagement and guiding better decisions.

Show Mastodon posts in a live Mastodon feed that keeps content fresh, strengthens your social presence, and helps visitors engage with your updates.
Use an image magnifier to let visitors zoom in on photos, view fine details clearly, and enjoy a more accessible and informative visual experience.
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!
