WEBページを作る時に、色々な効果を持たせる為に、色々なテクニックが必要になります。
今回は、サイドメニューなどで使える、単体シールに対して、マウスオーバーで紙がめくれるようなカールするイメージのアニメーションを構築してみたいと思います。
概要
それぞれを枠で囲まれたサイドメニューをPCブラウザで使う場合、マウスオーバーでアクションをさせる時に、背景色を変更するのはよく見かけるし簡単に設置できると思います。
ここに、アニメーションを加えると、非常に効果的な場合があります。
参考画像は、下記のような感じです。
一番上のメニュー項目にマウスを乗せた時のイメージ。
これだけだと効果が伝わらないので、実際のデモ画面で体感してみてください。
デモ
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>page-curl</title>
<link rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="menu">
<div class="page-curl">Top-page</div>
<div class="page-curl">Contents-1</div>
<div class="page-curl">Contents-2</div>
<div class="page-curl">Contents-3</div>
</div>
</body>
</html>
.menu{
width:240px;
text-align:center;
}
.page-curl{
/* position:relative; */
display:block;
width:200px;
height:50px;
border:1px solid #CCC;
margin:20px;
padding:0;
background-color:white;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
cursor:pointer;
transition-property: border-radius;
transition-duration:0.2s;
transition-timing-function:ease-in-out;
}
.page-curl:hover{
border-radius:0 50% 50% 0/0 0% 20% 0;
transform-origin: left bottom;
}
解説
デモを操作してみると、実際にページカールしているように見えると思いますが、少し楕円形の角丸（border-radius）をtiming-functionでアニメーションさせているだけなんですね。
デモ画面は、デザイン装飾が全くされていないので分かりにくいですが、この効果を使う場合、各メニュー項目のカールする部分には、単色カラーの装飾をオススメします。
試しに付箋のような感じになるようにborderを追加してみたところ、下記のように崩れてしまいました。
単色で利用すると、こうした崩れはおきないので、シンプルに使えると思います。
しかし、残念ながら、マウスオーバー効果なので、スマートフォンでは対応できないのですが、クリックイベントなどでうまく利用できるかもしれません。
サイドメニュー以外でも、ページ内に貼り付けたシールなどでも効果的に印象付けられると思います。
こうした効果を使って、あまり他に無いWEBページを作るのって、面白いですよね？
0 件のコメント:
コメントを投稿