今回はこのブログで利用している「画像をふわっとフェードインさせるJavaScript」を紹介します(このページでも使われています)。
現状WordPressでは何もしなくても勝手に画像は遅延読込されており、読み込み速度を上げるためだけなら特段何もする必要は無いのですが、「ふわっとフェードインさせたい!」という欲求はあるかもしれません。今回はその欲求を満たすスクリプトを紹介します。
この効果がユーザーエクスペリエンスを向上させることは決して無いと思いますが、ブログを運営していると運営者自身が状況に飽きるということがあると思いますで、その飽きを解消する効果はあるかもしれません(私も実際使っています)。
つまり、「遅延読み込みの効果は無いがフェードインの効果はあるスクリプト」ということになります。
また、この手のスクリプトは「jQuery」に依存している場合が多いですが、個人的にできるだけ依存したくないものが欲しかったので、そういった事をChatGPTとお話しながら作ったものです。
フェードインしない画像を指定するスクリプト
基本的には上のスクリプトを「</body>」上に貼り付けてもらえれば動作します。
ブログのロゴなどフェードインさせたくない画像は
img:not(#main-image img):not(#site-info img)
で調整してください。上の例ではトップページに表示されているアイキャッチとすべてのページに表示されている「シフルインサイト」のロゴのフェードインを除外しています。それぞれの画像が、
<div id="main-image">
<img =" ">
</div>
<div id="site-info">
<span class="tn-logo-size"><img =" "></span>
</div>
という感じで並んでいるので、それぞれの画像が入っている「<div>」のidを指定して除外しています。同じ要領で続けていけばフェードインさせたくない画像をいくらでも増やすことができます。
また、
translateY(0px)
の部分では下からの移動を制御しています。このブログでは下からの移動はいらないと考えたので「translateY(0px)」としていますが、例えば「translateY(10px)」とすれば、画像が表示領域に入ったときに10px下から上がりつつふわっとフェードインしてくれるようになります。
また、下からではなく横からフェードインさせたい場合は「translateY」を「translateX」に変更すれば実現できます(「translateY」の記述は二箇所ありますのでどちらも変更してください)。
opacity 0.5s ease-out, transform 0.6s ease-out
については「opacity 0.5s」でフェードインする時間、「transform 0.6s」で下から上がってくる時間を制御しています。ここの秒数をいじることでタイムングを変更することが出来ます。
フェードインする画像を指定するスクリプト
最初に紹介したスクリプトでは「フェードインさせない画像を指定」する方法でしたが、むしろ特定のクラスを指定したい場合も多いと思います。下にあるJavaScriptはクラスを指定してふわっとフェードインさせるものです。
スクリプトの3行目にある「fade-in-img」と「highlighted-img」を自分が指定したクラスに変更してください。数はいくらでも増やせます。
それ以外の部分は前のスクリプトと同じように変更していただければと思います。
この記事を書いた人
最新記事
- 2024年11月28日
【Click Tracker S】指定したクラスを持つリンクのクリックを追跡するWPプラグイン - 2024年11月27日
【火垂るの墓】登場人物&声優一覧とキャラクター考察 - 2024年11月14日
「ポチップ」をなんとか「Classic Editor」で使う方法 - 2024年11月13日
【GA4】Google Analytics 4の遅延読み込み用JavaScript - 2024年11月12日
【jQueryなし】表示された画像をふわっとフェードインさせる方法