jQuery

【jQuery】1ページスクロールウェブサイトを作成できるプラグインScreenScroll

January 25, 2018
ScreenScroll

ScreenScrollは1ページのスクロールWebサイトを作成できるjQueryプラグイン。画面のセクション数を設定し、ウィンドウの幅に応じてヘッダーやフッターを修正することができます。

Usage

マークアップ

<link rel="stylesheet" href="/node_modules/romenko.screenscroll/dist/screenScroll.min.css" />
<link rel="stylesheet" href="/bower_components/romenko.screenscroll/dist/screenScroll.min.css" />

スクリプト

<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="/node_modules/romenko.screenscroll/dist/screenScroll.min.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="/bower_components/romenko.screenscroll/dist/screenScroll.min.js"></script>

構造

<header class="header">...</header>
<main class="main">
    <section>1</section>
    <section>2</section>
    <section>3</section>
</main>
<footer class="footer">...</footer>

プラグイン関数を呼び出す

$('main.main').screenScroll({
    header: $('header.header'),
    footer: $('footer.footer')
})

Example

$('main.main').screenScroll({
    header: $('header.header'),
    footer: $('footer.footer'),
    headerFixed: true,
    footerFixed: false,
    responsive: {
        960: {
            headerFixed: false,
            footerFixed: false,
            screens: [
                {
                    size: 50,
                    sections: [0, 1]
                },
                {
                    size: 50,
                    sections: [3, 4]
                },
                {
                        size: 50,
                        sections: [5, 6]
                }
            ]
        }
    }
});
<a href="#" data-screenscroll="next">Scroll to next</a>
<a href="#" data-screenscroll="prev">Scroll to prev</a>
<a href="#" data-screenscroll-movetosection="1">Scroll to section 1</a>
<a href="#" data-screenscroll-movetosection="example">Move to section with id "example"</a>
<a href="#" data-screenscroll-gotosection="1">Goes to section 1 without animation</a>
<a href="#" data-screenscroll-gotosection="example">Goes to section with id "example" without animation</a>
<a href="#" data-screenscroll-moveto="2">Scroll to second screen</a>
<a href="#" data-screenscroll-goto="2">Goes to second screen without animation</a>

Options

$('main.main').screenScroll({
    header: $('header.header'), //header node
    footer: $('footer.footer'), //footer node
    headerFixed: true, // fixed header
    footerFixed: false, // fixed footer
    startScreen: 0, // start plugin position
    scrollTimeOut: 800 // delay after move screen
    responsive : [] // responsive options
})

Events

    var screenScroll = $('main.main').screenScroll();

    //When the plugin gets resized.
    screenScroll.on('screenScroll.resize', function(e, data){
       console.log(data);
    });

    //After screen move.
    screenScroll.on('screenScroll.afterMove', function(e, data){
        console.log(data);
    });

    //Before screen move.
    screenScroll.on('screenScroll.beforeMove', function(e, data){
        console.log(data);
    });

    //Move to next item.
    screenScroll.trigger('screenScroll.next');

    //Move to previous screen.
    screenScroll.trigger('screenScroll.prev');

    //Move to screen by index
    screenScroll.trigger('screenScroll.moveTo', 1);

    //Goes to screen by index (Without animation)
    screenScroll.trigger('screenScroll.goTo', 1);

    //Move to screen where has section index.
    screenScroll.trigger('screenScroll.moveToSection', 3);

    //Goes to screen where has section index.
    screenScroll.trigger('screenScroll.goToSection', 3);

    //Move to section where has section id
    screenScroll.trigger('screenScroll.moveToSectionId', 'example');

    //Goes to section where has section id
    screenScroll.trigger('screenScroll.goToSectionId', 'example');

MIT