タグ

2013年5月2日のブックマーク (2件)

  • JavaScriptで画像のスライドショーを作成する方法 [ホームページ作成] All About

    JavaScriptで画像のスライドショーを作成する方法一定秒数ごとに自動的に画像とキャプションが切り替わるスライドショー機能の簡単な作り方を解説。HTMLで画像とキャプションの表示空間を用意し、CSSで装飾を加え、JavaScriptで指定時間ごとに表示内容を切り替えることでスライドショーを作成する方法を、動作サンプルと共にご紹介。一時停止ボタンも作成して、好きな画像をじっくり鑑賞できるスライドショーです。 自動的に複数の画像が切り替わるスライドショーの作成方法 ウェブ上で見せたい写真がたくさんある場合、サムネイル画像を並べておいて好きな画像を手動で拡大してもらう方法もありますが、閲覧者がいちいち画像をクリックしないと表示できないので手間がかかります。一定秒数ごとに自動的に表示画像が切り替わっていくスライドショーを作成しておけば、操作の手間なく多数の画像を連続して閲覧できて便利です。 そ

    JavaScriptで画像のスライドショーを作成する方法 [ホームページ作成] All About
  • 第17回 アニメーションの基礎 | gihyo.jp

    こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「⁠特定の要素」に対して、「⁠そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「⁠ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;

    第17回 アニメーションの基礎 | gihyo.jp