I'm looking to create a scrolling event that once an element ID is brought into the window triggers a typing javascript. At the moment I have gotten it to work to the degree where I can get the scroll to trigger the event on the first instance but only that instance or trigger the instance for all over and over upon scroll.
See code below and thanks in advance for any suggestions:
HTML:
<section id="about" class="container">
<div class="about-bar container">
<span id="about-span"><h1 class="about-typed"></h1> </span>
</div>
</section>
SCRIPT
function isScrolledIntoView(elem) {
var $window = $(window),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $(elem).offset().top,
elemBottom = elemTop + $(elem).outerHeight();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).one("scroll", function() {
if (isScrolledIntoView('#about')) {
$('.about-typed').typeIt({
strings: ["{ABOUT}"],
speed: 400,
lifeLike: true,
autoStart: true,
cursorSpeed: 1300,
loop: false
});
} else if (isScrolledIntoView('#skills')) {
$('.skills-typed').typeIt({
strings: ["{SKILLS}"],
speed: 400,
lifeLike: true,
autoStart: true,
cursorSpeed: 1300,
loop: false
});
}
});
Aucun commentaire:
Enregistrer un commentaire