• 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. 画像をhoverして時にズームさせるcssを書こう

  2. hoverした時に文字の間隔をつかってアニメーションしてみよう

  3. 見出しの前に三角形をつけてみよう

  4. CSSを使って画面サイズに対応しよう

  5. CSSで画像を背景に貼ってみよう

  6. cssで矢印を作ろう

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Translate »