• css

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

はじめに

今回はよくウェブサイトとかで見るフワーッと画面が変わったりすることをやって見たいのですが、どうしたらいいですか。
画面ロード時や、画面遷移時にふわっとなるのはフェードというエフェクトがかかっていますね。
フェードですか・・ウェブサイトの仕組みなので、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を0にすることで、hoverした際に文字を消すと言う動作を指定します。
ただこれだけでもふわっとしたエフェクトをかけることはできないので、hoverした際に、transitionを指定することで、ディレイをかけます。今回はopacity:0になるまでに1秒かけてくださいと指定あるので、1秒かけて文字が消えていきます。また、hover時にだけディレイを指定した場合、aのhoverを解除した際に文字がパッと表示されてしまいますので、元の要素にも(ここでは、fadeOut)にも指定することでhoverを外した際にも時間かけて戻っていくという動作が実現することができます。
上述のfadeOutDownやfadeOutUpも同じような考えとなります。

サンプルコードの実行例

フェードアウトします
フェードダウンします
フェードアップします
サンプルの実行例をこのようになります。実際に文字の上にマウスをおいてみれば動作を確認することができます。

関連記事

  1. CSS講座 – 文字の色を変えてみよう –

  2. cssで矢印を作ろう

  3. cssでマウスをおいた時に動かそう

  4. 画像をhoverして時にズームさせるcssを書こう

  5. 特定の番号の要素のcssだけ変更してみよう

  6. リストの前の丸をcssで消してみよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930