画面内に入った要素にクラスをつけるプラグインを作りました。

こんにちは。anga. の篠崎です。
日頃はエンジニアとして主にwebサイト制作を行っています。

今回はJavascriptでよく実装する機能をjQueryプラグイン化しました。スクロール時に画面内に入った要素にクラスを付与するプラグインです。スクロールアニメーション等に使えるちょっとした機能ですが、プラグイン化する事で制作の効率化に一役買っています。ファイルはgithub上に設置していますので、興味のある方は覗いてみてください。

Github:
https://github.com/smitsunori/inviewClass

---

できる事

機能は至ってシンプルです。
ページ読み込み時やスクロール時に指定した要素が画面内に入ったらクラスを付与します。さらに指定時間経過後に2つ目のクラスを同じ要素に付与します。
指定時間経過後に2つ目のクラスが付与される事で、Javascriptの記述を増やす事なくCSSのみでスクロール時の処理を追加できます。2つ目のクラスはオプションで無効にできます。

デモ

https://smitsunori.github.io/inviewClass/

上のリンクからgithub上のデモページをご確認ください。
このデモでは青のボックスが画面内に200px以上入ると「is-inview」というクラスが付与され赤に変わり、1000ms経過後に「is-inview-done」というクラスが付与されグレーに変わります。

---

使用方法

クラスを付与したい要素を指定します。

$(‘.your-item’).inviewClass();

初期設定では画面内に200px以上入ったら最初のクラス「is-inview」が付与され、それから1000ms経過すると2つ目のクラス「is-inview-done」が付与されます。クラス名や数値はオプション設定で変更可能です。

オプションの各パラメータ名は以下になります。

$('.your-item').inviewClass({
 className: 'is-inview',
 secondClassName: 'is-inview-done',
 visibleOffset: 200,
 secondClassInterval: 1000
});

className: 画面内に要素が入った時に付与されるクラス名を指定します。
secondClassName: 指定時間経過後に付与される2つ目のクラス名を指定します。空文字列を設定すると2つ目のクラスを付与しません。
visibleOffset: 画面内に要素が入ってからクラスが付与されるまでの距離をpxで指定します。
secondClassInterval: 2つ目のクラスが付与されるまでの時間をmsで指定します。

オプション設定例

画面内に入ってからクラスが付与されるまでの距離を初期設定より長い400pxにしたい場合は以下の様に設定します。

$('.your-item').inviewClass({
 visibleOffset: 400
});

2つ目のクラスを無効にする場合は以下の様に設定します。

$('.your-item').inviewClass({
 secondClassName: ''
});

---

おわりに

スクロールの実装をしていてよく使う機能を抜き出してプラグイン化しました。特に2つ目のクラスに関しては単体のクラス付与だけでは難しいCSS挙動も実現しやすいのではないかと思います。僕は主にスクロールアニメーション用に設定していたwill-changeを解除するのに2つ目のクラスを使っています。

画面内に入った距離を%で計算できる様に対応したり、スクロール処理を効率化したりと改善できる部分はまだまだあると思いますので、随時更新していきたいと思います。

ちょっとした機能なのでプラグイン化する意味は薄いかなと思っていたのですが、そのちょっとが簡略化される事で制作の効率化に大きく貢献しています。またプラグイン単体を効率化していく事でその恩恵を簡単に次に引き継いで行けそうです。こう書いた方が良いよ！といったご意見やオススメの処理方法などありましたらぜひGitでご連絡頂ければと思います。
https://github.com/smitsunori/inviewClass

---

anga.では一緒に働いてくれる方、クリエイティブパートナーを募集しています。
興味のある方はこちらのページをご覧ください。

• newer
• close
• older