[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade

マウスホバー時に背景画像をフェードで変更させ、更にアニメーションでの移動や不透明度の変更もできるスクリプトを紹介します。

デモのキャプチャ

jQuery bgFade Plugin
デモ

デモでは3つのエフェクトが公開されています。

デモのキャプチャ

フェードで画像を変更

デモのキャプチャ

フェードで画像を変更、15px下に移動

デモのキャプチャ

フェードで画像を変更、不透明度を0.5に

スクリプトの実装

HTML

class名は自由に設定できます。

CSS

変更後のスタイルのclass名には「span.bg_fade」を含めます。また、display, height, widthは必ず指定します。

JavaScript

オプションでフェードのスピード、移動量、不透明度などを設定できます。

sponsors

top of page

©2019 coliss