JS Tutorial
- Overview
- Documents
Multi-Screen.js is a simple, lightweight, and easy to use jQuery plugin which turns a single page into a collection of screens with animated navigation.
Source: ian-devries.com
1. INCLUDE CSS AND JS FILES
<link href="multi-screen-css.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="multi-screen.js"></script>
2. HTML
Building your multi-screen webpage is as simple as dividing up the <body> of your HTML into <div> elements, giving them all the ms-container class (the plugin needs at least two to run), and building each screen inside. Give the element you want as your default screen the class ms-default. If no default is specified, the top ms-container will be used, and if more than one default is found the top ms-default will be used.
To facilitate navigation between screens, each one requires a unique id attribute.
<body>
<div id="screen1" class="ms-container ms-default">
<!-- screen1 content -->
</div>
<div id="screen2" class="ms-container">
<!-- screen2 content -->
</div>
</body>
To switch from one screen to another, simply give the class ms-nav-link to anything you can click on, and specify which screen to swap in for the current one by setting the data-ms-target attribute equal to its id.
You can specify the animations using the data-ms-animation, data-ms-enter-animation-animation, and data-ms-exit-animation-animation attributes. The valid commands are fade, top, topright, right, bottomright, bottom, bottomleft, left, topleft, fadetop, fadetopright, faderight, fadebottomright, fadebottom, fadebottomleft, fadeleft, andfadetopleft. The default is fade.
You can specify the animation time using the data-ms-time, data-ms-enter-animation-time, and data-ms-exit-animation-timeattributes, which take in a valid integer value. To specify if the animations should occur synchronously or in sequence, use the data-ms-delay attribute, which takes in true or false. The defaults are 500 miliseconds and false (no delay).
You can also determine the starting distance between the edge of the entering and exiting screens with the data-ms-distance, data-ms-vertical-distance, and data-ms-horizontal-distance attributes. The default is 200 pixels.
<!-- default animations --> <a class="ms-nav-link" data-ms-target="welcome" href="#">link</a> <!-- specific animations --> <a class="ms-nav-link" data-ms-target="welcome" data-ms-animation="fadeleft" data-ms-vertical-distance="0" href="#">link</a> <a class="ms-nav-link" data-ms-target="welcome" data-ms-exit-animation-time="700" data-ms-enter-animation-time="300" href="#">link</a> <a class="ms-nav-link" data-ms-target="welcome" data-ms-delay="true" href="#">link</a>
3. JAVASCRIPT
$(document).ready(function() { MultiScreen.init(); });
4. SETTINGS
Multi-Screen.js makes it easy to change the defaults for the animations, their times, the starting distance between the entering and exiting screens, and whether the animations should occur synchronously or asynchronously. Each function below returns a boolean (true if default was succesfully changed or false if not). You may also pass an options object into the init functi
/** * Sets the default animation * `command` must be a valid animation command * `type` must be 'enter' or 'exit' (OPTIONAL) */ MultiScreen.set_default_animation(String command, String type); /** * Sets the default animation time in milliseconds * `time` must be a valid integer greater than 0 * `type` must be 'enter' or 'exit' (OPTIONAL) */ MultiScreen.set_default_time(Number time, String type); /** * Sets the default starting distance between the edge of the entering and exiting screens in pixels * `distance` must be a valid integer (can be negative) * `dimension` must be 'vertical' or 'horizontal' (OPTIONAL) */ MultiScreen.set_default_distance(Number distance, String dimension); /** * Sets the default delay between the enter and exit animations * `delay` must be a boolean */ MultiScreen.set_default_delay(Boolean delay); /** * Sets the defaults by property * `options` must be an object containing a value for each property to set (see documentation) */ MultiScreen.set_defaults(Object options);
