技術

Velocity.jsでスクロールに従って文章がふわっと現れたり消えたりするテスト

作ってみました。
Velocity.jsでスクロールに従って文章がふわっと現れたり消えたりするテスト

詳細はソースを見ていただくとして、簡単に説明すると
ウインドウ領域より小さい仮想的な領域(areaと命名)を想定し、その領域に入った文はVelocity.jsで表示し逆にその領域から出た文は消去する、というのをやっているだけです。

ちょっと詰まったのはVelocity.jsのエフェクトの副作用について。
例えばtransition.slideUpOutというエフェクトを使うと、対象の要素が完全に透明になった段階(アニメーションが終了した段階)でdisplay: none;が設定されてしまいます。
そのせいで、各文の高さが0になってしまいそもそもスクロールができない状態になったりします。
これについては

elem.velocity('transition.slideUpOut', {display: 'block'});

といふうにdisplayオプションを設定することで回避しました。

コメントを残す

メールアドレスが公開されることはありません。



※画像をクリックして別の画像を表示

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください