ブログ

<img>要素のロールオーバーにもアニメーションを

最近は、ロールオーバーにアニメーションをやフェードアウトをつけるのが一般的になりましたが、<img>要素のロールオーバーにはアニメーションを使ったものをほとんど見たことがないのが不思議でした。

このサイトの制作時に、ふと思いついて(天から降りてきたともいうらしいですが)<img>要素のロールオーバーにアニメーションをつけてみましたのでコードを紹介しようと思います。

基本コード

ロールオーバー部分は以前作成したsmartrollover.jsと変わりません。

今回作成したサンプルでは、ロールオーバーの前後にアニメーション処理で透明度を変更しています。

やっていることは、透明度を変更したあとにロールオーバー処理を行い、その後に透明度を元に戻すという処理をしています。透明度を下げるときの時間を極端に短くすることで、ちょっと面白い雰囲気のロールオーバーになります。

基本的なロールオーバーはこれで完成です。

IE8以下のバグ対策 その1

Internet Explorerというブラウザが無ければ、このセクションは無いのですが、やはりIE、当然のように(!?)バグが出てきます。

透過pngをロールオーバーしたときに、残念なことに黒い怪しい線が出てきます。
また、このスクリプトを応用すればテキストリンクのロールオーバーにも使えますが、アンチエイリアスがかかっているテキストがロールオーバーした後にアンチエイリアスが無効状態になってしまうという問題もあります。

そして、現状ではこの問題の「根本的な」解決方法はありません。
ただ、コンテンツ部分の背景色が単色の場合は「コンテンツと同じ色をCSSで指定する」ことで解決できます。

このサイトの場合は、コンテンツの背景色が白色なので、<img>要素の背景色に白色を指定して解決(!?)しています。

IE8以下のバグ対策 その2

もうひとつの対策は、IE8以下をアニメーション効果の適用から除外してしまうことです。
アニメーション効果を使わないことで、トラブルを防止します。

今回は以前作成したsmartrollover.jsのまま使用しましたが、CSS3の属性セレクタなどを応用することで、一部の要素はアニメーションを適用できるなどという必殺技もできますので研究してみたらいかがでしょうか。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。