Home / Questions / 343590
Accepted
Rafael Hernández
Asked: 2020-04-06 08:43:20 +0800 CST 2020-04-06 08:43:20 +0800 CST

activate animations with JavaScript when scrolling

  • 772

hello I want to activate many animations of a web with javascript when they appear on the screen but I am using if else and when there are several if else some animations do not work. I've tried to use a switch but I can't. animations are activated by adding the .animated class

(function($){

	/**
	 * Copyright 2012, Digital Fusion
	 * Licensed under the MIT license.
	 * http://teamdf.com/jquery-plugins/license/
	 *
	 * @author Sam Sehnert
	 * @desc A small plugin that checks whether elements are within
	 *		 the user visible viewport of a web browser.
	 *		 only accounts for vertical position, not horizontal.
	 */
	$.fn.visible = function(partial){

	    var $t				= $(this),
	    	$w				= $(window),
	    	viewTop			= $w.scrollTop(),
	    	viewBottom		= viewTop + $w.height(),
	    	_top			= $t.offset().top,
	    	_bottom			= _top + $t.height(),
	    	compareTop		= partial === true ? _bottom : _top,
	    	compareBottom	= partial === true ? _top : _bottom;

		return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    };

})(jQuery);

$(window).scroll(function(){



 	if( $('.revealOnScroll-red').visible(true) ) {
			 $('.revealOnScroll-red').addClass('animated text-animation');
			 $('.revealOnScroll-p').addClass('animated text-animation-2');
 	}
	else {
			 $('.revealOnScroll-red').removeClass('animated text-animation');
			 $('.revealOnScroll-p').removeClass('animated text-animation-2');

  }


	 if( $('#red-lista').visible(true) ) {
		$('.revealOnScroll-icon').addClass('animated icon-size');
 		$('.revealOnScroll-list').addClass('animated text-animation');
}
 else {

 		$('.revealOnScroll-icon').removeClass('animated icon-size');
		$('.revealOnScroll-list').removeClass('animated text-animation-list');
 }


 if( $('.revealOnScroll-icon-soc').visible(true) ) {

  $('.revealOnScroll-icon-soc').addClass('animated icon-size-soc');
 //$('.revealOnScroll-list').addClass('animated text-animation');
 }
 else {
  $('.revealOnScroll-icon-soc').removeClass('animated icon-size-soc');
 // $('.revealOnScroll-list').removeClass('animated text-animation-list');
 }


if( $('.revealOnScroll-meto').visible(true) ) {

 $('.revealOnScroll-meto').addClass('animated text-animation');
}
else {

 $('.revealOnScroll-meto').removeClass('animated text-animation');

}

if( $('.revealOnScroll-icon2').visible(true) ) {

  $('.revealOnScroll-icon2').addClass('animated icon-size');
   $('.revealOnScroll-etapa').addClass('animated text-animation');
}
else {

  $('.revealOnScroll-icon2').removeClass('animated icon-size');
  $('.revealOnScroll-etapa').removeClass('animated text-animation');

 }

});
/*********CSS animations**********/

.animatable {

  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}



/* show objects being animated */
.animated {
  visibility: visible;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}


@-webkit-keyframes movimiento-diagonal {
   from {
      left: -800px;
   }

   to {
      left: 10px;
   }
}

.text-animation {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 1s;
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

   position: relative;
   padding: 2px;
}


@-webkit-keyframes movimiento-diagonal-list {
   from {
      left: -800px;
   }

   to {
      left: 10px;
   }
}

.text-animation-list {
   -webkit-animation-name: movimiento-diagonal-list;
   -webkit-animation-duration: 1s;
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

}



@-webkit-keyframes movimiento-diagonal-2 {
   from {
      right: -200px;
   }

   to {
      right: 10px;
   }
}


.text-animation-2 {
   -webkit-animation-name: movimiento-diagonal-2;
   -webkit-animation-duration: 1s;

   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */
   position: relative;
   padding: 2px;
}

/* increase size fontawesome icons with keyframes*/

@-webkit-keyframes size-icons {
   0% {
      font-size: 0;
   }

   100% {
      font-size: 2.1em;
   }
}


