webワーカーライフ

参考情報

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

投稿日:

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

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

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

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

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

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

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

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に対して最初からフェードインするというアニメーションを付ければ回りくどいことせんでも大丈夫やんってなり、このコードになった。

 

結果のサンプルコードは以下

この記事のまとめ

1つ目だけ最初から表示するってのもなんかちょっと微妙っちゃ微妙と思うのだがクライアントはこれでいいと言ってくれたのでこれで納品ということになった…。

何でも一つのことに固執せず、別の方法を考えると意外とあっさり解決することがある。

\SNSでシェアしてね/

人気の記事

1

毎朝「いらっしゃいませー」とみんなで大声で復唱するような普通の店舗での販売員だった私が、職業訓練を3ヶ月受けて社内WEBデザイナーになった話を紹介してみます。

2

今はいろいろな働き方があってWebデザイナーでもアルバイトや派遣社員などの非正規雇用で働いている人も多い。 実際のところ派遣社員でWebデザイナーをするのはどんな感じなのか?派遣社員でWebデザイナー ...

3

Web制作の仕事で生活していこうと思うといろいろな職種がある。 Webデザイナー フロントエンドエンジニア コーダー プログラマー Webディレクター WebデザイナーやWEBディレクターはデザインや ...

-参考情報

Copyright© Webワーカーライフ , 2020 AllRights Reserved.