これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result 自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ 異なるコンテナに含まれる同一要素に自動でナンバリングします 結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します cssbody {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes,
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する
Result いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで出来るところまでやってみた、的なもの :checkedや:notなどの疑似要素をふんだんに使って実装されていました これだけだと実用性はないけど単純に凄いなぁと感心したので備忘録 css/* smart-css todo boilerplate */ #smart-css:checked ~ #todos .dumb-thing { display: none } #smart-css:checked ~ #todos .smart-thing { display: block } #smart-css:checked ~ #todos .submit-unchanged { display: none } #smart-css:checked ~ #todos .todo-item { color:
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
テーブルに自動で行数を表示する
Result tableに行数を表示します。疑似要素にcss-countersで加えています。 前後に任意のテキストも挿入できます。 cssbody {/*カウンターリセット*/ counter-reset: row-counter; } tr { position: relative; } tr:before {/*行の頭に疑似要素を追加してカウント*/ position: relative; padding: 10px; display: block; bottom: 0; counter-increment: row-counter; content: "第"counter(row-counter)"行目"; }html<table> <tr> <td>foo</td> <td>bar</td> <td>hoge</td> </tr> <tr> <td>foo</td> <td>ba
CSSだけでcheckboxのチェック数をカウントする
Result content: counter;を使ってチェック数をカウントする、というもの JSによるもののように応用は効きませんが、数えるだけなら css.languages {/*リセット*/ counter-reset: characters; } input:checked {/*チェックされたらカウント*/ counter-increment: characters; } .total:after {/*疑似要素で任意の場所にカウント結果を表示*/ content: counter(characters)"個の項目をチェックしています"; }html<div class="languages"> <div class="input-wrapper"> <input id="foo" type="checkbox"><label for="foo">foo</label> </d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
