What is a promise in Javascript?

Question

Rafael Hernández

Asked: 2020-04-06 08:43:20 +0800 CST 2020-04-06 08:43:20 +0800 CST 2020-04-06 08:43:20 +0800 CST

滚动时使用 JavaScript 激活动画

772

您好，我想在屏幕上出现许多带有 javascript 的网页动画时激活它们，但我正在使用 if else 并且当有几个 if else 动画不起作用时。我试过用开关，但我不能。通过添加 .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>

我已经在实现 api 并且它对我有用，但它只在我需要时执行动画，当我向下或向上滚动并且元素再次出现时，例如 h1，动画再次执行。

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

我已经通过添加动画类来激活动画。

2 Answers

Voted

BetaM · Answer 1 · 2020-04-06T11:06:52+08:00

您可以通过称为Intersection Observer的 API 来实现它，我们将使用它来实现：

当容器的全部或部分处于视口的焦点时，加载内容或动画或触发事件

在这里我可以使用你可以阅读和了解更多关于这个 API 在不同浏览器中的支持。

对于这个例子，我安排了以下内容：

我有 2 个 div，第一个部分隐藏了第二个
获取段落并将其分配给变量
第二个包含一个将有动画的段落，只有当包含它的 div 在屏幕上 100% 可见时。
我们首先通过 id 获取 div 并将其分配给变量
我们创建类 InsertionObserver() 的实例
我们迭代输入，因为我们只有 1，所以在位置 0 我们将查看是否满足交集
在之前存储在变量中的段落中，我们添加一个动画，我们只通过它的名称调用它，并且我们指出它持续了多少秒，以及再现是否将是无限的
作为一个对象，我们传递参数，我们threshold通过键指定值 1 以便请求总 div 的可见性
最后，我们告诉实例对象访问方法，该方法observe接收作为参数的变量名称，该变量存储要观察的元素，在本例中为 div 编号 2

有了以上内容：

您将使用本机浏览器 API
你不会依赖 JQuery
您将避免过多考虑像素计算来检查何时触发动画
适用于样式、动画、播放、加载媒体等。

例子

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

manifiestoWeb · Answer 2 · 2020-04-06T10:17:37+08:00

manifiestoWeb

2020-04-06T10:17:37+08:002020-04-06T10:17:37+08:00

虽然你使用 JQuery，但我建议你使用 Intersection Observer API

Intersection Watcher API 提供了一种方法来异步观察元素与祖先元素或顶级文档视口的交集处的更改。

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

-1

滚动时使用 JavaScript 激活动画

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?