*

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

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

HP作成に必要なもの。

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

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