windows

windows

a handy, loosely-coupled jQuery plugin for full-screen scrolling windows

project root
| -- css
| -- | -- main.css (compiled)
| -- js
| -- | -- jquery.windows.js
| -- scss
| -- | -- main.scss
| -- index.html

How it works

This is a light bootstrap that sets up:
  • - the basic SASS for sequential full screen windows
  • - a jQuery plugin for managing their positions as the user scrolls
The plugin simply opens up a handy API for position management, provides callbacks, and will allow for window snapping. No CSS is applied to the callee. 
                $('.window').windows({
                    snapping: true,
                    snapSpeed: 500,
                    snapInterval: 1100,
                    onScroll: function(scrollPos){
                        // scrollPos:Number
                    },
                    onSnapComplete: function($el){
                        // after window ($el) snaps into place
                    },
                    onWindowEnter: function($el){
                        // when new window ($el) enters viewport
                    }
                });

api

                    // returns ratio 0-1
                    $('.window:eq(0)').ratioVisible();

                    // returns boolean of whether or not is visible on screen
                    $('.window:eq(0)').isOnScreen();

                    // get most visible window
                    $('.window').getCurrentWindow();