スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS(マウスオーバー)で画像をアニメーション(連続)表示

また人の記事を引っ張ってきてしまいました。たまたま観ていたはてなブックマークのCSSでアニメーションができますよ~!という題名に惹かれて覗きに行くとそこには魅惑の世界が。なんでもWebReferenceというサイトでその方法が紹介されていたらしいです。英語は苦手なのですが、まだcat@logさんの所ではサンプルが出ていなかったのでExcite先生に翻訳してもらいながら形だけのサンプルを作ってみました。以前紹介しましたCSSで画像を拡大表示などを併せるなどして応用すれば、ギャラリーなどで上手い具合に使用出来るのではないでしょうか。

実行例の下部に配置されているグラデーション部分をマウスオーバーすると写真が次々と変わると思います(最初は画像の読み込みに少し時間が掛かるかもしれません)。ここでの詳しい説明は省かせて頂きます。と言うのもまだ詳しい説明が出来るほど私自信の理解が深まっていないのです。それから例によって閲覧想定環境のみでしか確認しておりませんので悪しからずお願い申し上げます。割と即席なので不具合も予想されます。

それにしても本当にCSSって色々と出来るのですね。普段JavaScriptをオフにして巡回している、JavaScriptに対して圧倒的に無知な私にとっては嬉しい限りです。

スポンサーサイト

コメント一覧

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。