jeudi 19 octobre 2017

isScrolledIntoView multiple function execution

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