これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
jQueryスニペット：アニメーション付きの数字カウンター | かちびと.net
Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery$('.count').each(function () { $(this).prop('c',0).animate({ ｃ: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });html<span class="count">2000</span>via
ProgressBar.js - Progress bars with JavaScript
With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor. ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. Usage A simple cod
[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay
ページ全体にオーバーレイ、アニメーションでカウントダウン plainOverlayの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery-1.11.0.min.js"></script> <script src="jquery.plainoverlay.min.js"></script> </head> Step 2: HTML HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。 <body> <div id="demo">パネル</div> </body> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。 //show element.plainOverlay('sh
CountUp.js
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting w
flipCounter 1.2 a jQuery plugin by BloggingSquared.ca
Bare Bones For the everyday developer, nothing more than the essentials, pack'd, tar'd and vacuum-sealed in shrink wrap for a lightening fast downloading experience. Turbo Charged For those who like to tinker, get the uncompressed code, fully commented with a source PSD included so you can customize the look of your flipCounter. Usage FlipCounter is easy to implement, follow these steps: In your p
カウントダウン終了後に任意のコードを実行できる軽量jQueryプラグイン・jquery-countdown - かちびと.net
カウントダウンタイマーの実装と 終了後に任意のイベントを発生 させられるjQueryのプラグイン、 jquery-countdownのご紹介です。 たまに見かけるやつですね。使用 頻度は高くは無さそうですけど。 ローンチ前のComing soonページなんかでたまに見かけるやつです。スクリプトも軽量です。 カウントダウンアニメーションを実装します。終了後にコードを実行させる事も出来ます。時計部分はCSSスプライトを利用した画像を使用しているようです。 動作サンプル サンプルです。再生ボタンで動作テスト出来ます。 日をまたぐようなカウントダウンならもう一工夫必要ですね。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <
円形で回転するタイマーを実装できるjQueryサンプル:phpspot開発日誌
Animated Circle Timer | jQuery Plugins 円形で回転するタイマーを実装できるjQueryサンプル。 １〜１０秒の間で指定して指定秒数をかけてタイマーを回すようなものが作れます。 CSS3を使っているので非対応ブラウザでは動きませんが、なかなか面白いサンプルだったのでご紹介です デモページはこちら プラグイン形式ではないのでブラッシュアップの余地はありますが、実験や勉強用にソースを見てみてもよいかも。 タイマー秒数はソースに直接書く感じのようです 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」 ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カウントダウンをGIFアニメで作成出来る・「Gif Countdown」 - かちびと.net