watchscroll.js –
最近は様々なイベントに反応するエフェクトが流行っているなと思います。最先端のWEBデザインをされている方ならば「最近じゃねっす」と思うかもしれませんが、私達に仕事をくれるお客様たちはトレンドから数年してかっこいいとか感じたりするもんですからね~。
って事で最近トレンドの！！画面スクロールで表示領域内に入ったらclassを変更するスクリプトを書いてみました。
スクリプトを読み込んだら後はclass名と独自属性一つ追加すれば使えます。
とりあえずサンプルを見て、こんなかんじのやつです。。
先日onloadとかでstyleを変更するスクリプトを書いたんですが、思いつきで書いたんであまり宜しくなかったなと思い、今回そのjavascriptをちょっと使えるようにパワーアップしたものを書きました。
普通に対象のオブジェクトにclassを設定して、ターゲットが表示領域内に入ったら独自属性に書いてあるクラス名を追加しなさいよ~っていうjavascriptです。
ダウンロード
使い方
スクリプト読み込み
上記のダウンロードからダウンロードして読み込むか、お好きなjsファイルに足して読み込んでください。
対象にclass="k_ca"を追加。目印です
このクラス名が入っているオブジェクトを対象にします。
対象にdata-kca-class="変更後のクラス"を付けます
ターゲットが画面の表示領域内にスクロールされたら、data-kca-class="変更後のクラス"で設置されているclassを追加します。
こんな感じで
jsファイルの読み込み
<head> … <script type="text/javascript" src="watchscroll.js"></script> … </head>
ターゲットに必要な属性を追加
<div class="k_ca myclass" data-kca-class="changeclass">サンプル sample</div>
changeclassが追加されてclass="k_ca myclass changeclass"の様になります。
動作サンプル
コツ
transitionはこのjavascript内で追加したりしていませんので、ご自身で変更前のclassに追加しておいて下さい。
その中でスピードとかは各々でいい感じな形に設定して下さい。
まとめ
基本的に出落ちっていうか、最初にアクションを起こしてくれればいいので、ターゲットが一度表示領域内に入ったらそれっきりクラスを戻したりはしていません。
パララックス的なものであればそのほうがいいのでしょうが、今回はそういうつもりではなかったので。
読むたびにちょろちょろ動いてても読みづらいですしね~。。
