*

本日からblogを書きます。

公開日: : 最終更新日:2013/12/03 animation, css3, html5, jquery, 未分類

初めまして。

 

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

日々作成の際に、覚えたことや取り組んだことを書き残していきたいと思います。

自分に対してのメモ帳みたいな、blogになってしまいますがよろしくお願いします。

また、ソースが間違っていたらすいません・・・。

少しずつ参考となるようなblogを書いていきたいと思っておりますので、よろしくお願いいたします。

 

 

最近のサイトは、動かすサイトばかりでどんどんクオリティーの高いサイトになっており、関心する毎日です。

“かっこいいサイト”や”jqueryサイト”などで検索すればたくさんでてきます。

便利な面、ついていくのが大変です。(笑)

 

 

早速ですが本日は、jquery”animation”を使って、ボックスを動かすという事をしてみました。

まずは、

デモ(animation01)

を見てください。

 

初めに、htmlファイルのbodyの中にscriptを埋め込んでください。

<body>

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

</body>

今回はこの3つのscriptファイルを使用します。(cos.jsファイルがカスタム用です。)

その後、以下のようなソースです。

————————————————————————————————————-

html(index.htmlのファイル)

<div id=”wrap”>
<div id=”box1″>”box1”0秒後に3秒間かけて”右”から出てきます。</div><!–box1–>
<div id=”box2″>”box2”3秒後に3秒間かけて”左”から出てきます。</div><!–box2–>
<div id=”box3″>”box3”6秒後に3秒間かけて”下”から出てきます。</div><!–box3–>
<div id=”box4″>”box4”9秒後に3秒間かけて”上”から出てきます。</div><!–box4–>
</div><!–wrap–>

————————————————————————————————————-

css(index.cssのファイル)

#wrap {
position: relative;
width:1000px;
height: 300px;
margin:0 auto;
margin-top:100px;
background: #000000;
}
#box1 {
position: absolute;
width: 100%;
height: 100%;
margin-left:-100px;
opacity: 0;
background: #ff0000;
}

#box2{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
margin-left:100px;
background: #008000;
}

#box3 {
position: absolute;
width: 100%;
height: 100%;
margin-top:100px;
background: #ffa500;
opacity: 0;
}

#box4 {
position: absolute;
width: 100%;
height: 100%;
margin-top:-100px;
opacity: 0;
z-index:10;
background: #0000ff;
}

————————————————————————————————————-

js(cos.jsのファイル)

$(function() {
$(‘#box1’).animate({
left: “100px”,
opacity: “1”
},{
‘duration’: 3000,
‘easing’: ‘easeOutExpo’
});

$(‘#box2’).delay(3000).animate({
left: “-100px”,
opacity: “1”
},{
‘duration’: 3000,
‘easing’: ‘easeOutExpo’
});

$(‘#box3’).delay(6000).animate({
top: “-100px”,
opacity: “1”
},{
‘duration’: 3000,
‘easing’: ‘easeOutExpo’
});
$(‘#box4’).delay(9000).animate({
top: “100px”,
opacity: “1”
},{
‘duration’: 3000,
‘easing’: ‘easeOutExpo’
});
});
————————————————————————————————————-

今回は、ボックスを動かして、最終的に、表示させたいコンテンツの位置に順番に集結させるという事をしてみました。

コンテンツを動かすだけでは、順番待ちしているboxが隠れないので、

まず、cssですべてのboxに

opacity: 0;

を指定して、boxを消します。

 

 

その後、jsファイルで

opacity: “1”

を使って完了後に表示するというように指定しました。

ですが、このままだと、すべてのboxが同時に動いてしまうので、jsファイルの

.delay()

を指定しました。

以下がjsファイルの詳細です。
.delay(3000)     =実行開始する時間(ミリ秒)この場合は、3秒後に実行する。
left: “-100px”,    =leftに-100px動かす。
opacity: “1”                =透明度の設定。この場合は、0からスタートなので、終了後に1(表示させる)に設定する。
duration’: 3000,    =実行完了時間(ミリ秒)この場合は、3秒後に実行完了する。
‘easing’: ‘easeOutExpo’=動かす動き。

上記のところを変更すれば、自由度が上がります。

今回は、このところを変更して、もう1つ作ってみました。

デモ2(animation02)

左右からboxが出てくるのみですが、

easing=動き

duration’=実行完了時間

を変更するだけで、イメージを変わります。

 

 

 

今回の2つのファイルをUPしときましたので、

よかったら使ってください。

ダウンロード<animation01>

ダウンロード<animation02>

————————————————————————————————————-

補足=もっと簡潔に書く方法もありましたね。まだまだ未熟ものですいません。

そして、間違っていたらすいません。一応動作確認はいたしました。

まだまだ未熟者で色々ご指摘はあると思いますが、これからも一生懸命書いていくのでよろしくお願いいたします。

 


関連記事

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

Message

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

PAGE TOP ↑