WEBマスター

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

フェードインとは

村長
村長
さっそく、「フェードイン」を作りましょう♪
新人
新人
「フェードイン」とは、何でしょう?
村長
村長
「フェードイン」は、コンテンツをゆっくりスライドさせて表示させるものです。
デモを用意しましたので、そちらで確認をお願いします!
新人
新人
分かりました!

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

村長
村長
「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に変えると、横方向に動きますよ♪

HTML内に全て記述した場合

村長
村長
HTMLに全て記述すると、下記のようになります。
<body>~</body>内に記述します。
新人
新人
長くなってしまいますね。
村長
村長
そうなんです!
なので、出来るだけ外部ファイルを作成して、読み込むようにしましょう!
読み込み方が分からないという方は、下記ページを参考にしてみてください♪

まとめ

新人
新人
『フェードイン』が出来ました!!
村長
村長
お疲れ様でした!
では『WEBマスター トップページ』に戻りましょう♪
新人
新人
はい!