jQueryで『フェードイン』を作ろう！

フェードインとは
フェードインのサンプルコード
フェードインのコード解説
HTML内に全て記述した場合
まとめ

フェードインとは

村長

さっそく、「フェードイン」を作りましょう♪

新人

「フェードイン」とは、何でしょう？

村長

「フェードイン」は、コンテンツをゆっくりスライドさせて表示させるものです。
デモを用意しましたので、そちらで確認をお願いします！

新人

分かりました！

「フェードイン」デモ

フェードインのサンプルコード

村長

「HTML」「CSS」「JS」ファイルにそれぞれ記述して、後ほど詳しく解説します。

新人

よろしくお願いします！

HTML

CSS

jQuery

フェードインのコード解説

村長

上記のコードは、処理を遅らせる為のコードです。
「5」に設定しているので、要素の位置が半分以上が見えたら、フェードインアップさせる処理をしています。

村長

上記のコードは「fadeInUp」というクラス名に、cssを付属するためのコードです。
「opacity」は「不透明度」のことで、値が「1」なので、要素が見える状態となります。
「transform」は「要素に移動や変形」を与えます。
値が「translateY(0)」なので、Y方向の距離が0という意味です。

村長

先ほどと反対で「要素が透明になり、Y方向の距離が100px」になります。「else」がついているので、「ターゲットまでスクロールしていない場合」の処理になります。

新人

なるほど！
「もし、ターゲットまでスクロールして要素が半分以上見える位置に来たら、Y（縦）の位置が距離100pxから0pxに移動して、透明だったものが不透明になり出現する。そうでない時は、距離100pxに移動しながら消える」ということですね⁈

村長

そうです！
ちなみに、YをXに変えると、横方向に動きますよ♪