Edited at

Javascriptでアニメーションするメモ(JQuery使います)初心者用

More than 5 years have passed since last update.


結構簡単にJavascriptで動きます。

logo-100-100.png 実はすごく苦手なJavascriptですが、やってみると割と簡単でした。(初心者用)

Javascriptって苦手だったけど、やってると楽しくなってきます。

僕のような苦手意識のある方向けです。


JQueryを読込みます。

HTML5で書いてる時と、そうでない時は記法が少し違うので注意。

最近はHTML5で書く事にしてる。IE早く対応してくれ…。


HTML5の時

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>



それ以外

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


僕はJQuery自体をjsフォルダの中に置く事が多いんだけど、それってどうなんだろう。

読み込みスピードとかの違いか??


サーバーに置いてある時

<script src="./js/jquery-1.7.2.min.js"></script>


この時点で疑問だもんなぁ…。

JQueryのバージョンとか、サーバーに置くとどう違うとか。

全然知らない。勉強しないと。


とりあえず動かしてみたい。

star-100-100.png いや、まぁとりあえずそう思うわ。

まぁ、勉強し始めの時には「とりあえず動かしたい!」と思ってました。

サイト作ってると動かす事ってあんまりなかったりしますけどね。

はじめは隠れててアクションすると出てくるヤツとかはSEO的にどうなんだろう…。

とかっていう情報もあるので使いどころを迷います。


ページが表示されたら動かす。

まず、そのページに移った瞬間からアニメーションをスタートするタイプ。

書き方はこの他にもあると思いますが、ここは僕の好みで書いてます。

● box1 というクラス要素を動かします。

● 左からの距離50%の位置まで動かします。

● 5000マイクロ秒かけて移動します。


すぐ動かす

$(function() {

$('.box1').animate({
'left': '50%'
},5000);
});

こういうCSSの時の例です。


CSS

.box1 {

position: absolute;
top: 20px;
left: 0;
width: 20%;

例えばCSSでmarginで距離を作っている場合はJavascriptの時は書き方に注意が必要。

● marginLeft という感じで書く。

● margin-left ではない。


Javascript

分解するとこう


基本

$(function() {

この中に書く。
});


アニメーション

$(function() {

$('.box1')//////////////ここで要素を指定
.animate({//////////アニメーションするよ
'left': '50%'//////左から50%の所までいくよ
},5000);///////////////5秒かけていくよ
});

普段はあんまり改行しません。

あ、時間指定する場合は秒数の前に「, 」忘れないように。


こんな感じ

$(function() {

$('.box1').animate({'left': '50%'},5000);
});


ボタンを押したら動かす。

何かボタン的なモノを押したら動くようにする。

ボタン自体もdivで囲ってます。

● 時間指定してません。

● div 要素が id の場合は # です。


押したら動く

$('.botan1').click(function(){

$('#box1').animate({'marginLeft': '500px'});
});


同時に色んな動きを出したい。

● 指示をカンマ( , )で区切る。

● 最後の指示はカンマいらない。


同時に動かす

          $('.box2')

.animate({
'width': '45%',
'right': '-15%',
'top': '-15%'
},5000);


連続で動かしたい。

● .animate ごとに動きます。


連続で動かす

$('.koumori1')

.animate({ 'right': '15%', 'top': '15%'},1000)
.animate({ 'right': '25%', 'top': '5%'},1000)
.animate({ 'right': '15%', 'top': '15%'},600);


触ってると楽しい

heart-100-100.png

こうやってカッコいい動きのメニューとか作ると良いかも。

今まで「JQuery ナビゲーション」とかで検索して、配布してくれてるやつとか使ってたけど、これでやっと自分の好きな動きのを作れる。

イイのが出来たら今までの恩返しに配布とか出来たらイイなぁ…。