use of wow.min.js with jquery.fullpage.js

1.2k views Asked by At

I am using two famous plugins wow.min.js and jquery.fullpage.js but when I use both at same page one of them is not working, help me please. I am using these two scripts to call both of them.

<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage'],
            sectionsColor: ['#97cbd6', '#40434b'],
            navigation: true,
            navigationPosition: 'right',
            navigationTooltips: ['First page', 'Second page', 'Third and last page']
        });
    });
</script>




  <script>
        new WOW().init();
    </script>
1

There are 1 answers

0
Alvaro On

You just need to read the fullPage.js FAQs.

Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

So... just use scrollBar:true. Or use fullpage.js callbacks add or remove classes to create the animations, just as in the Apple iPhone 5C demo available in the examples folder of fullPage.js.