0

So I'm currently developing a small website for someone over at http://carrotcrunchpvp.comule.com/. On the 'our ethos' page, I have a svg running for the radial percentage stats. If you load this page, http://carrotcrunchpvp.comule.com/#horizontal/1 you will notice that there is animation on this SVG which loads it round to the defined % which is in the HTML. This is all done by my javascript file - percentagecircles.js.

Now, my question is, as the animation is triggered by running the file percentagecircles.js, is there any way to run this file ONLY when on the 'Our Ethos' page. For example if you load the homepage, the animation will run when you can't see it.

I am using FullPage.js plugin in the backend. I have noticed while developing that when traversing each page, the class="slide fp-slide fp-table" becomes class="slide fp-slide fp-table active" when on that page.

Logically I would imagine I would use an if function which says, if '#fullpage > div > div.fp-slides > div > div.slide.fp-slide.fp-table has class ;active' (our ethos css path), run the percentagecircles.js file. Seems simple to me retrospectively but my Jquery + Javascript knowledge is very very minimal...

Just a note, I've tried using a couple of plugins like Wow.js and onScreen.js to no success, perhaps I wasn't utilising them right.

Any help is appreciated, Cheers, Chris

Alvaro
  • 37,936
  • 23
  • 138
  • 304
Chris Connolly
  • 73
  • 8

1 Answers1

0

You need to make make use of the callbacks provided by fullPage.js such as afterSlideLoad or afterLoad.

You will find them explained in the documentation. And you have available examples such as callbacks.html here.

This way you can get the active slide and work with it.

Alvaro
  • 37,936
  • 23
  • 138
  • 304