cssでフェードをかけてみよう

ホーム
BLOG
css
cssでフェードをかけてみよう

css
2019.03.15

はじめに

今回はよくウェブサイトとかで見るフワーッと画面が変わったりすることをやって見たいのですが、どうしたらいいですか。

画面ロード時や、画面遷移時にふわっとなるのはフェードというエフェクトがかかっていますね。

フェードですか・・ウェブサイトの仕組みなので、cssやjavascriptで動いているんですかね？

そうですね。考え方的にはcssで実装可能ですので、ご紹介していきましょう。

cssでフェードを実装

今回の記事では、aタグのhoverに対して、フェードをかけていきます。
つまり、リンクに対して、マウスをおいた時にフェードがかかるような物を作っていきます。

サンプルコード

HTML


<!DOCTYPE html>
<head>
  <title>cssでフェードをかけてみよう</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <a class="fadeOut" href="">フェードアウトします</a>
  <a class="fadeOutDown">フェードダウンします</a>
  <a class="fadeOutUp">フェードアップします</a>
</body>
</html>

CSS


.fadeOut{
    transition:1s all;
    opacity:1;
}
.fadeOut:hover{
    opacity:0;
    transition:1s all;
}
.fadeOutDown{
    transition:1s all;
    opacity:1;
    display:block;
}
.fadeOutDown:hover{
    display:block;
    opacity:0;
    transform: translateY(20px);
    transition:1s all;
}
.fadeOutUp{
    transition:1s all;
    opacity:1;
    display:block;
}
.fadeOutUp:hover{
    display:block;
    opacity:0;
    transform: translateY(-20px);
    transition:1s all;
}

上記の考え方としては、aタグをhoverした際に、迷彩度であるopacityを０にすることで、hoverした際に文字を消すと言う動作を指定します。
ただこれだけでもふわっとしたエフェクトをかけることはできないので、hoverした際に、transitionを指定することで、ディレイをかけます。今回はopacity:0になるまでに１秒かけてくださいと指定あるので、１秒かけて文字が消えていきます。また、hover時にだけディレイを指定した場合、aのhoverを解除した際に文字がパッと表示されてしまいますので、元の要素にも(ここでは、fadeOut）にも指定することでhoverを外した際にも時間かけて戻っていくという動作が実現することができます。
上述のfadeOutDownやfadeOutUpも同じような考えとなります。