jQueryでよくあるフェードインを作る

2020年06月28日

フロントエンド

今回は、jQueryとCSSアニメーションを組み合わせて、Webサイトでよく使われているようなスクロールしていくと要素がフェードインするのを作っていこうと思います。

スクロールしたら表示されるようにする

まずは、スクロールしたらシンプルにふわっと表示されるようにします。これは別にスクロールの位置を取得せずにそのままスクロールしたときに表示しているだけなので結構簡単にできますね

シンプルにwindow(画面上)がスクロールしたときにopacityに1を指定したanimeクラスをdivに付与しているだけですね。

対象の要素までスクロールしたときに表示されるようにする

次は対象の要素までスクロールしたら先ほどのように表示されるようにします。

これは先ほどとイベントは同じですが、if文で今のスクロール位置よりも対象の要素のスクロール位置の方が大きくなったときに元々divに付いているhideクラスを取り除いて表示させています。

対象の要素までスクロールしたときに横からしてくるようにする

最後にタイトルにあるように要素が横からフェードインしてくるようにします。

対象の要素をtrasformであらかじめ左側に持ってきておいてopacity: 0;で要素自体を非表示にしておきます。そこから対象の要素までいくと移動した分を戻して、要素を表示させるクラスを付与するようになっています。

まとめ

今回は、Webサイトによくある、横から要素がフェードインしてくるような物を作りました。もちろん、横だけでなく縦方向にも数値を少しいじればできるので自分のサイトなどにも取り入れて見たら面白いかと思います。割と、サイトで使われているようなアニメーションは、簡単に実装できるので色々と試してみようと思います。

Pocket

related

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

Hexoを使ってみた

今回は、静的サイトジェネレーターのひとつであるHexoを使って日記的なサイトを作ってみたので簡単な紹介とHexoの使い方などまとめていこうと思います。制作したサイトのURLはこちらです。URL(htt

フロントエンド

2020.09.11

GitHub PagesとNetlifyでポートフォリオを公開してみた

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです

フロントエンド

2020.09.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き