要素が画面内にあるかどうか判別して、画面内にある場合にのみclassを付与する処理を実装してみます。

続きを読む

スクロールで画面内に要素が表示されたらアニメーションを行う実装をすることがよくあるので、指定した要素が画面内に表示された時にclassを追加するという処理を作ってみます。

続きを読む

レスポンシブでブレークポイント毎で画像を出し分ける処理を実装してみます。

続きを読む

jQuery UIのautocompleteを使って、メールアドレス入力時にドメインを自動補完する機能を作ってみます。

続きを読む

シンプルなスライダーのjQueryプラグイン「simpleSlider-v2.js」を作りました。
スライダーの左右に前後のスライド要素が表示されるタイプのスライダーで、機能は前後のスライド、自動スライドとその停止、easingの設定が行えます。
「simpleSlider-v2.js」のデモページはこちら
「simpleSlider-v2.js」のダウンロード

続きを読む

スクロール位置をイベントトラッキングで取得する実験をしてみたついでに、処理をプラグイン化してみました。
特定の要素を指定した数値でエリアを分割して、どこまで表示されたのかを取得できます。
「scrollTracking.js」のデモページはこちら
「scrollTracking.js」のダウンロード
※ユニバーサルアナリティクスのみの対応になります。

続きを読む

パラパラ漫画のようなアニメーションを実装するjQueryプラグイン「parapara-animation.js」を作りました。
アニメーションgifと比べて画像が重くなりそうですが、jpgや透過pngを使用できて、動きを1順で止めたりもできるので、使いどころは割とありそうに思います。
「parapara-animation.js」のデモページはこちら
「parapara-animation.js」のダウンロード

続きを読む

シンプルなスライダーのjQueryプラグイン「simpleSlider-v1.js」を作りました。
機能は前後のスライド、レスポンシブの対応、自動スライドとその停止、easingの設定が行えます。
「simpleSlider-v1.js」のデモページはこちら
「simpleSlider-v1.js」のダウンロード

続きを読む

マーキーのように横方向に流れるテキストを実装するプラグイン「easySlideText.js」を作りました。
「easySlideText.js」のデモページはこちら
「easySlideText.js」のダウンロード
続きを読む

特定の位置までスクロールしたら、フェード+アニメーションで表示するプラグイン「scrollAnimateOption.js」を作りました。
パララックスサイトなどとは異なり、アニメーション処理は1度しか行われません。
「scrollAnimateOption.js」のデモページはこちら
「scrollAnimateOption.js」のダウンロード

続きを読む