【CSSアニメーション】コピペで簡単！ふわっと表示するフェードインの導入方法

せっかく始めたブログで、他の方と差をつけてみませんか？

アニメーションを使ってみたい
ユーザーの目を惹いてみたい
楽しく読める記事にしてみたい

そんな悩みには、文字や囲み枠などが上下左右どこからでも出てくるフェードインがおすすめです！

クマさん

これは絶対に難しいやつだ・・・

キラ

CSSなどのコードたくさん使うけど、コピペで実装できるようにするよ

コピペのみで簡単に、変更する必要がある部分はわかりやすく解説していきます。

この記事でわかること

アニメーションの種類
実装するためのコード３種類
実像するための手順

ここを解説

では、早速見ていきましょう。

アニメーションはこんなもの！
アニメーションを作るための準備
1. JavaScriptを使用する理由
2. javaScriptに必要コードを記載
必要なCSSとHTMLを記述する
1. アニメーションに必要なCSSを記述
  1. animationプロパティ
2. アニメーションに必要なHTMLを記述
  1. p class部分の注意点
  2. div class部分の注意点
    1. １．画像を入れる場合
    2. ２．囲み枠などのCSS要素を入れる場合
まとめ

アニメーションはこんなもの！

まず作り方を説明する前に、アニメーションとはどんなものなのか実際に見てみましょう。

キラ

表示された時点でアニメーションがスタートするように設定しているので、ゆっくりとスクロールしてね

フェードイン

上から下へフェードイン

下から上へフェードイン

右から左へフェードイン

左から右へフェードイン

このようなアニメーションがCSSにて作ることが可能です。

クマさん

これクマの吹き出しも動かせるの？

キラ

ちょっと違和感あるけど動かせるよ

では以下がフェードインをつけた吹き出しになります。

クマさん

おおお、動いたーーー！

少し画像が遅れて表示されてしまいますが、あくまでも参考例ですのでご了承ください。

アニメーションを作るための準備

アニメーションを表示するだけならCSSのみでも実装可能です。

しかし、表示された時点でアニメーションがスタートする方がインパクトがあるので、こちらの方法を紹介します。

JavaScriptを使用する理由

クマさん

そもそもJavaScriptって何なの？

って思う方がほとんどでしょうが、Web制作におけるプログラミング用語です。

JavaScriptとは？初心者向けに特徴・できること・将来性を簡単解説 | 侍エンジニアブログ

JavaScriptとは何か、初心者向けに特徴やできることを解説。さらに、JavaScriptの将来性や書き方・使い方についても簡単に紹介します。

しかし、ここではあくまでもアニメーションの手順を解説していくので、知識なくても大丈夫です。

手順通りにコピペで進んでいくだけで、簡単に実装することができます。

今回の使用目的

CSSのみでは実装できない、表示するためのタイミングを指定するため

ここでは使用目的が知っているだけで問題ありません。

javaScriptに必要コードを記載

まず記載する場所ですが、テーマエディタを開くと「javascript.js」という項目があると思います。

※Cocoon使用のため、他テーマの場合相違あるかもしれません

このページを開くと、たくさんのコードが記載されていると思いますが、一番下の行までスクロールしてください。

以下のコードを貼り付けて保存しましょう。

$(function () {
    $(window).scroll(function () {
        const wHeight = $(window).height();
        const scrollAmount = $(window).scrollTop();
        $('.scrollanime').each(function () {
            const targetPosition = $(this).offset().top;
            if(scrollAmount > targetPosition - wHeight + 60) {
                $(this).addClass("fadeInDown");
            }
        });
    });
});

このコードの中に、スクロールした際に表示される項目が記載されています。

必要なCSSとHTMLを記述する

次にアニメーションを表示するためのCSSとHTMLを紹介します。

アニメーションに必要なCSSを記述

「外観」→「カスタマイズ」→「追加CSS」をクリックして以下のコードを貼り付けます。

CSS

