CSSスプライトで、スムーズに画像を切り替える

LINEで送る
Pocket

マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくるんでしょうけど。

要するに↓こんな感じです。
GoToTopBG_animation1のgif画像

これはこのサイトで使ってるページトップへ移動するためのアイコンなのですが、このアイコンにカーソルをのせる度に、これがすごく気になってたんですね。
(正確にはブラウザでそのサイトを初めて読み込んだ後(キャッシュに画像が残ってない状態で)、カーソルを合わせる時です。

なのでこの、CSSスプライトを使う事に。
ちなみにCSSスプライトとは、マウスホーバーなどで画像を切り替える時に、onMouse,offMouseでそれぞれに画像を設定して2枚使うのではなく、必要となる複数(今回の場合は2枚)の画像を1枚にして、cssのposition設定で表示される部分を切り替えて、サイトの表示速度をあげることができるCSSのテクニックです。
この場合だと、2枚の画像を2回に分けて読みこむのではなく、1枚を1回で読み込むので、その分早く表示できるようになるわけですね。

要するに↓こんな感じになります。
GoToTopBG_animation2のgif画像

ちなみにalt属性が使えなかったり、更新時に手間がかかったり、背景画像のリピート表示ができなかったりと(これは当方はできたのですが、できない場合もあるようです。)、使えない状況も出てくるかと思いますので、このページトップへのアイコンや、メニューバーなど、Webサイトを構成するうえで必ずしもきちんと表示しなくても問題のない画像には、この方法を使った方がサイト表示の高速化につながるので、面倒でなければ使った方がよいテクニックかな?と思います。

同じように画像が切り替わる時の”チラチラ”が気になる方、使ってみてはいかがでしょうか?

このCSSスプライトについては、WEBクリエイターボックスのまなさんのページを主に参考にさせていただいたので、
html,cssの書き方等、もう少し詳細を知りたい方は、マナさんのサイトまで!
http://www.webcreatorbox.com/tech/css-sprite/



関連記事

WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


onMouseOver、onMouseOutで、簡単にテキストを切り替える!


前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


Message

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

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP