jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
jQuery基礎講座：スクロールして要素が出現したらアニメーションを実行する方法（ZIP付） - P N R A
jQuery基礎講座[第７回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 表題の通り、スクロールするとアニメーションを実行する、というものを作っていきたいと思います。これは、ウィンドウのスクロール量とアニメーションを実行する要素の位置関係を取得し、ウィンドウに出現するタイミングでクラスをつけてアニメーションを実行する、といった内容になっています。 前回の基礎講座（jQuery基礎講座[第６回]：スクロール量に応じて要素（ヘッダーなど）を固定する（ZIP付））と近しい内容になっているので、是非こちらも合わせて読んでみてください。 それでは、具体的にみていきましょう。 実装実例 どんな動きになるのかは下記画像内のウィンドウをスクロールしてご覧ください。（こちらは『placeit』で作成させていただきました。） ページが読み込まれると、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
