[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
[JS]さまざまなHTMLの要素をくるっと回転させるスクリプト -Flipload.js
パネルをクリックすると、くるっと回転します。 回転後のスピナーはオプションです。 回転は水平だけでなく、垂直にも対応しています。 また、回転して動画を表示したり、フォームのボタンを回転させることもできます。 ボタンだけをくるっと回転させることもできます Flipload.jsの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="flipload.css"> <script src="flipload.js"></script> Step 2: HTML 回転させる要素にclassを付与します。 デモのようにリストでパネルを複数配置する場合は、下記のように。 <ul> <li class="box"> <div>1枚目のパネル</div> <li> <li class="box"> <d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
