Get new jQuery plugins just once a week

×

FSVS

FavoriteLoadingAdd to favorites

September 16, 2014

Full Screen Vertical Scroll

FSVS is a simple Full Screen Vertical Slider using CSS3 transitions followed up by a jQuery fallback.

Created by Luke Snowden

Download

Example

FSVS jQuery plugin

vertical scroll

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="assets/css/style.css" media="all" rel="stylesheet" type="text/css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="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>
FSVS

Related posts:

Sly
bottomless
scrollpanel
FSVS jQuery plugin

http://jquer.in/wp-content/uploads/2014/09/FSVS.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever