Separate your page into screens.
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.
<div id="screen1" class="ms-container ms-default">
<!-- screen1 content -->
<div id="screen2" class="ms-container">
<!-- screen2 content -->
Back to introduction or move on to Building screen navigation.
Set default animations, times, distances, and delay.
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 function (see documentation).
* 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' or 'scroll' (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
* Sets the defaults by property
* `options` must be an object containing a value for each property to set (see documentation)
Back to building navigation or move on to Installation.
Install Multi-Screen.js in three simple steps.
- Download the latest version from GitHub (documentation available) and extract the Multi-Screen JS and CSS files.
- Link the JS and CSS files in the <head> tag of your page (or copy and paste the styles into your own stylesheet).
<title>My Multi-Screen Page</title>
<link href="multi-screen-css.css" type="text/css" rel="stylesheet"/>
Back to setting defaults or back to the Introduction.