.icon-size{
   -webkit-animation-name: size-icons;
   -webkit-animation-duration: 1s;
   /*-webkit-animation-iteration-count:1 ;*/
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="malla-img">
      <div class="container">


    <div  class="row space-img">
     <div class="col-md-6">
       <h1 class="animatable text-animation revealOnScroll-red">Mejora la seguridad de tu empresa con una prueba de penetración de Red Team.</h1>
       <ul class="mx-auto animatable text-animation revealOnScroll-red">
         <li class="list-style"><i class="fa fa-envelope-o pr-3 fa-2x vertical-icon" aria-hidden="true"></i>[email protected] </li>
         <li class="list-style"><i class="fa fa-phone pr-3 fa-2x vertical-icon" aria-hidden="true"></i> +506 4033-9973 </li>

       </ul>
     </div>
     <div class="col-md-6">
       <p class="revealOnScroll-p text-animation-2 animatable">La Simulación un adversario también conocido como Red Team Operations, consiste en realizar ataques de precisión contra una organización para probar la efectividad y la capacidad de respuesta de diferentes partes de un programa de seguridad de la información sin afectar la integridad, disponibilidad y confidencialidad de la información. </p>
       <p class="revealOnScroll-p text-animation-2 animatable">Las pruebas de penetración tradicionales a menudo excluyen algunas vías de ataque y tácticas que los adversarios reales están usando actualmente, utilizan herramientas automáticas las cuales únicamente identifican vulnerabilidades. </p>
       <p class="revealOnScroll-p text-animation-2 animatable">A diferencia de las pruebas tradicionales de penetración, una Simulación de un adversario o un Red Team Operation adopta un enfoque integrado para evaluar las defensas de Seguridad de la Información combinando múltiples estrategias militares de prueba en un compromiso ofensivo integral con el único objetivo de obtener acceso a los activos del cliente o cumplir los objetivos y misiones previamente establecidos</p>
     </div>
   </div>
     </div>
       </div>
   <div id="red-lista" class="benefics">
     <h2 class="text-center  text-animation-list animatable revealOnScroll-list">¿Qué incluye los servicios de Red Team Operations?</h2>
     <ul class="mx-auto">
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3  vertical-icon" aria-hidden="true"></i> Spear Phishing. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Custom Malware. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Open Source Reconnaissance. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ingeniería social.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques a la seguridad física.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques wireless.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques a aplicaciones y sitios web.</li>
     </ul>
   </div>

I am already implementing the api and it works for me but it only executes the animation once I need that when I scroll down or up and the element comes out again, for example an h1, the animation is executed again.

const images = document.querySelectorAll('.revealOnScroll-red');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('animated');
    } else {
      entry.target.classList.remove('animated');
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

I have made the animations to be activated by adding the animated class.

javascript

2 Answers

  1. Best Answer

    You can achieve it through the API called Intersection Observer with which we will achieve:

    • Load a content or animation or fire an event when all or part of a container is in the focus of the viewport

    Here at can I use you can read and learn more about the support that this API has in different browsers.

    For this example I have arranged the following:

    • I have 2 div, the first partially hides the second
    • Get the paragraph and assign it to a variable
    • The second contains a paragraph that will have an animation, only when the div that contains it is 100% visible on the screen.
    • We first get the div by means of an id and assign it to a variable
    • We make the instance of the class InsertionObserver()
    • We iterate the inputs and since we only have 1 then in position 0 we will see if the intersection is fulfilled
    • To the paragraph previously stored in a variable we add an animation to which we only invoke by its name and apart we indicate how many seconds it lasts and if the reproduction will be infinite or not
    • As an object we pass the arguments where we specify thresholdthe value of 1 by means of the key so that a visibility of the total div is requested
    • Finally, we tell the instance object to access the method observewhich receives as an argument the name of the variable that stores the element to observe , which in this case is div number 2

    With the above:

    • You would use a native browser API
    • You would not depend on JQuery
    • You would avoid thinking too much about pixel calculations to check when to fire the animation
    • It is applicable to styles, animations, playback, loading media etc.

    EXAMPLE

            <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>EJEMPLO</title>
          <style>
            #uno {
              background-color: red;
              height: 300px;
            }
            #dos {
              background-color: steelblue;
              height: 300px;
            }
            @keyframes color{
              from {
                background-color: tomato;
              }
              to {
                background-color: orange;
              }
            }
          </style>
        </head>
        <body>
        <div id="uno"></div>
        <div id="dos">
          <p class="parrafos">Hola Mundo Uno</p>
        </div>
        <script>
        let seccionAnimada = document.getElementById("dos")
        let parrafos = document.querySelector(".parrafos")
        
          const observador = new IntersectionObserver((entries) => {
            console.log("animación arriba")    
            if(entries[0].isIntersecting) {
              parrafos.style.animation = "color 2s infinite"
            }
          }, { threshold: 1 })
          observador.observe(seccionAnimada)
        </script>
        </body>
        </html>

    • 2

  2. Although you use JQuery, I suggest you use the Intersection Observer API

    The Intersection Watcher API provides a way to asynchronously watch changes at the intersection of an element with an ancestor element or with the top-level document viewport.

    https://developer.mozilla.org/en/docs/Web/API/Intersection_Observer_API

    • -1