【jQueryなし】表示された画像をふわっとフェードインさせる方法

今回はこのブログで利用している「画像をふわっとフェードインさせる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はクラスを指定してふわっとフェードインさせるものです。

スクリプトの３行目にある「fade-in-img」と「highlighted-img」を自分が指定したクラスに変更してください。数はいくらでも増やせます。

それ以外の部分は前のスクリプトと同じように変更していただければと思います。