Title: Change class in viewport: create animations with pure CSS Author: Jose Mortellaro Published: 26 de julio de 2021 Last modified: 22 de agosto de 2026 --- Buscar plugins ![](https://ps.w.org/change-class-in-viewport/assets/icon-256x256.jpg?rev=2572270) # Change class in viewport: create animations with pure CSS Por [Jose Mortellaro](https://profiles.wordpress.org/giuse/) [Descargar](https://downloads.wordpress.org/plugin/change-class-in-viewport.0.0.5.zip) * [Detalles](https://es-ar.wordpress.org/plugins/change-class-in-viewport/#description) * [Valoraciones](https://es-ar.wordpress.org/plugins/change-class-in-viewport/#reviews) * [Desarrollo](https://es-ar.wordpress.org/plugins/change-class-in-viewport/#developers) [Soporte](https://wordpress.org/support/plugin/change-class-in-viewport/) ## Descripción 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: * You know how to create an animation in pure CSS. * You have the possibility to assign a CSS class to the element you want to animate. * You have the possibility to add your custom CSS. 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. ### Help If you need help open a thread on the support forum of this plugin. Please, before posting enable the debugging in wp-config.php. Need a step-by-step guide? Read [this detailed tutorial](https://freesoul-deactivate-plugins.com/how-to-enable-debugging-in-wordpress-a-step-by-step-guide/) on [how to enable debugging in WordPress](https://freesoul-deactivate-plugins.com/how-to-enable-debugging-in-wordpress-a-step-by-step-guide/) to learn more. ## Reseñas ![](https://secure.gravatar.com/avatar/cf22f5ebd95c5dbd45221a1a43bb693279a7f42a31414ca913c527da24dc6f68? s=60&d=retro&r=g) ### 󠀁[exactly what i needed](https://wordpress.org/support/topic/exactly-what-i-needed-881/)󠁿 [dvistv](https://profiles.wordpress.org/dvistv/) 22 de noviembre de 2022 Thank you very much for this Plugin! This is excellent and everything I ever wanted! [ Leer la 1 reseña ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/) ## Colaboradores y desarrolladores “Change class in viewport: create animations with pure CSS” es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Jose Mortellaro ](https://profiles.wordpress.org/giuse/) [Traduce “Change class in viewport: create animations with pure CSS” a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/change-class-in-viewport) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/change-class-in-viewport/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/change-class-in-viewport/), o suscríbete al [log de desarrollo](https://plugins.trac.wordpress.org/log/change-class-in-viewport/) por [RSS](https://plugins.trac.wordpress.org/log/change-class-in-viewport/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios #### 0.0.5 * Checked: WordPress 6.4 #### 0.0.4 * Added: Filter hook to execute animation only once. #### 0.0.3 * Added: Link in the page of plugins to a post that explains how it works #### 0.0.2 * Improved: Minified JavaScript #### 0.0.1 * First release ## Meta * Versión **0.0.5** * Última actualización **hace 2 meses** * Instalaciones activas **60+** * Versión de WordPress ** 4.6 o superior ** * Testeado hasta **7.1.3** * Versión de PHP ** 5.6 o superior ** * Idioma * [English (US)](https://wordpress.org/plugins/change-class-in-viewport/) * Etiquetas: * [animations](https://es-ar.wordpress.org/plugins/tags/animations/)[css effects](https://es-ar.wordpress.org/plugins/tags/css-effects/) * [Vista avanzada](https://es-ar.wordpress.org/plugins/change-class-in-viewport/advanced/) ## Valoraciones 5 de 5 estrellas. * [ 1 valoración de 5 estrellas ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/?filter=5) * [ 0 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/?filter=4) * [ 0 valoraciones de 3 estrellas ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/?filter=3) * [ 0 valoraciones de 2 estrellas ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/?filter=2) * [ 0 valoraciones de 1 estrellas ](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/#new-post) [Ver todas las reseñas](https://wordpress.org/support/plugin/change-class-in-viewport/reviews/) ## Colaboradores * [ Jose Mortellaro ](https://profiles.wordpress.org/giuse/) ## Soporte ¿Tenés algo que decir? ¿Necesitás ayuda? [Ver el foro de asistencia](https://wordpress.org/support/plugin/change-class-in-viewport/)