サイトを表示した時に、スクロール量に応じて要素をフェードイン表示させる方法を紹介したいと思います。スクロールして要素が可視範囲に入ったら、フェードインしてふわっと表示させます。 挙動については、デモページを用意しましたの…
スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
まるで水みたいなぷよぷよとした動きを表現できるjQueryプラグイン「jquery.morphing.js」
jquery.morphing.jsは、まるで水のようなぷよぷよとした動きを表現できるjQueryプラグインです。 動きについては、以下デモページよりご確認ください。 デモページを見る jquery.morphing.j…
レスポンシブ対応の円グラフ・棒グラフ・折れ線グラフが描けるjQueryプラグイン「Pizza Amore!」
Pizza Amore!は、Foundationの提供元ZURBが公開しているjQueryプラグインです。リストにクラスとデータ属性を追加するだけで、レスポンシブ対応の円グラフ・棒グラフ・折れ線グラフが実装できます。 P…
レスポンシブ対応！Pinterestのように要素を詰めて表示することができるMasonry系スクリプト「Muuri」
Muuriは、Pinterest風のレイアウトを実現することができるMasonry系のスクリプトです。 表示や動きについては、デモページでご確認いただけます。 Muuriの使い方 Muuri・Velocity・Hamme…
ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「ScrollTrigger」
ScrollTriggerは、ページのスクロールに応じて、要素をアニメーションさせながら表示できるようになるスクリプトです。 動きについては、デモページをご参照ください。下にスクロールしていくと、要素がアニメーションしな…
スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」
PulltoRefresh.jsは、スマホやタブレットで画面を下に引っ張ると、ページをリロードできるようになるスクリプトです。指定した要素のみをリフレッシュすることもできます。 スマホやタブレットでデモページにアクセスす…
JavaScriptやjQueryを使ってサイト上での右クリックを禁止する方法
JavaScriptやjQueryを使って、サイト上で右クリックができないようにする方法をご紹介いたします。 JavaScriptで右クリックを禁止する JavaScriptで右クリックを禁止するには、bodyに「onc…
iframe内のリンククリックをトラッキングすることができるjQueryプラグイン「iframeTracker」
iframeTrackerは、iframe内のリンククリックを計測するためのjQueryプラグインです。iframeTrackerを導入することで、クロスサイトでのiframeのトラッキングが可能になります。 ifram…
チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法
HTMLフォームで、チェックを入れた時だけ有効になるテキストボックスを実装する方法をご紹介いたします。 今回は例として、果物にチェックを入れたら個数が入力できるようになるフォームを作りたいと思います。 以下のように、チェ…
テーブルをレスポンシブ対応にしてくれるjQueryプラグイン「resTables」
resTablesは、テーブルをレスポンシブ対応にしてくれるjQueryプラグインです。ブラウザの幅が縮まると、横長のテーブルを縦に並べてくれます。 デモについては、プラグインの配布ページでご確認いただけます。 resT…