Start a javascript function only on a particular section

Question

I'm making a one page website which has two sections. I've added typewriter effect(something like this- codepen.io/danielgroen/pen/VeRPOq ) to the second section of the website. However, this effect starts once the page is loaded. How to start the effect only when I scroll to the second section?

<section>
 <div> 
   <p> hi how are you? </p>
 </div>
</section>
<section>
<h1> Hallo, Wij zijn Occhio! </h1>
</section>

Listen to the document scroll event and check the position of your section — freedomn-m, Jun 28 '17 at 10:40

score 1 · Accepted Answer · answered Jun 28 '17 at 10:40

1

You can run your effect when you scroll the window and when you reach the second section

$(window).scroll(function() { 

      if ($(window).scrollTop() >  $("section:nth-of-type(2)").offset().top) {
             // run your effect here
      }

});

answered Jun 28 '17 at 10:40

Chiller

9,520
2
28
38

https://codepen.io/anon/pen/YQYGBN Like this? Sorry I'm a noob – nafri Jun 28 '17 at 12:42
@nafri i don't understand the question? – Chiller Jun 28 '17 at 12:55
I added the above lines to the code but the animation stops working codepen.io/anon/pen/YQYGBN – nafri Jun 28 '17 at 13:53
@nafri look at this https://codepen.io/anon/pen/eRygbV.. scroll to the second section to see the effect – Chiller Jun 28 '17 at 14:03
Thanks! But after the word 'amsterdam', the animation starts shivering due to some glitch – nafri Jun 28 '17 at 14:10

Start a javascript function only on a particular section

1 Answers1