search

lukesnowden / FSVS

Full Screen Vertical Scroll
https://www.lukesnowden.co.uk/full-screen-vertical-scroll/
723 stars 145 forks source link
fullpagejs fullscreen javascript jquery

readme

Showcase

Send a pull request to add your projects to the showcase list

FSVS2 (BETA) on development branch

link: https://github.com/lukesnowden/FSVS/tree/development demo: https://www.lukesnowden.co.uk/full-screen-vertical-scroll/v2

I am currently having issues trying to hijack the screen on scroll for mobiles. If anyone cares to try and accomplish this as I've currently ran out of ideas, it would be greatly appreciated and you will be accredited for it.

FSVS - Full Screen Vertical Scroller

more information https://www.lukesnowden.co.uk/full-screen-vertical-scroll

initiate the plugin:

$(document).ready( function() {
    var slider = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseWheelDelay : false,
        scrollableArea : 'scrollable',
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
    //slider.slideUp();
    //slider.slideDown();
    //slider.slideToIndex( index );
    //slider.unbind();
    //slider.rebind();
});

Basic HTML structure

(please note that the fsvs class is needed on the HTML tag)

<!doctype html>
<html class="fsvs" lang="en">
    <head>
        <link href="https://github.com/lukesnowden/FSVS/blob/master/assets/css/style.css" media="all" rel="stylesheet" type="text/css" />
        <script src="https://github.com/lukesnowden/FSVS/raw/master//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://github.com/lukesnowden/FSVS/raw/master//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="https://github.com/lukesnowden/FSVS/raw/master/assets/js/bundle.js"></script>
    </head>
    <body>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </body>
</html>