Всем доброго времени суток. При скролле до нужного блока включается анимация печатающегося текста, но если скролить дальше анимация начинается заново, а нужно чтобы не возобновлялась. И текст ДАЛЕЕ должен появляться после того как допечатается текст. Спасибо. https://jsfiddle.net/76oushwm/17/
$(function() {
window.onscroll = function() {
$('.animate__tippy').each(function() {
if ($(window).scrollTop() >= $('.animate__tippy').offset().top - $(window).height() && $(window).scrollTop() <= $('.animate__tippy').offset().top) $('.animate__tippy').animate_Text();
});
}
$.fn.animate_Text = function() {
var string = this.text();
return this.each(function() {
var $this = $(this);
$this.html(string.replace(/./g, '<span class="new">$&</span>'));
$this.find('span.new').each(function(i, el) {
setTimeout(function() {
$(el).addClass('div_opacity');
}, 40 * i);
});
});
};
$('.animate__tippy').animate_Text();
});
.animate__content {
min-height: 100vh;
}
.animate__image {
height: 500px;
}
.animate__tippy {
width: 300px;
}
.animate__tippy .new {
opacity: 0;
}
.animate__tippy .div_opacity {
transition: opacity 0.1s ease-in-out 0s;
opacity: 1;
}
.animate__button {
color: red;
font-size: 22px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animate__content"></div>
<div class="animate__image">
<div class="animate__tippy">
Привет!Привет! Привет!Привет! Привет!Привет! Привет!Привет! ПриветПривет! Привет!Привет!
</div>
<div class="animate__button">ДАЛЕЕ</div>
</div>