jQueryとCSSでスクロール時に画像を下からふわっと表示させる方法 + ネイティブ javascriptでの書き方も掲載！
スクロールしていくと画像やコンテンツがふわっと表示されるWEBサイトってカッコイイですよね。動きがあると読者の目を引くだけでなく、WEBサイトがリッチになるのでぜひ取り入れたいエフェクトです。 僕もこのサイトに実装してみたので、その方法を書いていきたいと思います。単純にjQueryとCSSで作成する方法だけでなく、ネイティブjavascriptで書く方法も合わせてご紹介します。 デモはコチラ↓ ふわっと表示（フェードイン）させる仕組み 仕組は至って簡単です。 まず、ふわっとさせたい画像やコンテンツなどの要素にCSSのopacityを使って透明にします。さらに下から出てくるようにtransformで少し下の方に設置。 そしてある一定のところまでスクロールされた時に、jQueryやjavascriptを使ってCSSの値を書き換えて、要素をふわっと表示させるだけの簡単な仕組みです。 実装方法 そ
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
【JavaScript】ページのスクロールに合わせて要素を動かす［ScrollReveal］の使い方
ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト［ScrollReveal］を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目瞭然ですね。 ScrollReveal : http://scrollrevealjs.org 要素がviewportに現れたタイミングで様々な表示処理を施すことができます。 なお各エフェクトや表示のタイミングはオプション設定で詳細に指定可能です。 ［ScrollReveal］の導入方法はカンタンです。 まずはGitHubから必要なファイルをダウンロードしてきます。 https://github.com/jlmakes/scrollreveal.js 「Download ZIP」というボタンをクリックすればスグにダウンロードがはじまります。 入手したzi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
