画像スライド アニメーション

下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html

これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)

出来たら本日の勉強会のお題としてお願いします。

—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!

僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html

html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。

①家pngファイル 1000×86
home

②雲pngファイル 703×25
cloud

キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。

画像が重なっているのは、
position:absolute;
z-index
が効いているからです。

もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。

レッツ チャレンジ!

※ie9.ie8.ie6では動きません。

カテゴリー: 質問と回答 | タグ: , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

画像スライド アニメーション」への1件のフィードバック

  1. ピンバック: 2013-5-10勉強会 | パソコン倶楽部りんご

コメントを残す

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

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.