• 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のGmailアプリに届いた英語のメール本文を超簡単に翻訳する方法
    iPhoneのGmailアプリに届いた英語のメール本文を超簡単に翻訳する方法
  • Twitterのつぶやき(ツイート)をテキスト形式やブログ形式で保存する方法
    Twitterのつぶやき(ツイート)をテキスト形式やブログ形式で保存する方法
  • 休憩に軽い運動をすると生産性が70%アップする『セーチェノフ現象』
    休憩に軽い運動をすると生産性が70%アップする『セーチェノフ現象』
  • ToDoリストを使わずに、やるべきことをガンガン終わらせる方法を実践してみたら凄かった
    ToDoリストを使わずに、やるべきことをガンガン終わらせる方法を実践してみたら凄かった
  • 具体的な目標設定ができる究極の思考ツール「マインドマップ × WOOP」
    具体的な目標設定ができる究極の思考ツール「マインドマップ × WOOP」
  • 2つのBlogをGenesis frameworkでリニューアル
    2つのBlogをGenesis frameworkでリニューアル

Twitter

ツイート

Instagram

Instagram でフォロー

Footer

Category

Archive

© 2022 PATE NOTE