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

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

 

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

  • LATEST
  • RELATED
  • POPULAR