2

hola quiero activar muchas animaciones de una web con javascript cuando aparezcan en la pantalla pero estoy utilizando if else y cuando son varios if else algunas animaciones no funcionan. he intentado usar un switch pero no lo consigo. las animaciones se activan al añadir la clase .animated

(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>


ya estoy implementando la api y me funciona pero solo ejecuta la animacion una vez yo necesito que al hacer scroll hacia abajo o hacia arriba y vuelva a salir el elemento, ejemplo un h1 se vuelva a ejecutar la animacion.

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);
});

tengo hechas las animaciones para activarse añadiendo la clase animated.

1
  • las animaciones funcionan pero no todas ademas tengo el error de $t.offset() undefined como puedo solucionar este error? el 5 abr. 2020 a las 16:52

2 respuestas 2

2

Lo puedes lograr mediante la API llamada Intersection Observer con la cual lograremos:

  • Cargar un contenido o animación o disparar un evento cuando un contenedor todo o parte de el se encuentre en el foco del viewport

Aquí en can I use puedes leer y conocer mas acerca del soporte que dicha API tiene en los distintos navegadores.

Para este ejemplo he dispuesto lo siguiente:

  • Tengo 2 div, el primero oculta parcialmente al segundo
  • Obtenemos al párrafo y lo asignamos a una variable
  • El segundo contiene un párrafo que tendrá una animación, solo cuando el div que lo contiene este al 100% visible en pantalla
  • Obtenemos primero el div por medio de un id y lo asignamos a un variable
  • Realizamos la instancia de la clase InsersectionObserver()
  • Iteramos las entradas y como solo tenemos 1 entonces en la posición 0 veremos si la intersección se cumple
  • Al párrafo previamente almacenado en una variable le agregamos una animación a la cual solo invocamos por su nombre y aparte le indicamos cuantos segundo dure y si será infinita o no la reproducción
  • Como objeto pasamos los argumentos donde especificamos por medio de la clave threshold el valor de 1 para que sea solicitada una visibilidad del div total
  • Finalmente al objeto de la instancia le indicamos que acceda al método observe el cual recibe como argumento el nombre de la variable que almacena el elemento a obervar que en este caso es el div número 2

Con lo anterior:

  • Usarías una API nativa del navegador
  • No dependerías de JQuery
  • Evitarías meditar mucho sobre los cálculos de pixeles para verificar cuando disparar la animación
  • Es aplicable a stilos, animaciones, reproducción, carga de multimedia etc.

EJEMPLO

        <!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>

-1

Aunque usas JQuery, te propongo que use la API Intersection Observer

La API Observador de Intersección, provee una vía para, de forma asíncrona, observar cambios en la intersección de un elemento con un elemento ancestro o con el viewport del documento de nivel superior.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.