マウスで下にスクロールした後, 要素が下から上にふわっとゆっくり表示【inview.js】

man

困ってる人

マウスで下にスクロールした時に、画像や文字なんかを下から上にふわっと表示させる方法って一体どうやればいいんだろう?


こんにちは、よろと申します。

という事で今回は、マウスで下にスクロールして、ある要素をゆっくりと表示させるアニメーション。

アニメーションの方法というのは、いろいろとあるのだけれど、

今回は、単純な下から上にふわっと現れるアニメーションの作り方。

使用するjQueryプラグイン「jquery.inview.js」というもので、

今回のように「スクロールイベント」を実装する際には、とても簡単で便利。

という事で今回は、画像を3つ横並びにしてみて、画像のそれぞれの親要素に

試しに「showup」というクラス名をつけて、ふわっと表示させてみました。

マウスで下にスクロールした後, 要素が下から上にふわっとゆっくり表示【inview.js】

まずは「https://github.com/protonet/jquery.inview」から「jquery.inview.js」をダウンロード、保存し、HTML側で読み込む。

次に、スクロールイベントのHTML部分、

スクロールイベント:HTML部分

スクロールイベント:CSS部分

スクロールイベント:jQuery部分

HTML側の画像の親要素に「inview」というクラス名をつけて、CSSで下から上に要素が現れるように命令。

画面をスクロールした際に、jQuery「show」というクラスを、HTML側の画像の親要素に付与、

画像の「opacity」を0から1にして画像を表示。

今回の内容は、簡単に説明するとこんな感じ。

スクロールイベント:それぞれ画像の表示タイミングをずらす

それぞれの画像の表示するタイミングをずらしたい場合は、それぞれの要素に別のクラス名をつけてCSS側で制御すればOK(例えば、inview1, inview2, inview3 など)

例えばこんな感じ。↓

それぞれの画像の表示タイミングをずらす:HTML部分

それぞれの画像の表示タイミングをずらす:CSS部分

こうする事によって、それぞれの画像が左から順番にタイミングをずらしながら表示される。

マウスオーバー系(hover)の処理:HTML部分

画像にカーソルを合わせた際のアニメーションをつけたい場合は、例えばこんな感じ、

今回は試しに「textbox」というクラス名をつけて、中に文字を書いてみました。

マウスオーバー系(hover)の処理:CSS部分

これでOK。

もしマウスオーバー時(ホバー)に、画像を少し拡大させたい場合は、画像の親要素に別のクラス名をつけて、こんな感じでもOK。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール