jQueryを使って、ボタンをクリックする度に要素の中のテキストを切り替える方法をご紹介いたします。 例えば、「開く」と書かれたボタンをクリックすると、テキストを「閉じる」に切り替えたい時などに便利です。 jQueryを…
jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法
アニメーションGIFをマウスホバーやクリックで再生・停止できるようになるJavaScriptライブラリ「Freezeframe.js」
Freezeframe.jsは、マウスホバーやクリックによってアニメーションGIFの再生・停止を制御できるようにするJavaScriptライブラリです。 以下のデモページで挙動を確認できます。 デモページを見る Free…
YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」
Lityは、YouTube動画や画像などをポップアップで表示できるjQueryプラグインです。動画や画像のリンクをクリックすることで、いわゆるモーダルウインドウとして表示させることができます。 配布サイトでデモが用意され…
IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」
Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分ける…
jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
jQueryでは「$(‘.example::before’).css(‘color’,’#ccc’);」のように指定しても、疑似要素はDOMではない…
mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」
MailtoUIは、mailtoリンクをクリックした時の挙動をわかりやすくするためのスクリプトです。 MailtoUIを導入することで、mailtoリンクをクリックした時にすぐメーラーが開かず、メールアプリを起動するか、…
単体で動作するシンプルなlightbox系スクリプト「Shadowbox.js」
Shadowbox.jsは、単体で動作するlightbox系のスクリプトです。画像をふわっと拡大表示させることができます。 挙動については、以下ページよりご確認いただけます。 デモページを見る Shadowbox.jsの…
クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方
Luminousは、画像をクリックするとふわっと拡大してくれるLightbox系のJavaScriptスクリプトです。jQueryに依存せず単体で動作します。 Luminousの使い方 Luminousの使い方は、WEM…
クリック/タップする度にJavaScriptでクラスを追加・削除させる方法
素のJavaScript(Vanilla JS)を使って、クリック/タップする度にクラスを追加・削除させる方法をご紹介いたします。 要素にクラスを追加・削除することで、表示・非表示を切り替えたり見た目を変えたりと、色んな…
背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」
lazysizesは、画像を遅延読み込みすることができるLazyload系のJavaScriptライブラリです。通常の画像だけでなく背景画像も遅延読み込み可能です。また、jQuery非依存で単体で動作します。 挙動につい…