CSSでスライドインを設定する

2017年12月05日

CSSでスライドインを設定する

CSSでスライドインを設定する方法についてご紹介いたします。
この効果を設定するとパワーポイントのアニメーション機能にあるスライドイン効果のような表現を行う事が出来るようになります。

HTMLソースコード

<div id="slide">
　<figure>
　　<img src="main_visual.jpg" alt="" />
　　<figcaption>
　　　<a href="#">test</a>
　　</figcaption>
　</figure>
</div>

　　</figcaption>

　</figure>

</div>

ベースとなる要素はfigure要素とfigcaption要素です。
これらはHTML5から追加された要素で、figure 要素は図表であることを示す、figcaption 要素は図表のキャプション（注釈）を示します。

figure 要素内にimg要素とfigcaption 要素を入れ子にして、figcaption 要素内に注釈テキストを記述し、リンクを設定しておきます。

※img要素にもリンクを設定しておくとスライドイン効果を待たずにリンクをクリックできます。

CSSソースコード

figure {
　position: relative;
　overflow: hidden;
　width:100px;
　height:100px;
}
figure figcaption {
　position: absolute;
　top: -100px;
　width:100px;
　height:100px;
　transition: .8s;
　text-align:center;
}
figure:hover figcaption {
　top: 0;
}
figure figcaption a {
　display:block;
　width:100px;
　height:100px;
　background:#333;
　 opacity:0.5;
　line-height:100px;
　color:#fff;
　text-decoration:none;
}

figure {

　position: relative;

　overflow: hidden;

　width:100px;

　height:100px;

}

figure figcaption {

　position: absolute;

　top: -100px;

　width:100px;

　height:100px;

　transition: .8s;

　text-align:center;

}

figure:hover figcaption {

　top: 0;

}

figure figcaption a {

　display:block;

　width:100px;

　height:100px;

　background:#333;

　 opacity:0.5;

　line-height:100px;

　color:#fff;

　text-decoration:none;

}

解説

figure 要素には「position: relative;」、figcaption要素には「position: absolute;」を設定し,figcaption要素の基準位置をfigure要素に合わせます。

figure要素、figcaption要素、a要素にはimg要素で指定した画像と同じ幅高さを設定します。

figure要素の「overflow: hidden;」は、はみ出しているfigcaption要素を非表示にします。

figcaption要素には「top: -100px;」を設定します。これでfigcaption要素をfigure 要素の外に配置します。
「transition: .8s;」はマウスをポイントした時のスライドインするまでの時間を、「text-align:center;」はa要素のテキストを中央に揃えます。

figure要素にマウスがポイントされた時に、figcaption要素の表示位置を「top: 0;」で指定します。
これでマウスポイント時にfigcaption要素はfigure要素の左上に揃って表示されます。

figure要素に「transition: .8s;」が設定されているのでマウスをポイントしてから0.8秒かけてfigcaption要素がスライドイン表示されます。

a要素に見た目の設定を指定します。「display:block;」でブロックレベル要素として表示、「background:#333;」で背景色を、「opacity:0.5;」で背景色の不透明度を50％に、「line-height:100px;」でテキストを縦方向中央に「color:#fff;」で文字色を、「text-decoration:none;」でリンク下線を非表示にする設定を行います。

以上の設定で上から下方向にスライドインする効果を設定することが出来ます。

figcaption要素に、top、right、bottom、leftプロパティで位置を指定することでスライドインする方向を変えることが出来ます。

比較的少ない記述で効果的なアニメーションが設定できるので、Webデザインの際の汎用効果として使ってみては如何でしょうか？