jQuery

【jQuery】単一のページを回すプラグイン。Multi-Screen.js

February 13, 2016

Multi-Screen.jsはシンプルで軽量、そしてアニメーションナビゲーションで単一のページを回すjQueryプラグイン。speedy modeとMerry go round!の組み合わせは目が回りそう。

HTMLマークアップ

<body>
    <div id="screen1" class="ms-container ms-default">
        <!-- screen1 content -->
    </div>
    <div id="screen2" class="ms-container">
        <!-- screen2 content -->
    </div>
</body>

サンプルリンク

<!-- default animations -->
<a class="ms-nav-link" data-ms-target="welcome" href="javascript:void(0)">link</a>

<!-- specific animations -->
<a class="ms-nav-link" data-ms-target="welcome" data-ms-animation="fadeleft" data-ms-vertical-distance="0" href="javascript:void(0)">link</a>
<a class="ms-nav-link" data-ms-target="welcome" data-ms-exit-time="700" data-ms-enter-time="300" href="javascript:void(0)">link</a>
<a class="ms-nav-link" data-ms-target="welcome" data-ms-delay="true" href="javascript:void(0)">link</a>

アニメーション

fade
top
topright
right
bottomright
bottom
bottomleft
left
topleft
fadetop
fadetopright
faderight
fadebottomright
fadebottom
fadebottomleft
fadeleft
fadetopleft

JavaScript

アニメーション

var options = { 
    target_id:                  // id of the target screen (REQUIRED)
    animation_command:          // must be a valid animation command
    enter_animation_command:    // must be a valid animation command
    exit_animation_command:     // must be a valid animation command
    animation_time:             // milliseconds, must be an integer greater than 0
    enter_animation_time:       // milliseconds, must be an integer greater than 0
    exit_animation_time:        // milliseconds, must be an integer greater than 0
    scroll_time:                // milliseconds, must be an integer greater than 0
    delay:                      // must be a boolean
    distance:                   // pixels, must be an integer (can be negative)
    vertical_distance:          // pixels, must be an integer (can be negative), overrides distance
    horizontal_distance:        // pixels, must be an integer (can be negative), overrides distance
    chain_animation_options:    // options object for chaining navigations (see below)
}

手動ナビゲーションコード例

$('#navigate').click(function() {

   if (!MultiScreen.switch_screens({target_id: $('#screen-input').val()})) {

        alert('Navigation failed!');

   }

});

$('#leap-over-center').click(function() {

   MultiScreen.switch_screens({target_id: 'center-screen', chain_animation_options: {target_id: 'right_screen'}})) {

});

インストール

<head>
        <!-- latest jQuery -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

        <!-- link the css and js scripts -->
        <link href="multi-screen-css.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="multi-screen.js"></script>

        <!-- run the plugin -->
        <script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>

デフォルト

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_scroll_time:            // milliseconds, must be an integer greater than or equal to 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
}

default animation: fade
default animation time: 500
default scroll time: 200
default distance: 200
default delay: false

Download