Action with scroll in javascript

Question

Action with scroll in javascript

Navigation

#1 by (1 votes)

1

My project is to make an animation on a logo using a css effect from the animate.css library, the animation will occur at a certain point in the site scroll. I have been able to do something, but there are two bugs or errors, which are:

1 ° - When the "fade / fadeOut" effect executes, it reappears at the end of the animation.

2 ° - The "Back / FadeIn" effect is executed whenever the point is smaller, I need it to be executed only if the FadeOut effect has already been done, and vice versa.

My code:

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><divid="cabecalho">
		<img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png"></div><divid="altura"></div>

javascript jquery javascript-eventos

asked by anonymous 09.06.2018 / 03:28

1 answer

Error in [.data.frame '(attr, region): undefined columns selected I'm trying to print the x on the screen but it gives error in the data table

score 1 · Accepted Answer

You can check whether the opacity of the element is 0 or 1 to trigger an animation, preventing one from overriding the other.

I also put a check at the end of the animations to check the scroll, because the user can change before finishing the animation, and thus, it triggers a scroll event to adjust the element according to the current scroll. p>

It would look like this:

$(window).on('scroll', function(){ 

   var opac = $("#cabecalho .logo").css("opacity"); // pego a opacidade para saber se o elemento está visível

   if(opac == 1 || opac == 0){

      var animacao1 = "animated fadeOutUp";
      var animacao2 = "animated fadeInDown";
      var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
      
      if (window.scrollY >= 50 && opac == 1) {
         $("#cabecalho .logo")
         .removeClass(animacao2)
         .addClass(animacao1)
         .one(fimanimacao, function(){
            if(window.scrollY < 50) $(this).trigger("scroll");
         });
      }

      if(window.scrollY < 50 && opac == 0){
         $("#cabecalho .logo")
         .removeClass(animacao1)
         .addClass(animacao2)
         .one(fimanimacao, function(){
            if(window.scrollY > 50) $(this).trigger("scroll");
         });
      }
   }
});

#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><divid="cabecalho">
   <img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png"></div><divid="altura"></div>