• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

PATE NOTE

ゆるく生きる思考と技術

  • note profile
  • note magazine
  • Contact Us
  • privacy policy

jQueryでタイトル画像をふわっとフェード切り替え

2011-05-02 by PATE

昨日の朝「Twenty Tenのタイトルを超簡単に画像に置き換える方法」という記事を書いたばかりなんですけど、数日前に知ったJavaScriptのjQueryってものを知って(おそっw)、面白そうなのでいろいろいじって、またタイトル画像を変えたりして遊んでいました^^

タイトル画像を入れ替える方法を何パターンか試してみたんですけど、ふわっとした感じのフェードで入れ替える方法が一番いい感じに思えたので紹介します^^

仕組みとやり方

まず、結論からいうと、この方法の仕組みは、画像を入れ替えるというよりは、1枚は普通に画像として置いて、もう1枚はCSSで背景画像として設定し、2枚の画像を重ねて置いた状態にして、普通に置いた上の画像をフェードアウトさせて消し、CSSで設定した背景画像が見えるようにするってだけです。

で、実際のやり方ですが、まず、上になる1つ目の画像はこんな感じで普通に置きます。

[html]<h1 id="site-title">
<a href="https://c713.net/"><img src="/images/anchan_logo_off.jpg" alt="Anchan" width="260" height="75" /></a>
</h1>[/html]

次にCSSで、同じ場所に背景画像をこんな感じで設定します。

[css]#site-title {
width: 260px; /* 画像の横幅 */
height: 75px; /* 画像の高さ */
background-image: url(/images/anchan_logo_on.jpg) ; /* 画像のURL */
display: block;
background-position: left center;
background-repeat: no-repeat;
}[/css]

ここまでできたら、jQueryを使って上になっている画像をフェードアウトさせますが、ヘッダーでjQueryを読み込んでない方は、これをそのままヘッダーに追加してください。

[javascript]<script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’></script>[/javascript]

これを追加する事によって、jQueryが動作するようになります。

画像をフェードアウトさせるためのjQueryのJavaScriptは、kojilow Blogさんの「ナビゲーションをフェードで切り替え」という記事で使っているものと同じです。(kojilow Blogさんに感謝です^^)

[javascript]<script type="text/javascript">// <![CDATA[
$(function(){ $(‘#site-title img’).hover( function() { $(this).stop().animate({"opacity":0}); }, function() { $(this).stop().animate({"opacity":1}); } ); });
// ]]></script>[/javascript]

これの3行目の部分のカッコの中に、この動作のターゲットとなるものを書きます。

私の場合はid=”site-title”内のimgに対してなので、こういった指定になりました。

これをこのままヘッダーにコピーするか、JavaScriptのファイルとして作って、読み込んでもOKです。

さいごに

これで上になる画像がフェードアウトされて、背景画像とふわっと入れ替わったように見えます。

いろいろと書きましたが、実際にやってみるとそんなに難しくないので、やってみたいなーと思う方は試してみてください^^

Filed Under: ブログ運営

最初のサイドバー

かれこれ10年以上ネットで稼ぎながらゆるく生きています。Twitterフォロワー1万人越えインフルエンサーの中の人。こうしてゆるーく生きていくための思考と技術をnoteに書いてます。1000円/月だけどランチ1回我慢する程度で社畜の人生とおさらばできると思えば安いもんです。こう見えて意外と人気なんですよ。

note はこちら

人気の投稿

  • iPhoneで大人気のアプリ「Instagram」のAndroid版が公開初日に100万ダウンロードとかすごすぎw
    iPhoneで大人気のアプリ「Instagram」のAndroid版が公開初日に100万ダウンロードとかすごすぎw
  • Dシリーズ(三菱電気)の後継機種「F-03A」「P-02A」について
    Dシリーズ(三菱電気)の後継機種「F-03A」「P-02A」について
  • 超簡単!プラグインを使わずにWordPressへソースコードを貼り付ける方法 github編
    超簡単!プラグインを使わずにWordPressへソースコードを貼り付ける方法 github編
  • 自宅でWiMAX 2+の電波が入るようになったよ!
    自宅でWiMAX 2+の電波が入るようになったよ!
  • #ハッシュタグの使い方について
    #ハッシュタグの使い方について
  • 仕事や勉強で最高の集中力が発揮できる時間帯や環境づくりについて詳しく書いてみた
    仕事や勉強で最高の集中力が発揮できる時間帯や環境づくりについて詳しく書いてみた
  • Yahoo!JapanのメールをiPhone/iPod touchに簡単に設定する方法[IMAPアクセス]
    Yahoo!JapanのメールをiPhone/iPod touchに簡単に設定する方法[IMAPアクセス]
  • ホリエモンチャンネルのクラウドファンディングが始まったので寄付してみた!
    ホリエモンチャンネルのクラウドファンディングが始まったので寄付してみた!
  • iPhoneでQRコード専用アプリを使わずにQRコードを読み取る方法
    iPhoneでQRコード専用アプリを使わずにQRコードを読み取る方法
  • iTunes Music Storeのダウンロード件数10億曲を突破!10億曲目をダウンロードした方へ凄いプレゼント
    iTunes Music Storeのダウンロード件数10億曲を突破!10億曲目をダウンロードした方へ凄いプレゼント

Twitter

ツイート

Instagram

Instagram でフォロー

Footer

Category

Archive

© 2025 PATE NOTE