{"id":144882,"date":"2021-07-26T11:11:04","date_gmt":"2021-07-26T11:11:04","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/change-class-in-viewport\/"},"modified":"2025-12-05T08:42:38","modified_gmt":"2025-12-05T08:42:38","slug":"change-class-in-viewport","status":"publish","type":"plugin","link":"https:\/\/li.wordpress.org\/plugins\/change-class-in-viewport\/","author":15497876,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.0.5","stable_tag":"0.0.5","tested":"6.9.4","requires":"4.6","requires_php":"5.6","requires_plugins":null,"header_name":"Change class in viewport","header_author":"Jose Mortellaro","header_description":"It helps you to add your custom animations on scroll just with a few lines of CSS.","assets_banners_color":"ffffff","last_updated":"2025-12-05 08:42:38","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/josemortellaro.com","header_author_uri":"https:\/\/josemortellaro.com","rating":5,"author_block_rating":0,"active_installs":50,"downloads":2486,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","changelog"],"tags":{"0.0.1":{"tag":"0.0.1","author":"giuse","date":"2021-07-26 12:04:16"},"0.0.2":{"tag":"0.0.2","author":"giuse","date":"2021-07-27 10:50:27"},"0.0.3":{"tag":"0.0.3","author":"giuse","date":"2023-08-09 07:15:25"},"0.0.5":{"tag":"0.0.5","author":"giuse","date":"2025-12-05 08:42:38"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128-rtl.jpg":{"filename":"icon-128x128-rtl.jpg","revision":2572270,"resolution":"128x128","location":"assets","locale":""},"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":2572270,"resolution":"128x128","location":"assets","locale":""},"icon-256x256-rtl.jpg":{"filename":"icon-256x256-rtl.jpg","revision":2572270,"resolution":"256x256","location":"assets","locale":""},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":2572270,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":2572270,"resolution":"1544x500","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.0.1","0.0.2","0.0.3","0.0.5"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[10079,6757],"plugin_category":[50],"plugin_contributors":[157933],"plugin_business_model":[],"class_list":["post-144882","plugin","type-plugin","status-publish","hentry","plugin_tags-animations","plugin_tags-css-effects","plugin_category-media","plugin_contributors-giuse","plugin_committers-giuse"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/change-class-in-viewport\/assets\/icon-128x128.jpg?rev=2572270","icon_2x":"https:\/\/ps.w.org\/change-class-in-viewport\/assets\/icon-256x256.jpg?rev=2572270","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>When a specific element of the page enters the viewport, it adds the CSS class \"in-viewport\" to that element.<\/p>\n\n<p>When the same element goes out from the viewport it remove the CSS class \"in-viewport\" and adds the class \"not-in-viewport\".<\/p>\n\n<p>To target the elements, you just need to assign them the CSS class \"cciv-el\".<\/p>\n\n<p>It's useful to add your custom animations on scroll just with a few lines of CSS.<\/p>\n\n<p>This is a plugin for CSS developers who want to add simple but effective animation only with pure CSS.<\/p>\n\n<p>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.<\/p>\n\n<p>The plugin is ultra light. It adds a few lines of pure JavaScript code in the footer and nothing else.<\/p>\n\n<p>No additional HTTP requests, no additional queries to the database.<\/p>\n\n<p>If you measure the performance with or without this plugin, you will not notice any difference.<\/p>\n\n<p>This plugin is useful if:<\/p>\n\n<ul>\n<li>You know how to create an animation in pure CSS.<\/li>\n<li>You have the possibility to assign a CSS class to the element you want to animate.<\/li>\n<li>You have the possibility to add your custom CSS.<\/li>\n<\/ul>\n\n<p>With the following few lines of pure CSS for example you can create a rotation effect.<\/p>\n\n<p>.cciv-el{transition: 2s transform ease}\n.cciv-el.in-viewport{transform:rotateY(0deg)}\n.cciv-el.not-in-viewport{transform:rotateY(180deg)}\n.cciv-no-script .cciv-el{transform:none !important}<\/p>\n\n<p>You can read more about CSS animations and transitions on W3Schools:\nhttps:\/\/www.w3schools.com\/css\/css3_animations.asp\nhttps:\/\/www.w3schools.com\/css\/css3_transitions.asp<\/p>\n\n<p>You can change the selector to target the elements that you want to animate using the filter 'cciv_el_selector'.\nIf 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:<\/p>\n\n<pre><code>add_filter( 'cciv_el_selector','my_cciv_selector' );\nfunction my_cciv_selector( $selector ){\n  return '#my-custom-id .my-custom-class'; \/\/The elements will not be target anymore by .cciv-el but by what you specify here\n}\n<\/code><\/pre>\n\n<p>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.<\/p>\n\n<p>No performance loss, and no time loss if you have CSS skills.<\/p>\n\n<h3>Help<\/h3>\n\n<p>If you need help open a thread on the support forum of this plugin.\nPlease, before posting enable the debugging in wp-config.php. Need a step-by-step guide? Read <a href=\"https:\/\/freesoul-deactivate-plugins.com\/how-to-enable-debugging-in-wordpress-a-step-by-step-guide\/\">this detailed tutorial<\/a> on <a href=\"https:\/\/freesoul-deactivate-plugins.com\/how-to-enable-debugging-in-wordpress-a-step-by-step-guide\/\">how to enable debugging in WordPress<\/a> to learn more.<\/p>\n\n<!--section=changelog-->\n<h4>0.0.5<\/h4>\n\n<ul>\n<li>Checked: WordPress 6.4<\/li>\n<\/ul>\n\n<h4>0.0.4<\/h4>\n\n<ul>\n<li>Added: Filter hook to execute animation only once.<\/li>\n<\/ul>\n\n<h4>0.0.3<\/h4>\n\n<ul>\n<li>Added: Link in the page of plugins to a post that explains how it works<\/li>\n<\/ul>\n\n<h4>0.0.2<\/h4>\n\n<ul>\n<li>Improved: Minified JavaScript<\/li>\n<\/ul>\n\n<h4>0.0.1<\/h4>\n\n<ul>\n<li>First release<\/li>\n<\/ul>","raw_excerpt":"When an element of the page enters the viewport, it adds a CSS class to that element.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/144882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=144882"}],"author":[{"embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/giuse"}],"wp:attachment":[{"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=144882"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=144882"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=144882"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=144882"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=144882"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/li.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=144882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}