Full Page Slide Transitions with jQuery Multi-Screen.js Plugin

Multi-Screen.js is a lightweight jQuery plugin for creating a fashion single page website that allows the visitor to navigate through content sections with vertical and horizontal transition animations.

How to use it:

1. Include the jQuery javascript library and jQuery multi-screen.js plugin in the head section of the page.

<link href="multi-screen-css.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="multi-screen.js"></script>

2. Create the content for your web page and build the navigation using data-* attributes.

• data-ms-target="top-screen": the target section you want to switch to.
• data-ms-exit="bottom": Specify the 'exit' animation. The valid commands are fade, top, topright, right, bottomright, bottom, bottomleft, left, topleft, fadetop, fadetopright, faderight, fadebottomright, fadebottom, fadebottomleft, fadeleft, and fadetopleft
• data-ms-enter="top": Specify the 'enter' aniamtion. The valid commands are fade, top, topright, right, bottomright, bottom, bottomleft, left, topleft, fadetop, fadetopright, faderight, fadebottomright, fadebottom, fadebottomleft, fadeleft, and fadetopleft

<div id="center-screen" class="ms-container ms-default">
Your content goes here.
<a href="javascript:void(0)" class="ms-nav-link" data-ms-target="top-screen" data-ms-exit="bottom" data-ms-enter="top">go up</a>
</div>

<div id="top-screen" class="ms-container">
Your content goes here.
<a href="javascript:void(0)" class="ms-nav-link" data-ms-target="center-screen" data-ms-exit="top" data-ms-enter="bottom">go down to the center</a>
</div>

...

3. Initialize the plugin on document ready.

<script type="text/javascript">
$(document).ready(function() { 
MultiScreen.init(); 
});
</script>

4. Available options.

var options = {
    default_animation:              // must be a valid animation command
    default_enter_animation:        // must be a valid animation command, overrides default_animation
    default_exit_animation:         // must be a valid animation command, overrides default_animation
    default_time:                   // milliseconds, must be an integer greater than 0
    default_enter_time:             // milliseconds, must be an integer greater than 0, overrides default_time
    default_exit_time:              // milliseconds, must be an integer greater than 0, overrides default_time
    default_distance:               // pixels, must be an integer (can be negative)
    default_vertical_distance:      // pixels, must be an integer (can be negative), overrides default_distance
    default_horizontal_distance:    // pixels, must be an integer (can be negative), overrides default_distance
    default_delay:                  // must be a boolean
}

Change log:

v1.2.2 (2014-07-14)

• update

v1.2.1 (2014-07-02)

• Bugfix with specifying delay with switch_screens

v1.2.0 (2014-06-05)

• update to the latest version.

v1.0.1 (2014-02-22)

• update to the latest version.

---

This awesome jQuery plugin is developed by ian-de-vries. For more Advanced Usages, please check the demo page or visit the official website.