【ブログカスタマイズ】CSSとJQueryで要素をふわっとフェードイン～吹き出し・囲み枠・リストなどに使えるよ～

こんにちは、Kome（@chankomeppy）です。

先日ブログ徘徊していると、ふわっと動く吹き出しに遭遇。私も使いた～い！と思い実装しました。

▼こんなやつです。

吹き出しが画面に入ったら、左から右へふわっとフェードイン！

ふわふわしてて可愛い～！

吹き出しだけでなく、要素であればなんでも使えます

▼囲み枠の場合

左から右へふわっと！

下から上へもふわっと！

複数の要素を

まとめて

ふわっと

▼リストの場合

リストも
下から
上に
ふわふわ

左から
右にも
ふわふわ

この記事はこんな人にオススメ

はてなブロガー
コピペだけでブログカスタマイズしたい人
HTML・CSSの知識が少々ある人向け

コピペで簡単に作れるので、真似してね～。

今すぐにコードだけコピペしたい人はコチラ
CSS
- CSSの説明
JQuery
- JQuery導入
HTML
- 例①：ブロック全体を左から右にフワっと動かす
  - 左から右にフワっとする例（全体）
- 例②：個別に左から右にフワっと動かす
  - 左から右にフワっとする例（個別）
例③：ブロック全体を下から上にフワっと動かす
- 下から上にフワっとする例（全体）
例④：個別にしたから上にフワっと動かす
- 下から上にフワっとする例（個別）
さいごに
- 注意事項

今すぐにコードだけコピペしたい人はコチラ

細かい説明は抜きにして、とりあえずコピペしたいという方は、以下のコードをご利用ください。

See the Pen CSS3 Fade-in Animation by chankome (@chankome) on CodePen.

CSS

/*フェードインアニメ*/
/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-20px);
  transition: all 1s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}

/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(20px);
  transition: all 1s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}

左から右にフェードインするもの

と、

下から上にフェードインするもの

2パターン作ってみました。

フェードイン前のクラス名を「left-to-right」「down-to-top」、フェードイン後のクラス名を「left-to-right scrollin」「down-to-top scrollin」としました。「scrollin」というクラス名は、後から説明するJQueryで付与します。

CSSの説明

透明度（Opacity）

「opacity」とは透明度のこと。

フェードイン前が0.1（限りなく透明に近い）→ フェードイン後は1（不透明）としました。

お好みで変更してください。

要素の変形（Transform）

「transform」とは要素を変形するプロパティで、CSS3で新たに追加されたもの。

左から右にフェードインするCSS（ltor）では、フェードイン前がtranslateX(-20px)（X軸（横）に-20pxずらした位置＝左に20pxずらした位置）→フェードイン後はtranslateX(0)（X軸（横）はゼロの位置）としました。

下から上にフェードインするCSS（fadein）では、フェードイン前がtranslateY(-20px)（Y軸（縦）に20pxずらした状態＝下に20pxずらした状態）→フェードイン後はtranslateY(0)（Y軸（縦）はゼロの位置）としました。

私は距離を指定するのにピクセル（px）を使いましたが、パーセント（%）も使用できます。

また、距離の指定の仕方ですが、以下のように書いてもOKです◎

translateX(20px) ＝ translate(20px, 0)
translateY(20px) ＝ translate(0, 20px)

こうすることでX軸とY軸を同時に指定できるので、斜めの動きも表現できます。

例えばtranslate(-50px, 50px) → translate(0,0) とすれば、左下から斜め上にフェードイン！という動きが表現できます。こういう動きもかっこいい！

変化時間（Transition）

「transition」とは変化するまでの時間を指定するプロパティで、transform同様にCSS3で追加されたもの。

指定できる単位は、〇s（秒）と〇ms（ミリ秒＝1秒の1/1000）。

元の状態から1秒かけてフェードインするようにしています。

キレのある動きにしたければ500ms (0.5s)、もったりした動きにしたければ2s といったように、お好みで時間を調整してください。

JQuery

$(function(){
    $(window).scroll(function (){
        $('.left-to-right, .down-to-top').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 150){
                $(this).addClass('scrollin');
            }
        });
    });
});

スクロールして画面の中に「ltor」または「fadein」というクラスが付与された要素が入ってきて、150pxスクロールすると、「scrollin」というクラスををJavaScriptで追加しますよ、という命令文です。

わたしは150pxにしましたが、ここはお好みで変更してください。

