スタイルシートを使って背景画像をフルスクリーンで表示する。

スタイルシートのサンプル

CSS3を利用して、背景画像をアニメーションさせながら、スライドショー化させる事ができるサンプルページです。

特に知識がなくても簡単に設置する事ができます。

パラメータ名 デフォルト値 説明
scaling 1.17 拡大エフェクトの設定、値は画像サイズの倍率になります。falseをセットすればエフェクトを切ることができる
rotating 3 回転エフェクトの設定、値は度数で指定する。falseをセットすればエフェクトを切ることができる
duration 6 画像ごとの存続時間、単位は秒
fade 2 フェードイン・フェードアウトの速度指定、単位は秒
overlay images/pattern.png マスク画像のurlを指定する文字列

参考サイト
http://211.125.65.24/demo/2012/08/SublimeSlideshow/

スタイルシートのサンプル

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?