object-fit-imagesは、IEでもCSSのプロパティ「object-fit」を使えるようにするためのスクリプトです。 下記でデモをご確認いただけます。 デモページを見る object-fit-imagesの使…
IEにもobject-fitを対応させるためのスクリプト「object-fit-images」
jQueryを使ってアニメーションしながら指定した数字までカウントアップさせる方法
jQueryを使って、0から指定した数字までカウントアップする方法をご紹介いたします。指定した数字までアニメーションしながらカウントアップします。 以下にデモを用意しましたので、挙動についてはデモページをご参照ください。…
画像比較に便利！スライドして画像を切り替えることができる軽量スクリプト「Beer Slider」
Beer Sliderは、2つの画像を比較するために、スライドして画像を切り替えることができるようになるスクリプトです。ビフォー/アフターの画像を比較したい時などに便利です。 以下のような感じで、画像の上にスライドが表示…
YouTubeの動画IDを指定するだけで動画のポップアップ再生を実装できるjQueryプラグイン「GRT Youtube Popup」
GRT Youtube Popupは、要素にYouTube動画のIDを指定するだけで、指定した動画をポップアップ再生できるjQueryプラグインです。使い方も簡単で、楽に実装できて便利です。 デモは配布サイトにてご確認い…
画像の遅延ロードを簡単に実装できる軽量スクリプト「Lazyestload.js」
Lazyestload.jsは、画像の遅延ロードを簡単に実装することができるスクリプトです。jQueryなどには依存せず、単体で動作します。 デモは以下よりご確認いただけます。 デモページを見る 画像が可視範囲に入って、…
jQueryで特定のクラスが付いている場合のみ処理を実行する方法
jQueryで条件を指定する際に、特定のクラスが存在しているかどうかを判別する方法をご紹介いたします。 jQueryで特定のクラスが付いている場合のみ処理を実行する方法 例えば、div要素をクリックした時に、.hogeと…
スクロール時にアニメーションしながら要素を表示することができるJavaScriptライブラリ「AOS(Animate On Scroll Library)」
AOSは、スクロールと連動して、要素が可視範囲に入ったらアニメーションしながら表示させることができるJavaScriptライブラリです。様々なアニメーションが用意されているので、色んなサイトで活用することができます。 動…
フルスクリーン表示の画面ごとにスクロールするページを作成できるjQueryプラグイン「fullPage.js」
fullPage.jsは、フルスクリーンでコンテンツを表示し、画面ごとにスクロールさせることができるjQueryプラグインです。 どういったページが実装できるのかについては、デモを見てもらうのが一番わかりやすいと思います…
ローディングアニメーションを簡単に実装することができるjQueryプラグイン「fakeLoader.js」
fakeLoader.jsは、サイトにローディングアニメーションを実装することができるjQueryプラグインです。非常に簡単にローディングアニメーションを設置することができます。 挙動については、以下デモページにてご確認…
textareaやinput要素で入力可能な文字数を表示することができるスクリプト「short-and-sweet」
short-and-sweetは、textareaやinputでmaxlengthが指定されている場合に、入力可能な残りの文字数を表示してくれるスクリプトです。jQueryなどにも依存せず、単体で動きます。 以下に簡単な…