最初の要素だけフェードインのタイミングをずらす

仕事でサイトに動きをつけたいという要望があり実装したもののちょっとハマりそうになったので解決方法をここに残しておこうと思う。

リストで並べた画像をスクロールでフェードイン

要望は画像を並べたリスト部分の画像をスクロールしたタイミングでフェードインしてくるようなものを作って欲しいとのことだった。

サンプルを作ったので実際に見て欲しい。

サンプルはこちら

このサンプルをスクロールさせると画像がフェードインしてくる。

ただ、初期の段階では全く何も表示されておらずただの空白になっているのが気になるとのことだった。なので最初に一個予め表示させておいて欲しいとのこと。

たしかに私もそれは思ったが最近のサイトは最初何も表示されていないようなおしゃれなサイトが増えているので大丈夫なような気がする…だがお客さんの要望は叶えなければならないということで考えた。

WordPress側で解決

最初考えたのはこのサイトがWordPressで作られていて、この部分もループを使って表示する部分だったためそのループのオプションを使えば1つ目だけ先に表示できそうと考えた。

それを実装するために調べたところquery_postsのループのオプションでいくつ目からいくつ目まで表示という事ができるらしかった。早速それを使って実装する。

完成したのが1つ目は1つだけ表示というループで、2つ目からは2個めから6個目を表示というループ。2つのループを並べる形で実装してみたのだが上手く行った。

1つ目のループにだけクラスをつけてスクロールしないでもフェードインする形にすることが出来たので、もう完成と思ったのだが一つ問題が発生する。

それはこのオプションを使うとカテゴリーページで全部の記事が表示されてしまうというもの…。

このフェードインはトップページだけではなく、カテゴリー一覧ページでも同じことをしたいとのことだったため、カテゴリートップでそのカテゴリーではない記事が全部表示されてしまうのはとても困る。

ということでWordPress側での解決は無理ということがわかった。

調べると使ってたquery_postsは非推奨でget_postsが今のやり方らしい。どうもquery_postsだとページ送りができなくなるとかでこの方法だと後々ややこしいことになっていた可能性が高い…。

jQueryで解決

WordPress側で出来ないとなるとどうしたものか？とちょっと絶望的にハマりかけていたのだがふと思いついたのがjQuery側で1つ目だけ挙動を変えることは出来ないのか？ということ。

悩んだ時は別の角度から攻めるのが1番で、PHPでハマったらJavaScript、それでダメならCSSといろいろやってみるのがいい。

ってことでjQueryでなんとかする方法を考えた時、1つ目の要素に対してクラスを付ければいいんじゃね？と思いつく。

appendを使ってfirst-childに対してクラスを付ける・・・と考えたのだがよく考えるとfirst-childに対して最初からフェードインするというアニメーションを付ければ回りくどいことせんでも大丈夫やんってなり、このコードになった。



$(function(){
   // リストを非表示
  $('#top_main_list li').css('opacity','0');
  $('#top_main_list li:first-child').animate({opacity:1},1000);//最初の一個は最初からフェードイン
  jQuery(window).scroll(function(){
    var obj_t_pos = jQuery('#top_main_list li').offset().top;
    var scr_count = jQuery(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加
    if(scr_count &gt; obj_t_pos){
        // 繰り返し処理
        $('#top_main_list li').each(function(i) {
        // 遅延させてフェードイン
        $(this).delay(500 * i).animate({opacity:1},1000);

       });
    }else{
    }
  })
})