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

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