/*フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

上記CSSについて少し解説します。

animationプロパティ

「animation」プロパティは、その名の通りアニメーションを表示するためのプロパティです。

アニメーションを使用する上で、表示スピードなどを指定する必要があります。

プロパティ名	意味
animation-name	使うアニメーションの名前
animation-duration	アニメーションの進行度合いを調整
animation-delay	アニメーションの開始のタイミングを指定
animation-timing-function	アニメーション進行スピードの調整
animation-iteration-count	何回アニメーションを繰り返すか
animation-direction	アニメーションの再生方向を指定
animation-fill-mode	アニメーションが開始と終了後の状態を指定
animation-play-state	アニメーションの再生や停止

このような指定ができるのですが、今回は「animation-duration」の説明をします。

キラ

単位は「数値s」で表記しますが、「s＝秒」と考えて問題ありません

小数第一位まで指定できるので、お好きなスピードを指定してください。

小数第一位なしで指定する場合は「1s」と記載します。

アニメーションに必要なHTMLを記述

HTMLタグを使用して、実際に表示するためのタグを記述していきます。

HTML

<section class="sect02">
<p class="scrollanime">フェードイン</p>
<div class="scrollanime"><div class="box1">ここに文字</div>
</div>

<p class="scrollanime updown">上から下へフェードイン</p>
<div class="scrollanime updown"><div class="box1">ここに文字</div>
</div>

<p class="scrollanime downup">下から上へフェードイン</p>
<div class="scrollanime downup"><div class="box1">ここに文字</div>
</div>

<p class="scrollanime slide-right">右から左へフェードイン</p>
<div class="scrollanime slide-right"><div class="box1">ここに文字</div>
</div>

<p class="scrollanime slide-left">左から右へフェードイン</p>
<div class="scrollanime slide-left"><div class="box1">ここに文字</div>
</div>
</section>

こちらは５種類のフェードインタグです。

ご自身で使用したいフェードインをコピペしてお使いください。

クマさん

全てコピペして下書き記事などに保存してもOK！

クラシックエディタ（プラグイン）を使用している場合は、テキストエディタへ貼り付けて編集します。

ブロックエディタを使用している場合は、「カスタムHTML」を追加して編集してください。

「ここに文字」部分に文章をいれると囲み枠内に文字が表示されます。

では、コピペする場合の注意点について説明します。

p class部分の注意点

それぞれ「フェードイン、○から○へフェードイン」と記載されている部分にお好きな文字を入れることができます。

実際に使用する際は変更してください。

div class部分の注意点

こちらは文字ではなく、画像やCSSで作成した要素を指定するものになります。

１．画像を入れる場合

画像の場合は使用タグを変更する必要があります。

<div class=”box1″>の部分を以下のように修正してください。

<img src="画像のURL">

その際は終了タグ</div>は１つで問題ありません。

２．囲み枠などのCSS要素を入れる場合

囲み枠などを使用する場合は、まずCSSにて作成する必要があります。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

サルワカさんの囲み枠はおしゃれなものが多いので参考にするのもよいです。

使用したい囲い枠があればコピーして「追加CSS」へ貼り付けてください。

CSS

.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

上記はサルワカさんの３つ目のボックスのCSSになります。

HTMLでの表記の仕方

例えばこれを使用したい場合、<div class=”box1″>の「box1」は「box3」に変更する

CSSは「.○○ {」という書き出しでスタートするので、○○の部分を記載するということになります。

まとめ

フェードインは訪問したユーザに「おっ！」と思わせることができ、使い方次第では楽しくなるものでもあります。

テーマによっては標準で搭載されているものもあると思いますが、紹介したコードでCocoonでも実装可能です。

クマさん

コード類は難しそうだけど

コピペだけなら何となくできるかも

ここで紹介したコードのみで、最初に紹介した５つのフェードインを取り入れることができます。

ぜひチャレンジしてみてくださいね。

注意

使用し過ぎは見にくくなるので、使いすぎには注意しましょう