jQueryの短いコードでコンテンツをフェードインしながらふわりと読み込む方法

jQueryを使って、短いコードで素敵なエフェクトをかける事ができるコードを見つけたのでメモです。

短いコードで素敵なエフェクトをかける事ができるコード
コードの細かい解説が参考記事にあります。とても参考になりました!

サンプルを作りました。(サンプルデモ→”fadein|memocarilog demo”)

使い方

ヘッド内で以下のようにjQuery本体とコードを読み込みます。
読み込む時間とフェードインの時間を指定できます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
      $(function(){ 
        $('#フェードインしてくる要素').hide(); 
         }); 
       
        var i = 0; 
        var int=0; 
       
       $(window).bind("load", function() { 
        var int=setInterval("doFade(i)",500); //読み込む時間を指定
       }); 
       
      function doFade() { 
        var list = $('#フェードインしてくる要素).length; 
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('#フェードインしてくる要素').eq(i).fadeIn(800); //フェードインの時間
            i++; 
       } 
</script>

”#フェードインしてくる要素”の箇所に #fade などフェードインさせたい要素を指定すれば完了です。
簡単に読み込み時に素敵なエフェクトをかけることができます。

サンプルのデモとコードです。

サンプルデモ;fadein|memocarilog demo

サンプルのHTMLヘッドのjQuery部分のコードです。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('.photos li').hide();
});
var i = 0;
$(window).on("load", function() {
  var int=setInterval("doFade(i)",500);
});
function doFade() {
  var list = $('.photos li').length;
  if (i >= list) {
    clearInterval();
  }
  $('.photos li').eq(i).fadeIn(1000);
  i++;
}
</script>

サンプルのHTML部分です。

<h1>jQuery fadein|memocarilog demo</h1>
<ul class="photos">
  <li><img src="images/p01.jpg"></li>
  <li><img src="images/p02.jpg"></li>
  <li><img src="images/p03.jpg"></li>
  <li><img src="images/p04.jpg"></li>
</ul>

サンプルのCSSコードです。

.photos{
  overflow: hidden;
}
.photos li{
  float: left;
  width: 25%;
  height: auto;
}
.photos li img{
  width: 100%;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能