JavaScript

テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」

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

Gif動画に再生ボタンを付けて自動再生させないjQueryプラグイン「gifffer」

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

CSSのtransitionとanimation、jQueryのanimateの比較

HTML上でアニメーションを表現する方法は大きく3つあります。 transition(cssプロパティ) animation(cssプロパティ) animate(jQuery関数) アニメーションを一…

jQueryのanimate関数で要素を動かす!

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

スクロールの途中で出現するフローティングボタンのJavaScript

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

ページ読み込み中のローディング画面を表示するJavaScript

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

数字をカウントアップしたい時のjQueryプラグイン「jquery-numerator.js」

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

背景色をスムーズに変化させるjQueryプラグイン「jquery-color」

背景色を緩やかに変化させることができるプラグインの紹介です。 何気ない変化にサイトへの「こだわり」が見えてきますよね。 DEMO(デモ) ダウンロード ※ ver 2.1.2時点の内容です。 ソースコ…

スクロールして出現したタイミングで発火させるjQueryプラグイン「inview」

スクロールでエリアに表示された時の処理を指定できるjQueryプラグインを紹介します。 他のプラグインとの組み合わせのもできるので、使い勝手がとてもいいですよ。 ダウンロード ※ ver.1.1.2時…

スクロールの登場に合わせてアニメーションさせる決定版!「wow」の紹介

スクロールに合わせて登場したりアニメーションを発火させることができるjQueryプラグイン「wow」を紹介します。 めちゃくちゃ簡単で、アニメーションの種類も豊富なので、少しリッチなカッコいいサイトに…