*

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を配置しましたが、横に使用するとヘッダーのメニューバーなどに使用できると思います。
動きを横から縦に変更してもいいメニューバーになると思います。
動かすだけなら、少ないファイルで動くので色々な用途に使ってみてください。


関連記事

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

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

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

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

Message

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

PAGE TOP ↑