はてなブログの場合は

<section>～</section>

で囲んでフッターに貼り付けてね！

JQuery導入

要JQueryですので、はてなブログの場合は事前に設定しておく必要があります。

「設定」→「詳細設定」→「head内に要素を追加」に以下のコードを貼り付ければOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

GoogleのCDN（Content Delivery Network）からjQueryを読み込むので、たった1行のコピペでJQueryが使えるようになります！

HTML

動かしたい要素に、以下の例のようにクラス「left-to-right」「down-to-top」を付与するだけです◎

例①：ブロック全体を左から右にフワっと動かす

<section class="left-to-right">
  <h5>左から右にフワっとする例（全体）</h5>
  <p>123456789</p>
  <div>
    <ol>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
    </ol>
  </div>
</section>

<section>～</section>

にクラスを付与したので、セクション内の要素まるごとフワっとします。

▼こんな風になります。

左から右にフワっとする例（全体）

123456789

例②：個別に左から右にフワっと動かす

<h5 class="ltor">左から右にフワっとする例（個別）</h5>
  <ol>
    <li class="left-to-right">aaa</li>
    <li class="left-to-right">bbb</li>
    <li class="left-to-right">ccc</li>
    <li class="left-to-right">ddd</li>
</ol>

見出し、リスト、それぞれ個別にクラスを付与しました。スクロールすると上から順番にフワっとします。

▼こんな風になります。

左から右にフワっとする例（個別）

例③：ブロック全体を下から上にフワっと動かす

<section class="down-to-top">
  <h5>下から上にフワっとする例（全体）</h5>
    <p>あいうえお</p>
    <p>かききけこ</p>
    <p>さしすせそ</p>
</section>

＜section＞～＜/section＞にクラスを付与したので、セクション内の要素まるごとフワっとします。

▼こんな風になります。

下から上にフワっとする例（全体）

あいうえお

かききけこ

さしすせそ

例④：個別にしたから上にフワっと動かす

<h5 class="down-to-top">下から上にフワっとする例（個別）</h5>
<p class="down-to-top">あいうえお</p>
<p class="down-to-top">かきくけこ</p>
<p class="down-to-top">さしすせそ</p>

見出し、段落、それぞれ個別にクラスを付与しました。スクロールすると上から順番にフワっとします。

▼こんな風になります。

下から上にフワっとする例（個別）

あいうえお

かきくけこ

さしすせそ

さいごに

ブログ内記事に動きがあると、いいアクセントになりますよね！アピールしたいポイントに使うといいんじゃないかと思います。

使いすぎるとページが重たくなるかもしれない＆うざいので、使い過ぎにはご注意ください。

可愛いブログを作ろう💓

ブログブログカスタマイズ

こちらの記事を参考にしました。大変勉強になりました。ありがとうございます！

海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法

HTML・CSSについて学べる書籍

リンク
Point
Chapter1でHTMLとCSSの基本について分かりやすく解説されています。「HTMLって何？」「CSSって何？」というビギナーの方にオススメ。Kindle Unlimited対象。
リンク
Point
辞書的な感じで使える入門書。はてなブログのカスタマイズでもよく使うCSSが分かりやすくまとまっているので、ブログをこれからどんどんカスタマイズしていきたい！という方にオススメ。

注意事項

この記事で紹介したCSS・HTMLはコピペしてご自由にお使いいただけますが、コードをコピペしてご自身のブログに掲載いただく際は、citeタグで引用元ページのURLをご指定ください。詳しくはプライバシーポリシーにてご確認ください。

プライバシーポリシー

【ちゃんこめBlog】インド在住OLの雑記ブログ

インド在住OLの雑記ブログ

【ブログカスタマイズ】CSSとJQueryで要素をふわっとフェードイン～吹き出し・囲み枠・リストなどに使えるよ～

今すぐにコードだけコピペしたい人はコチラ

CSS

CSSの説明

透明度（Opacity）

要素の変形（Transform）

変化時間（Transition）

JQuery

JQuery導入

HTML

例①：ブロック全体を左から右にフワっと動かす

左から右にフワっとする例（全体）

例②：個別に左から右にフワっと動かす

左から右にフワっとする例（個別）

例③：ブロック全体を下から上にフワっと動かす

下から上にフワっとする例（全体）

例④：個別にしたから上にフワっと動かす

下から上にフワっとする例（個別）

さいごに

注意事項