「キスと校則と伝統」第1話 公開!!!牛乳には血圧を下げる効果があるらしい。

2013年06月27日

floattest1

http://submari.net/floattest.html

銀豚WEB SITE内テストページにて、
ページに「動き」を生み出す実験。

jQueryanimate機能を活用。

まずは、ページを開くと同時に、
BOXが横に流れていく動きを。

下記に方法を記載しておく。

まず、
.html fileの<body>内に下記BOXを作成。

<div id="box"></div>

そして、
.html fileの<head>内に下記外部CSSファイルリンクと、
jQuery codeを記入。

<link rel="stylesheet" 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">
$(function() {
    $('#box').animate({
    'marginLeft': '700px'
});
});
</script> 

さらに、
外部CSSファイル内に、
下記のように BOXの詳細codeを記入。

@charset "UTF-8";
/* CSS Document */

#box {
    width: 100px;
    height: 30px;
    background: #FF6347;
}

と。 

さらにさらに、
コレを応用し、複数のBOXを組み合わせた展開を。

GINBUTAのTEXTを1文字ずつBOXに入れ、
それぞれの横へ流れる距離を調整し、
流れ終わった時、キレイに並ぶカタチに。 

floattest69

↑こんなカタチで。

方法は・・・

    $('#box').animate({
    'marginLeft': '700px'

↑このjQueryの指令の  'marginLeft': の数値を
それぞれ変えればOK!
1番上の「B」から100, 200, 300...
というふうに。

さらに応用すれば、
感動と驚きを生み出せる動きを作っていける。 



shun699 at 21:00│Comments(0)TrackBack(0) このエントリーをはてなブックマークに追加 IT:web design 

トラックバックURL

コメントする

名前
 
  絵文字
 
 
「キスと校則と伝統」第1話 公開!!!牛乳には血圧を下げる効果があるらしい。