[WEB] ページ内リンクのアニメーション紹介
07 03 2016
ページ内リンクのアニメーション紹介
jQueryで簡単に67種類のアニメーションが付けれる「PageTransitions」
これだけあると、便利ですね。
ヘッダーに必要なcss、scriptを読み込みます。
<head> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <link rel="stylesheet" type="text/css" href="css/animations.css" /> <script src="js/modernizr.custom.js"></script> </head>
その他のscriptを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.dlmenu.js"></script> <script src="js/pagetransitions.js"></script>
アニメーションボタンの設置
「data-animation="1"」この数字を変更することによりアニメーションが変更できます。
詳しい動きはデモサイトをご覧ください。
<ul class="dl-menu"> <li> <a href="#">Move</a> <ul class="dl-submenu"> <li data-animation="1" data-url="#"><a href="#">Move to left/ from right</a></li> <li data-animation="2"><a href="#">Move to right/ from left</a></li> <li data-animation="3"><a href="#">Move to top/ from bottom</a></li> <li data-animation="4"><a href="#">Move to bottom/ from top</a></li> </ul> </li> </ul>
ページ内のリンクが順番に表示されます。
<div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>01</h1></div> <div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>02</h1></div> <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>03</h1></div> <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>04</h1></div> <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>05</h1></div> <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>06</h1></div> </div>
「PageTransitions」は、サイトを大胆に見せたいときなど便利ですね。
以上「PageTransitions」のご紹介でした。
