背景色（ベタ塗り）の後に画像が表示されるJSエフェクトを使ったアニメーション

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>

<div class="mask">
 <p>あいうえおあいうえおあいうえお</p>
 <p>かきくけこかきくけこかきくけこ</p>
</div>

<p class="mask">さしすせそ<br>さしすせそ</p>
<span class="mask">abcdefg</span>

<span class="mask"><img src="https://picsum.photos/500/300"></span>
<span class="mask"><img src="https://picsum.photos/400/300"></span>
<span class="mask"><img src="https://picsum.photos/300/300"></span>
<span class="mask"><img src="https://picsum.photos/200/300"></span>

.mask_wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  margin-bottom: .25em;
  left: -100%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

$(function(){
  speed = 1000;
  easing = "easeInOutCubic";
  // タグ生成
  $(".mask").wrap("<div class='mask-wrap'>");
  $(".mask").append("<div class='mask-bg'></div>");
  $('.mask').on('inview',function(event,isInView,visiblePartX,visiblePartY){
    if(isInView){
      
      $(this).stop().animate({"left":"0%"},function(){
        $(this).find(".mask-bg").stop().animate({"left":"100%"});
      });
      
    }
  
  });
});