*

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

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

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

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

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

HP作成に必要なもの。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