画像とテキストのフェードイン

リクエストをいただきましたので、画像とテキストのフェードインの方法を紹介したいと思います。

一番簡単な方法はjQueryで実現する方法です。

こんな感じになります↓

 

まず、「JimdoでjQueryを使う為の準備」を参考にして、jQueryを使えるようにしてください。

 

次に画像を用意します。

画像倉庫をつくって画像を使い回す」を参考に、フェードインの対象とする画像をアップロードしてください。

 

画像を用意したら、実際に画像をフェードイン表示したい箇所にウィジェットを貼り付けます。

「新規項目を追加」→「ウィジェット/HTML」を選択して、ウィジェットに次のようなコードを書き込みます。

 

<div class="fadein-img" style="display:none;">
  <img src="http://u.jimdo.com/xxxxxxxxxxx/std/image.jpg" alt="woodpecker-mini">
</div>

 

今回は <div>で囲んだ部分をフェードイン対象とします。

class="fadein-img" はクラス名です。後でこのクラスに対してフェードインを指定します。

style="display:none;" はページ読み込み時に非表示にしておくという意味です。

<img>タグには先ほど用意した画像を指定します。

 

最後にjQueryのコードを記述します。

「設定」→「ヘッダー部分を編集」を開き、以下のコードを貼り付けます。

1~8行目は「JimdoでjQueryを使う為の準備」で記述済みであれば、今回は書く必要はありません。

 

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
 
<script type="text/javascript">
//<![CDATA[
google.load("jquery","1.4");
//]]>
</script>
 
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
   $(function() {
     $(".fadein-img").fadeIn(5000);
  });
})(jQuery);
//]]>
</script>

$(".fadein-img").fadeIn(5000); の部分がフェードインを指示している部分です。

たった1行です。簡単ですね。

クラス".fadein-img"(ドットを忘れずに)で指定した部分を5秒かけてフェードインさせます。

 

画像のフェードインを紹介しましたが、<div>で囲んだ部分に文字を書いても同じ様にフェードインします。

また、これと同じ方法で、「独自レイアウト」の「HTML」でトップ画像やタイトルにフェードアウトをかけることもできます。

色々と試してみてください。