0

Tenho o código abaixo criando o efeito de fadein e fadeout com a biblioteca animate.css em um evento do scroll, porém quando o evento ocorre aplicando o fadeOut, ele reaparece até que mexa no scroll, e o outro erro é que enquanto o scroll for menor que 28, ele fica fazendo e repetindo o efeito FadeIn, e quero que só ocorra o fadeIn se o FadeOut ja tiver sido feito!

window.addEventListener('scroll', function(event){ 
			
		var animacao1 = "animated fadeOutUp";
		var animacao2 = "animated fadeInDown";
		var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
			
		if (window.scrollY > 50) {
			$("#cabecalho .logo").addClass(animacao1);
		}
		if (window.scrollY < 50) {
			$("#cabecalho .logo").removeClass(animacao1);
			$("#cabecalho .logo").addClass(animacao2).one(fimanimacao, function(){
				$(this).removeClass(animacao2);
			});
		}
		});
#cabecalho {
			height: 270px;
			width: 100%;
			background-color: rgba(0, 0, 0, .0);
			position: absolute;
			left: 50%;
			top: 180px;
			transform: translate(-50%, -50%);
		}
		#cabecalho .logo {
			height: 37px;
			width: auto;
			position: absolute;
			left: 40%;
			top: 10%
		}
    #altura{
    height: 1400px;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="cabecalho">
		<img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</div>

<div id="altura"></div>

1 Resposta 1

1

Exitem erros no seu código:

- Não sei onde você arranjou este link para a biblioteca, mas aqui não funcionou. Utilizei esta outra aqui.

- Você tem que carregar primeiro os CSS depois os JS, a ordem no seu código está invertida.

window.addEventListener('scroll', function(event){ 
			
   var animacao1 = "animated fadeOutUp";
   var animacao2 = "animated fadeInDown";
   var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
			
   if (window.scrollY > 50) {
       $("#cabecalho .logo").addClass(animacao1);
   }
   else if (window.scrollY < 50) {
       $("#cabecalho .logo").removeClass(animacao1);
       $("#cabecalho .logo").addClass(animacao2).one(fimanimacao, function(){
          $(this).removeClass(animacao2);
       });
   }
});
#cabecalho {
  height: 270px;
  width: 100%;
  background-color: rgba(0, 0, 0, .0);
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translate(-50%, -50%);
}
#cabecalho .logo {
  height: 37px;
  width: auto;
  position: absolute;
  left: 40%;
  top: 10%
}
#altura{
   height: 1400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cabecalho">
  <img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</div>

<div id="altura"></div>

1
  • realmente, na verdade o erro do css foi na hora de publicar, porém os erros que citei persistem.
    – Arthur74
    Commented 2/06/2018 às 2:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .