下記のサイトのトップページ中央の画像スライド？アニメーション？
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は以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css3でアニメ</title> <style> .anime { background: url("home.png") repeat-x scroll 0 0 #FFFFFF; width:100%; height:86px; animation:scr1 infinite 30s linear; position:absolute; z-index:10; opacity:0.9; } .anime2 { background: url("cloud.png") repeat-x scroll 0 0; width:100%; height:25px; animation:scr2 infinite 40s linear; position:absolute; z-index:20; opacity:0.9; } @keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } h1{font-size:15px;color:#666;} </style> </head> <body> <h1>css3でアニメーション</h1> <div class="anime"></div> <div class="anime2"></div> </body> </html> |
①家pngファイル 1000×86
②雲pngファイル 703×25
キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。
|
1 2 3 4 5 6 7 8 |
@keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } |
画像が重なっているのは、
position:absolute;
z-index
が効いているからです。
もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。
レッツ チャレンジ！
※ie9.ie8.ie6では動きません。
