スクロールに応じて画像がふわっと現れるカスタマイズ

こんにちは。すーく(@sytry7)です。新しいカスタマイズを考えました。スクロールにつれて記事中の画像がふわっと現れます

実装予定図

コードの貼り付け先

スマートフォンページのヘッダ→タイトル下に貼り付けてください。

 貼り付けるコード

<style>
.scrollImage {
 animation-fill-mode:both;
 animation-duration:1.0s;/*アニメーションの出る時間*/
 animation-name: Imagescroll;
 visibility: visible !important;
}

@keyframes Imagescroll {
 0% { opacity: 0; transform: translateY(-20px); }/*アニメーションの出方定義*/
 100% { opacity: 1; transform: translateY(0); }/*アニメーションの出方定義*/
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".entry-content .hatena-fotolife").css("visibility","hidden");
$(window).scroll(function(){
  var windowHeight =$(window).height();
  var windowTop =$(window).scrollTop();
  $(".entry-content .hatena-fotolife").each(function(){
    var objectImage =$(this).offset().top;
    if(windowTop > objectImage - windowHeight*3/4){$(this).addClass("scrollImage")};
  });
});
</script>

 まとめ

jQueryの高さ取得と、CSSのキーフレームアニメーションを利用してみました。

    if(windowTop > objectImage - windowHeight*3/4)

 この部分がふわっと現れる場所を表しています。この数値（3/4）を変更することで表示タイミングをことも出来ます。こういうちょっとした動きってオシャレですよね。