icon

RedirectLink

名前

<ul class="slide-items">
   <li><img src="https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/join-tanabe/030b887f-6f67-4112-9b99-6c56dd96bc00/d52bc0ceed8c7650c7f1a8d345ffcd9a.jpg" alt=""></li>
    <li><img src="https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/join-tanabe/a885e412-cfc6-48cf-8122-9419d4d0f524/c127a2de31e9a8dbb97a2405376bf9ff.jpg" alt=""></li>
   <li><img src="https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/join-tanabe/759c92d6-c4a4-47f7-9435-af2bf4a59014/2285882489f6924e8b7620baa67cd982.jpg" alt=""></li>
   <li><img src="https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/join-tanabe/f85ac383-4eb6-4fa5-8164-78195bd6c996/aadbc22080882d32912fa7ac5b28c51b.jpg" alt=""></li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>

<script>

// eachTextAnimeにappeartextというクラス名を付ける定義
function EachTextAnimeControl() {
  $('.eachTextAnime').each(function () {
    var elemPos = $(this).offset().top - 50;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("appeartext");

    } else {
      $(this).removeClass("appeartext");
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
  //spanタグを追加する
  var element = $(".eachTextAnime");
  element.each(function () {
    var text = $(this).text();
    var textbox = "";
    text.split('').forEach(function (t, i) {
      if (t !== " ") {
        if (i < 1) {
          textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
        } else {
          var n = i / 15;
          textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
        }

      } else {
        textbox += t;
      }
    });
    $(this).html(textbox);
  });

  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
</script>


<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
    $(".slide-items").slick({
    autoplay: true, // 自動再生
    autoSpeed: 3200, // 自動再生スピード
    arrows: false, // 矢印の削除
    fade: true, // スライドをフェードイン・フェードアウト
    cssEase: 'linear',// アニメーション
    speed: 600, // フェードアニメーションの速度設定
});
</script>