*

animationでboxを動かしてみた。

公開日: : animation, css3, html5, jquery, 未分類

今回は、animationを使って、boxを動かしてみました。

マウスを乗せたときに指定したboxに動きをつけると、おもしろいサイトになると思いませんか?

また、指定したboxにテキストを書けばマウスオーバーの際に、テキストが動くということになります。

あんまり、気にならないという人もいると思いますが、このようなちょっとした遊び心でサイトのイメージが作られていくのではないかと思います。

なので、今回は、マウスオーバーの際に動きをつけるというものを作ってみました。

まずは、こちらをご覧ください
デモ01

続いて、boxの背景色をけせば、テキストが動くようになります。
デモ02

メニュバーなどをこのように置けば、個性あるサイトになっていくのでは、ないでしょうか?

以下に設置方法を記載します。
今回は1つのscriptファイルを使用します。
今回のファイルは、動きをつけるので、easingファイルのみです。
easingを使用するといろいろな動きをつけられるので、私は、animationには、必須だと思います。
easingの種類は、こちらを参考にしてください。
Easing/jQuery

・前準備
htmlファイルのheadの中にscriptを埋め込んでください。

<head>
・
・
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
</head>

cssファイル以下の1つを使用します。
htmlファイルのheadの中にcssを指定ください。

<head>
・
・
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

以上の2つをまとめると、内は、このようになります。

<head>
<title>テスト</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>

※指定しているところにファイルがきちんとあるか、確認してください。

ファイルは最後の所にダウンロードできるようになっています。

その後、以下のようなソースです。
————————————————————————————————————-
html(index.htmlのファイル)

<div id="qqq">
<ul>
<li class="aaa">box01</li>
<li class="aaa">box02</li>
<li class="aaa">box03</li>
<li class="aaa">box04</li>
</ul>
</div><!--qqq-->

————————————————————————————————————-
css(style.cssのファイル)

#qqq{
	width:600px;
	margin:0 auto;
	position:relative;
	background-color: #333333;
}

ul {
        list-style:none;
        margin:0;
        padding:0;
}
.aaa{
        width:100px;
        height:30px;
        padding:0;
        text-align:center;
	background-color: #c0c0c0;
}

————————————————————————————————————-
script(今回は、書くところが少ないので、head内の記載しました。)

<script type="text/javascript">
$(document).ready(function(){
				$('.aaa').hover(function() {
                $(this).stop().animate({'marginLeft':'5px'}, 1000,'easeOutElastic');
                },function() {
                $(this).stop().animate({'marginLeft':'0px'}, 1000,'easeOutElastic');
                });
});
</script>

————————————————————————————————————-
以上で完成しました。
scriptの変更で、
動きが完了するまでの時間や、
動き(easing)や、
boxの動く場所(今回は、leftに5px)などが
変更できます。

今回のファイルをUPしときましたので、
参考に使ってください。
ダウンロード
animation_box
————————————————————————————————————-

補足=今回は、縦にboxを配置しましたが、横に使用するとヘッダーのメニューバーなどに使用できると思います。
動きを横から縦に変更してもいいメニューバーになると思います。
動かすだけなら、少ないファイルで動くので色々な用途に使ってみてください。


関連記事

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