サンプル


  1. 花散らし

    1. 変化する花びら

      ページ上で、桜の花びらの画像を左右に揺らしながら落下させます。画像はアニメーションGIFで作成し大きさや色を変えます。これで、舞っている感じがでます。アニメーションGIFは複数の画像を集めて一つの画像としたgif形式のファイルです。これを編集するフリーソフトがあります。
      桜の画像ファイルはこちらを利用してください。

    2. スタイル

      画像のスタイルを .petal で定義します。 z-index : -1 で文字の後ろに表示するよう指定します。
      <!--
.petal{width : 16px;
  position : absolute;
  top : 0px;
  left : 0px;
  z-index : -1;/*画像は文字の後ろ*/
}
      また、body のスタイルとして、色とスクロールバーを隠すため、以下の設定をします。
      body{
  overflow : hidden;/*スクロールバーを隠す*/
  background-color:#ccccdd;
}
-->
</style>
<script type="text/javascript" src="petaldrop.js"> 
</script>
</head>
<body onload="init()">
<h1>花びらを散らす</h1>
<p>アニメーションgifの画像を散らします<br></p>
<p>スクリプトはpetaldrop.js です<br></p>
<div id="auther">このJavaScriptは以下のページを参考にしました<br>
<a href="http://plusone.jpn.org/javascript/">+1JavaScript</a></div>
</body>

      スクリプトの実行は、<body>タグの onLoad イベントで行います。
      <body onload="init()">
<h1>花びらを散らす</h1>
<p>アニメーションgifの画像を散らします<br></p>
<p>スクリプトはpetaldrop.js です<br></p>
<div id="auther">このJavaScriptは以下のページを参考にしました<br>
<a href="http://plusone.jpn.org/javascript/">+1JavaScript</a></div>
</body>

      スクリプトはここを参照してください。実行とスクリプトの説明はこちらのページです。