*

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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

本日からblogを書きます。

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

Message

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

PAGE TOP ↑