当サイト採用!!Cocoonテーマの詳細はコチラ

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

HTML/CSS

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

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

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

クマさん
クマさん

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

キラ
キラ

CSSなどのコードたくさん使うけど

コピペで実装できるようにするよ

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

この記事でわかること
  1. アニメーションの種類
  2. 実装するためのコード3種類
  3. 実像するための手順

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

 

スポンサーリンク

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

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

キラ
キラ

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

フェードイン

上から下へフェードイン

下から上へフェードイン

右から左へフェードイン

左から右へフェードイン

 

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

クマさん
クマさん

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

キラ
キラ

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

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

クマさん
クマさん

おおお、動いたーーー!

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

 

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

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

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

JavaScriptを使用する理由

クマさん
クマさん

そもそもJavaScriptって何なの?

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

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

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

今回の使用目的

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

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

javaScriptに必要コードを記載

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

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

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

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

JS
$(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>

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

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

クマさん
クマさん

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

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

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

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

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

p class部分の注意点

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

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

div class部分の注意点

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

1.画像を入れる場合

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

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

<img src="画像のURL">

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

2.囲み枠などのCSS要素を入れる場合

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

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

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

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

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

HTMLでの表記の仕方

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

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

 

まとめ

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

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

クマさん
クマさん

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

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

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

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

注意

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

HTML/CSSsiteカスタマイズお役立ち情報
スポンサーリンク
キラをフォローする
キラ

2匹のペットと暮らしております。ペットを飼育する上での必要なものや情報などを発信していきます。またサイトカスタマイズにも挑戦しており、作成方法なども公開しております。
「まずは自分から動いてみる!」そして「自分で調べて身につける!」私のモットーです。

キラをフォローする
キラペット.com
タイトルとURLをコピーしました