JavaScript

jQuery不要、軽量で使いやすいコードハイライト！「highlight.js」を紹介します。 この記事内でも、いたるとこでhighlight.jsが動いています。 ダウンロード ※ ver 9.12.0時点の内容です。 […]

Bootstrapを拡張するjQueryプラグイン「Bootstrap Color Picker Sliders」の紹介です。 読み込むライブラリが多いのが難点ですが、スタイリッシュなカラーピッカーを導入したい方はお試し […]

テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を紹介します。 実装すると以下のような処理ができるようになります！ DEMO（デモ） ここの文字がコピーされます。 コピーするコピー […]

Gif動画が多くなると、いたるところで再生しまくってて、うっとうしくなります。また、読者もどこからが動画の始まりか分からないためユーザビリティも悪いです。 jQueryプラグイン「gifffer」を使えば、通常の動画のよ […]

クリック時に波状に広がるボタンの作り方です。 ボタン <div class=”btn-wave”>ボタン</div> .btn-wave { display: inline-block; padd […]

HTML上でアニメーションを表現する方法は大きく３つあります。 transition（cssプロパティ） animation（cssプロパティ） animate（jQuery関数） アニメーションを一斉に動かしたときに違 […]

jQueryでアニメーションを設定できるanimate関数について紹介します。 CSSでもアニメーションは可能ですが、jQueryを扱えた方がより動的な表現ができるはずです。ただ欠点として、animate関数では、数字の […]

スクロールの途中で出現するフローティングボタンのJavaScriptの書き方を紹介します。 「トップへ戻る」「メニュー」「導線ボタン」など、いろいろ使い勝手の良いボタンなので、覚えてくと重宝します。 HTML <d […]

ページが読み込まれるまで待機するローディング画面の表示方法について紹介します。 コード全体像 <style> #loader-bg { background: #fff; height: 100%; widt […]

数字をカウントアップできるjQueryプラグイン「jquery-numerator.js」を紹介します。 DEMO（デモ）   もう一回 ダウンロード ※ ver 0.2.1時点の内容です。 ソースコードはgi […]