まあーね。
用法用量に注意
やりすぎはダメ。
めっちゃ溜めて表示するのとか、閲覧時恐ろしく煩わしい。一回フェードやったのにスクロールして戻ってくるたびにまたエフェクトかかってるのも見づらくてしょうがない。製作中にだるくなると思うから、何がしんどいってのはわかると思う。
使い始めは楽しくなっちゃうけど見返すのもだるいし、細かいオプションを作りまくって管理するのとかすごいめんどい。
シンプルに、単純にやるのが丁度いいと思う。
ScrollReveal.js
自作は論外としていくつか手を出したけど、これが一番楽だしシンプルでいい。
検索すれば導入記事はくさるほど出てくるので割愛。
記事ページに良いかもしれない
シンプルすぎてどうしようもない記事ページに何か付けたいなと。ちょびっとでいいからフェードしたらなんかそれっぽくない？ってなった。本文に対しての適用はめっちゃ楽。
<article>
<?php the_content();?>
<article>single.phpでこんな感じで組んだとして、こうする。
ScrollReveal().reveal('article > *',{
duration: 1200, // アニメーションの完了にかかる時間
viewFactor: 0.4, // 0~1,どれくらい見えたら実行するか
reset: false, // 何回もアニメーション表示するか
origin: 'bottom',
distance: '20px',
delay: 100
});段落毎にフェードするんで、ボリュームのある記事だとなんかすごい感じを出せる。
<article>の直下を指定してるんで、<figure>とか<table>とか<ul>とかは一発で表示してくれる。画面がうるさくならなくていいけど、逆にそれがいいんであれば「>」を取っちゃえばいい。一々タグを指定するのもだるいからこれでいいと思うけどどうか。<ul>は横スライドで表示するよとかこったことできるけど、めんどいよ。
めちゃくちゃボリュームのある段落とかでかい画像とか、占有面積がすごいやつ。それと、スッカスカで1行程度のやつ。要素の高さによって表示タイミングが変わるんで、できたらボリュームは均一にしたらいいと思う。
読み込み時のチラツキ防止
jsだから仕方ないんだけど、ページの表示にjsの反映が追いつかない。
一瞬だけ表示して、非表示になってからフェードするって感じになる。
でも、これ一つで対処可能。
visibility: hidden;ちまちま指定するのはだるいので、classで付与するとかなんかうまいこと考えたほうが良い。
まーでも、これをやっちゃうと、jsが読めなかった場合は非表示のままだから怖い。
cdnじゃなくて自鯖にjsを入れるとか対策したほうがいいと思う。
とはいえ、ファーストビューじゃなかったら余裕で追いつくんで、設置箇所さえよければチラつきにそれほどシビアにならなくてもいいと思う。
コメント