画面をスクロールして要素をふわっと表示する css / js / jQuery

画面をスクロールして、ボタンなどの要素をふわっと表示したい時。

  1. cssで特定の要素を透明にしたり(opacity)、移動したり(transform)するクラスを付けておいて、jsで画面トップから要素までの高さで、isActiveなどクラスをつけて、要素を元の状態に戻す方法。つけるクラスに、transitionで時間を指定しておく。

参考

ttps://noze.space/archives/415

 

  1. jQueryでtopからのスクロール幅を取得し、それが要素を表示するまでの高さまで来た時に、 isActive などのクラスをつける。ttps://yuyauver98.me/scroll-show-hide-btn/
  2. ライブラリScrollrevealを使う。

参考

ttps://liginc.co.jp/500530

 

一番簡単なのはライブラリを使う方法だが、1番でjsを作っておけば、使いまわせる。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です