CODEWITHSUNDEEP
jqueryhtmlanimation
Nawshad Ghannoo
Nawshad Ghannoo

Reputation: 57

Start Jquery animation when reached specific div

Hi I have this code that gives a type writing effect. But the thigs is that I want the animation to run only when user scroll down to this div. Would you guys be able to help? Thanks

  <script>
	
    $(function(){

        $("#typed").typed({
            strings: ["oru exp", "Oru expertise", '"Our expertise Graphic Designer will create the template based  \n on your company activity and will provide with a proffesional \n and ergonic design to your website."'],
            typeSpeed: 30,
            backDelay: 500,
            loop: false,
            // defaults to false for infinite loop
            loopCount: false,
            callback: function(){ foo(); },
            resetCallback: function() { newTyped(); }
        });

        $(".reset").click(function(){
            $("#typed").typed('reset');
        });

    });

    function newTyped(){ /* A new typed object */ }

    function foo(){ console.log("Callback"); }

   
    </script>

here is html: 

<div class="wrap">
  <div class="type-wrap">
   <span id="typed" style="white-space:pre;"></span>
  </div>
</div>

Upvotes: 0

Views: 484

Answers (1)

doniyor
doniyor

Reputation: 37896

$(window).scroll(function(){
  var height = $(window).scrollTop();
  if(height > 400){
      // $('#your_htmlelement').typed();
  }else{
      // $('#your_htmlelement').typed('reset');
  }
});

jsFiddle

what about getting the certain height and then play the animation?

Upvotes: 1

Related Questions