FullPage / AOS.js

https://alvarotrigo.com/fullPage/

fullPage scroll snapping. Create full screen pages fast and simple

 

jquery-adapter.html 사용

 

script

<link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
    <link rel="stylesheet" type="text/css" href="examples.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/fullpage.js"></script>

    <script type="text/javascript">
        //using document ready...
        $(document).ready(function () {

            //initialising fullpage.js in the jQuery way
            $('#fullpage').fullpage({
                sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
                navigation: true,
                slidesNavigation: true,
            });

            // calling fullpage.js methods using jQuery
            $('#moveSectionUp').click(function (e) {
                e.preventDefault();
                $.fn.fullpage.moveSectionUp();
            });

            $('#moveSectionDown').click(function (e) {
                e.preventDefault();
                $.fn.fullpage.moveSectionDown();
            });
        });
    </script>

 

html

<div id="fullpage">
        <div class="section">
            <div class="intro">
                <h1>jQuery adaptor</h1>
                <p>You can use fullpage.js as a jQuery plugin!</p>
                <p>Read 
                  <a href="https://github.com/alvarotrigo/fullPage.js#initialization">the docs</a> 
                  for more info!
                </p>
            </div>
        </div>
        <div class="section">
            <div class="slide">
                <h1>Section 2.1</h1>
            </div>
            <div class="slide">
                <h1>Section 2.2</h1>
            </div>
            <div class="slide">
                <h1>Section 2.3</h1>
            </div>
        </div>
        <div class="section">
            <h1>Section 3</h1>
        </div>
        <div class="section">
            <h1>Section 4</h1>
        </div>
    </div>

추가 script

<script type="text/javascript" src="examples.js"></script>

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

원스크롤 페이지 작업하고 AOS.js 사용하기 할때 AOS 적용 안될 때

 

AOS.init({
    easing: 'ease-in-out-sine',
});  // AOS initiation

new fullpage('#fullpage', {
    //.............................................
    //....Your other options....
    //..............................................
    onLeave: function(){
        jQuery('.section [data-aos]').removeClass("aos-animate");
    },
    onSlideLeave: function(){
        jQuery('.slide [data-aos]').removeClass("aos-animate");
    },
    afterSlideLoad: function(){
        jQuery('.slide.active [data-aos]').addClass("aos-animate");
    },
    afterLoad: function(){
        jQuery('.section.active [data-aos]').addClass("aos-animate");
    },
    navigation : true,
});

스크립트 넣어주면 AOS 적용이 됩니다.