日曜研究室 LLVMによるプログラミング言語の実装 xv6ソースコードリーディング 技術 日記
日曜研究室

日曜研究室

まだ庭の小石の数を数え終わっていない

技術

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

投稿日
2015/5/16 土曜日
カテゴリー
技術
タグ
,
著者
Take it easy!

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

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

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

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

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

コメントを残す

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



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

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