狼読

 
2020/05/20

[css]文字にフェードイン、フェードアウトする方法

今回は、フェードイン、フェードアウトをcssを使って実装してみようと思います。
簡単なサンプルとして、マウスで特定の要素をhoverしたら文字が徐々に消えていくというようなものと文字が出てくるものを実装してみようと思います。

フェードをかけるとよりホームページがおしゃれに仕上がりますね。

フェードイン、フェードアウトするためのhtmlの準備

まず、フェードインとフェードアウトするためのhtmlの準備をしましょう。

そうですね。ボタン風の中の文字がフェードインするものとフェードアウトするものを作りたいので2つのdivタグを作りましょうか。

<div class="fadein_btn"><span>fade in</span></div>
<div class="fadeout_btn"><span>fade out</span></div>

上記のようなhtmlにしてみましょう。

cssを使ってフェードイン、フェードアウトを実現しよう

まずは、上記のhtmlをボタン風にしてみましょう。

fade in
fade out

上記のようにボタンのようにしたらいよいよフェードインとフェードアウトを実装してみましょう。考え方は、opacityを使ってそのhoverした時に時間変化するまでの時間を設定することで、フェードインとフェードアウトを実装します。

<style>
 .fadein_btn{
   width:200px;
   padding-top:1em;
   padding-bottom:1em;
   border:1px solid #ccc;
   text-align:center;
 }
 .fadein_btn span{
    opacity:0;
    transition:1s all;
 }
 .fadein_btn:hover span{
    opacity:1;
    transition:1s all;
 }
  
.fadeout_btn{
   width:200px;
   padding-top:1em;
   padding-bottom:1em;
   margin-bottom:30px;
   border:1px solid #ccc;
   text-align:center;
 }
 .fadeout_btn span{
    transition:1s all;
  }
 .fadeout_btn:hover span{
   opacity:0;
   transition:1s all;
 }
</style>
<div class="fadein_btn"><span>fade in</span></div>
<p>※hoverさせると文字がフェードインしてきます。</p>
<div class="fadeout_btn"><span>fade out</span></div>
<p>※hoverさせると文字がフェードアウトしてきます。</p>

フェードイン、フェードアウトのサンプル実装例

fade in

※hoverさせると文字がフェードインしてきます。

fade out

※hoverさせると文字がフェードアウトしてきます。

上記のように、hoverした時としてない時にtransitionを設定することで変化時間を設定して、opacityの時間を設定することでフェードインとフェードアウトを実装します。

まとめ

今回は、フェードイン、フェードアウトする方法をご紹介させていただきました。ホームページの中でフェードインしたり、フェードアウトするものがあればよりあなたのホームページをスタイリッシュなものにできますね。考え方は変化前と変化後のcssを用意してそれに対して時間変化を設定するといったものです。フェード関係にかかわらず動くものを作る際はこのような考え方が非常に重要になってきます。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読