[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect

サイト構築 -CSS

Post on:2011年10月11日

デモ

デモページ

写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。

アニメーションで拡大してサムネイル画像に

ナビゲーションをクリックすると、次の画像が表示されます。

2枚目の画像

[ad#ad-2]

実装

画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。

HTML

ナビゲーション箇所はテキストと画像をa要素で内包します。

<div class="cn-nav">
	<a href="#" class="cn-nav-prev">
		<span>Previous</span>
		<div style="background-image:url(../images/thumbs/1.jpg);"></div>
	</a>
	<a href="#" class="cn-nav-next">
		<span>Next</span>
		<div style="background-image:url(../images/thumbs/3.jpg);"></div>
	</a>
</div>

CSS

まずは、ナビゲーションのポジションとサイズの設定です。
絶対位置で指定し、サイズはホバーがしやすいよう大きく指定します。

.cn-nav > a{
    position: absolute;
    top: 0px;
    height: 70px;
    width: 70px;
}
a.cn-nav-prev{
    left: 0px;
}
a.cn-nav-next{
    right: 0px;
}

次にspan要素です。
アローのサイズに合わせてwidth, heightを46pxにし、それをサークル状にするためborder-radiusを23pxにします。位置をリンクエレメントの中央にするため、ネガティブマージンを使用します。

.cn-nav a span{
    width: 46px;
    height: 46px;
    display: block;
    text-indent: -9000px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    cursor: pointer;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: 17px 25px;
    margin: -23px 0 0 -23px;
    -webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

spanの背景画像（右と左向きのアロー）を指定します。

.cn-nav a.cn-nav-prev span{
    background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
    background: #666 url(../images/next.png) no-repeat center center;
}

div要素は始めはheight, widthともに0にしておき、リンクエレメントの中央に配置します。border-radius, marginも0です。

.cn-nav a div{
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

ホバー時の定義をします。
width, heightを100pxにし、border-radius, marginを設定し、不透明度を0.6にして背景画像を表示します。

.cn-nav a:hover span{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    opacity: 0.6;
    margin: -50px 0 0 -50px;
    background-size: 22px 32px;
    background-color:#a8872d;
}

最後に小さいサムネイルのdiv要素を90pxに拡大させます。
拡大させた分、marginの量が変わるので注意してください。

.cn-nav a:hover div{
    width: 90px;
    height: 90px;
    background-size: 120% 120%;
    margin: -45px 0 0 -45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}