Animate objects in scroll and stop them when stopping the scroll

Question

Animate objects in scroll and stop them when stopping the scroll

Navigation

#1 by (2 votes)

4

I want to make this code work like the attached GIF when the user scrolls and stops when it stops scrolling. I've been trying with a sequence of "IFs" but it is blocked and I do not know how to solve it ...

$(window).scroll(function(flechas) {
	setInterval(function(){ $('.fl9').css('fill','red'); }, 500);
	if ($('.fl9').css('fill') === 'red') {
		setInterval(function(){ $('.fl8').css('fill','red'); }, 1000);	
		};
	if ($('.fl8').css('fill','red')) {
		setInterval(function(){
			 $('.fl9').css('fill','rgba(255,222,0,1.00)'),
			 $('.fl7').css('fill','red');
			  }, 1000);	
		};

});

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
   alert('you are scrolling'); 
}, 500000);

body{
	height:10000px;
	}
svg.flecha {
  overflow:visible;
  stroke-width:2px;
  width:10%;
  position:fixed;
  right:5%;
}
.fl1{top:47%;fill:yellow;stroke:red;}
.fl2{top:53%;fill:yellow;stroke:red;}
.fl3{top:59%;fill:yellow;stroke:red;}
.fl4{top:65%;fill:red;stroke:red;}
.fl5{top:71%;fill:orange;stroke:red;}
.fl6{top:77%;fill:rgba(255,222,0,1.00);stroke:red;}
.fl7{top:83%;fill:yellow;stroke:red;}
.fl8{top:89%;fill:yellow;stroke:red;}
.fl9{top:95%;fill:yellow;stroke:red;}
svg.flecha.verde {
  fill:green;
  stroke:yellow;
}

svg.flecha.azul {
  fill:blue;
  stroke:green;
}
#inscripcion{
	width:14%;
	height:150px;
	background:blue;
	position:fixed;
	right:3%;
	bottom:56%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<svg viewBox="0 0 100 40" class="flecha fl1">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl2">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl3">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl4">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl5">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl6">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl7">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl8">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl9">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

javascript jquery html css

asked by Ivan Soler 20.09.2016 в 17:40

source

1 answer

Event in ComboBox inside a Datagridview Correct way to sign a .pkg on mac?

score 2 · Accepted Answer

Maybe ...

$(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       
       if(Math.abs(lastScrollTop - st) <= delta)
          return;
       
       if (st > lastScrollTop){          
           $('svg:last-child').prependTo("#contenedor")
           //console.log('scroll down'); //removido para mejor vista
       } else {
          $('svg:first-child').appendTo("#contenedor")
          //console.log('scroll up');
       }
       lastScrollTop = st;
    });
});


<!-- begin snippet: js hide: false console: true babel: false -->

#contenedor{
  width : 50px;
  height : 500px;
}


.fl1{top:47%;fill:blue;stroke:red;}
.fl2{top:53%;fill:green;stroke:red;}
.fl3{top:59%;fill:azure;stroke:red;}
.fl4{top:65%;fill:red;stroke:red;}
.fl5{top:71%;fill:orange;stroke:red;}
.fl6{top:77%;fill:rgba(255,222,0,1.00);stroke:red;}
.fl7{top:83%;fill:rgba(0,222,255,1.00);stroke:red;}
.fl8{top:89%;fill:rgba(95,95,95,1.00);stroke:red;}
.fl9{top:95%;fill:rgba(70,70,70,1.00);stroke:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor" >
<svg viewBox="0 0 100 40" class="flecha fl1 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl2 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl3 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl4 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl5 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl6 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl7 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl8 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
<svg viewBox="0 0 100 40" class="flecha fl9 ">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>
<div>
ah
</div>

The trick is to detect the scroll and then put the last element to the beginning or vice versa

Note: change the colors to make the effect look better:)