背景色の後に文字が表示されるアニメーションのjQueryの発火条件の変更

Question

https://from44.co.jp/
上記サイトのSERVICE部分のようなアニメーションを実装したいと考えています。
写真ではなく、アニメーションの後に文字を表示させたいと考えています。

https://web.runland.co.jp/blog_cate0/post-2944
このサイトを参考に書いているのですが、アニメーションが正しく動きません。
アニメーションさせるテキストの位置が、ページを読み込んだ時にあらかじめ表示されているため、発火条件を変えれば動くのではないかと考えています。

<div class="wrap">
 <div class="inner">
    <span class="mask">テキスト</span><br>
     <span class="mask">テキスト</span>
  </div>
</div>

/*----追記---*/
.wrap{
    position: relative;
    background-image: url("../img/bg.jpg");
    background-size: cover;
    background-position: center;
    height: 84vh;
    font-family: 'Noto Sans JP',sans-serif;
    }
.inner{
    position: absolute;
    top: 50%;
    right: 16%;
     -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: right;
}
/*----追記ここまで---*/

.inner div span{
    display: inline-block;
    font-size: 2.8rem;
    color: #fff;
    background-color: #000;
    margin-bottom:  20px;
    padding: 6px 10px;
}
.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%"});
      });
      
    }
  
  });
});
コード

Comments

[shinoharat]

使っている jQuery のバージョンを教えてください。

[torahiro]

jquery-3.1.1を使用しています。

[azne]

使っているのはjQueryだけですか？
jquery.inviewというプラグインを使った記述のように見えますが…

[torahiro]

jquery.easing.1.3.jsとjquery.inview.jsも使用しています。
htmlとcssはひと通り学習したのですが、JavaScriptとjQueryはまだあまり理解できていません。
すみませんが、よろしくお願いいたします。

Answer 1

原因が分かりました。

css 側が mask_wrap
jquery 側が mask-wrap

アンダーバーとハイフンの違いがあるので動かないみたいです。
どちらも mask-wrap に統一すればすんなり動きました。

Comments

[torahiro]

ありがとうございます！ハイフンに変えたところ、きちんと動きました。
何日も悩んでいたのですが、次からは基本的なところも確認しようと思います。

ちなみに、このアニメーションを動かすとtext-align: right;で指定してあるテキストが左揃え、positionで指定した位置がわずかに変わってしまうのですが何が原因でしょうか？（css等追記しました）
.mask-wrap .maskなどにpositionが使われている為かと考えているのですが、色々試しても上手くいかない状態です。
度々すみませんが、よろしくお願いいたします。