*

本日から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>

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

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

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

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

 


関連記事

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

HP作成に必要なもの。

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

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

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

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

Message

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

PAGE TOP ↑