
ページを遷移する際にローディングアニメーション付きでフェードやその他アニメーション効果を与えることができる「Animsition」
2014年12月12日jQueryプラグイン活用
ページ間を遷移する際の切り替え時に、ローディングアニメーションを追加し、フェードやその他色々なアニメーション効果を与えることができます。
JavaScript
(function($){ $(function(){ $("#container").animsition(); }); })(jQuery);
HTML
<div id="container" class="animsition" data-animsition-in="fade-in" data-animsition-out="fade-out"> <a href="fade.html" class="animsition-link" data-animsition-out="fade-out">fade</a> <a href="fade-up.html" class="animsition-link" data-animsition-out="fade-out-up-sm">fade up</a> <a href="zoom.html" class="animsition-link" data-animsition-out="zoom-out-sm">zoom</a> </div>
CSS
#container { text-align: center; } #container a { display: inline-block; width: 20%; padding: 14px 10px; margin: 0px 8px; text-align: center; border: 1px solid #ffbc30; color: #ffffff; background-color: #ffbc30; text-decoration: none; } #container a:hover { color: #ffbc30; background-color: #ffffff; }