\ 初月無料!! /
Kindle Unlimited で読書し放題

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

\お知らせ/

新ブログ「インドゆるゆる生活」を開設しました!
これからは新ブログのみに投稿していきますので、ブックマーク、フォローのほどぜひ宜しくお願いいたします!!

インドゆるゆる生活

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

こんにちは、Kome(@chankomeppy)です。

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

▼こんなやつです。

Komeのアイコン
Kome

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

Komeのアイコン
Kome

ふわふわしてて可愛い~!

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

▼囲み枠の場合

左から右へふわっと!


下から上へもふわっと!


複数の要素を

まとめて

ふわっと


▼リストの場合

  • リストも
  • 下から
  • 上に
  • ふわふわ
  • 左から
  • 右にも
  • ふわふわ
この記事はこんな人にオススメ
  1. はてなブロガー
  2. コピペだけでブログカスタマイズしたい人
  3. HTML・CSSの知識が少々ある人向け

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

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

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

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

  1. aaa
  2. bbb
  3. ccc
  4. ddd

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

<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>

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

▼こんな風になります。

左から右にフワっとする例(個別)

  1. aaa
  2. bbb
  3. ccc
  4. ddd

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

<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>

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

▼こんな風になります。

下から上にフワっとする例(個別)

あいうえお

かきくけこ

さしすせそ

さいごに

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

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

Komeのアイコン
Kome

可愛いブログを作ろう💓



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

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

注意事項

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

プライバシーポリシー