Подскажите, пожалуйста, как лучше реализовать падение капельки.
Пока только выходит сделать одно падение, а мне надо чтобы при откате сролла, затем при повторном сролле снова происходило событие... И так бесконечно.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.wrapper {
width: 400px;
height: 400px;
overflow: auto;
border: 1px dashed #ccc;
position: relative;
}
.wrapper-inner {
height: 150%;
}
.drop {
width: 50px;
height: 50px;
border-radius: 100%;
background: blue;
position: fixed;
top: 20px;
left: 20%;
margin-left: -25px;
}
.drop::after {
position: absolute;
bottom: -21px;
left: 13px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 13px;
border-color: blue transparent transparent transparent;
}
</style>
<div class="wrapper">
<div class="wrapper-inner">
<div class="drop"></div>
</div>
</div>
<script>
var mainScroll = $('.wrapper'),
innerHeight = $('.wrapper-inner').outerHeight(),
outerHeight = $('.wrapper').innerHeight(),
drop = $('.drop'),
dropTop = $('.drop').position().top,
i = 0;
mainScroll.scroll(function (){
scrollBottom = innerHeight - outerHeight + mainScroll.scrollTop() - 50;
// console.log(scrollBottom)
i++;
// console.log(i)
if (i == 1) {
downDrop();
}
});
function downDrop() {
drop.css('top', ++dropTop);
var time = setTimeout(downDrop, 'fast');
var z = parseInt($(drop).css('top'), 10);
// console.log(z)
if (z > scrollBottom) {
drop.fadeOut('fast', function(){
clearTimeout(time);
drop.css('top', 19).fadeIn();
mainScroll.animate({
scrollTop: 0
}, 0)
});
}
}
</script>
