jQueryとCSSでスクロール時に画像を下からふわっと表示させる方法 + ネイティブ javascriptでの書き方も掲載！
スクロールしていくと画像やコンテンツがふわっと表示されるWEBサイトってカッコイイですよね。動きがあると読者の目を引くだけでなく、WEBサイトがリッチになるのでぜひ取り入れたいエフェクトです。 僕もこのサイトに実装してみたので、その方法を書いていきたいと思います。単純にjQueryとCSSで作成する方法だけでなく、ネイティブjavascriptで書く方法も合わせてご紹介します。 デモはコチラ↓ ふわっと表示（フェードイン）させる仕組み 仕組は至って簡単です。 まず、ふわっとさせたい画像やコンテンツなどの要素にCSSのopacityを使って透明にします。さらに下から出てくるようにtransformで少し下の方に設置。 そしてある一定のところまでスクロールされた時に、jQueryやjavascriptを使ってCSSの値を書き換えて、要素をふわっと表示させるだけの簡単な仕組みです。 実装方法 そ
超簡単！スクロールしても背景画像を固定させるCSSテクニック | MEGUMI
超簡単！スクロールしても背景画像を固定させるCSSテクニック Knowledge | 2018-09-08 こんにちは、メグミです。 いや〜サボり癖が染み付いてしまったのか、久しぶりのブログ更新になってしまいました（笑） さて、今回はとあるCSSのテクニックをご紹介したいと思います。 たまーに、画面いっぱいに表示された画像が背景にあって、スクロールしても固定されているデザインのサイトを見かけることはありませんか？ カーテンをあげるような、そんなエフェクトがおしゃれでカッコいいですよね。 実はこれ、数行のCSSを記述するだけで実装できちゃうんです。 さっそく、デモサイトと一緒に見ていきましょう！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
