jQueryのプラグインを作成した際に、オプションで関数を実行できるように実装しようとして少し迷ったので、実装した方法をメモしておきます。
HOME > 自作プラグイン
-
自作したプラグイン内で関数を実行する
-
要素が画面内にあるかどうか判別する処理を実装する
要素が画面内にあるかどうか判別して、画面内にある場合にのみclassを付与する処理を実装してみます。
-
スクロールで指定した要素が表示された時にclassを追加する
スクロールで画面内に要素が表示されたらアニメーションを行う実装をすることがよくあるので、指定した要素が画面内に表示された時にclassを追加するという処理を作ってみます。
-
レスポンシブでブレークポイント毎に画像を出し分ける
レスポンシブでブレークポイント毎で画像を出し分ける処理を実装してみます。
-
メールアドレス入力時に、ドメインを自動で補完する
jQuery UIのautocompleteを使って、メールアドレス入力時にドメインを自動補完する機能を作ってみます。
-
シンプルなスライダーのjQueryプラグインを作ってみたver2
シンプルなスライダーのjQueryプラグイン「simpleSlider-v2.js」を作りました。
スライダーの左右に前後のスライド要素が表示されるタイプのスライダーで、機能は前後のスライド、自動スライドとその停止、easingの設定が行えます。
「simpleSlider-v2.js」のデモページはこちら
「simpleSlider-v2.js」のダウンロード -
どこまでスクロールしたかをイベントトラッキングで計測できるjQueryプラグインを作ってみた
スクロール位置をイベントトラッキングで取得する実験をしてみたついでに、処理をプラグイン化してみました。
特定の要素を指定した数値でエリアを分割して、どこまで表示されたのかを取得できます。
「scrollTracking.js」のデモページはこちら
「scrollTracking.js」のダウンロード
※ユニバーサルアナリティクスのみの対応になります。 -
パラパラ漫画のようなアニメーションを実装するjQueryプラグインを作ってみた
パラパラ漫画のようなアニメーションを実装するjQueryプラグイン「parapara-animation.js」を作りました。
アニメーションgifと比べて画像が重くなりそうですが、jpgや透過pngを使用できて、動きを1順で止めたりもできるので、使いどころは割とありそうに思います。
「parapara-animation.js」のデモページはこちら
「parapara-animation.js」のダウンロード -
シンプルなスライダーのjQueryプラグインを作ってみた
シンプルなスライダーのjQueryプラグイン「simpleSlider-v1.js」を作りました。
機能は前後のスライド、レスポンシブの対応、自動スライドとその停止、easingの設定が行えます。
「simpleSlider-v1.js」のデモページはこちら
「simpleSlider-v1.js」のダウンロード -
流れるテキストを実装するjQueryプラグインを作ってみた
マーキーのように横方向に流れるテキストを実装するプラグイン「easySlideText.js」を作りました。
「easySlideText.js」のデモページはこちら
「easySlideText.js」のダウンロード
続きを読む