1:スマホ画面の作成

main.jsのcover-slideにinviewを付加させるオブザーバーを追加

document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
  const hero = new HeroSlider('.swiper-container');
  hero.start();

// コールバック関数を設ける
  const cb = function (el, inview) {
    if (inview) {
      const ta = new TweenTextAnimation(el);
    ta.animate();
 }
};

// 第1引数にエレメント第二引数にコールバック関数
  const so = new ScrollObserver(".tween-animate-title", cb);
// 第1引数にDOM第二引数にコールバック関数
  const _inviewAnimation = function(el, inview) {
     if (inview) {
// もし画面内に入ってきたらinviewを付加
     el.classList.add('inview');
     }else {
// 画面外になったらinviewを削除
     el.classList.remove('inview');
 }
}
  const so2 = new ScrollObserver(".cover-slide", _inviewAnimation);
});

index.htmlのヒーロスライダーより下に以下を記述

<div id="main-content">
  <section class="houses">
   <div>
    <h2 class="main-title tween-animate-title">Pick up</h2>
    <p class="sub-title tween-animate-title">ピックアップ特集</p>
   </div>
  <div class="houses__inner">
    <div class="houses__item">
     <div class="cover-slide hover-darken">
      <div class="bg-img-zoom img-bg50" style="background-image: url(images/Alstroemeria.jpg)">
      </div>
     </div>
       <p class="houses__title">旬の花</p>
       <p class="sub-title tween-animate-title">4月の旬の花はアルストロメリア</p>
     </div>
    <div class="houses__item">
     <div class="cover-slide hover-darken">
    <div class="bg-img-zoom img-bg50" style="background-image: url(images/Birthday.jpg)">
     </div>
    </div>
     <p class="houses__title">誕生日プレゼント特集</p>
    </div>
  <div class="houses__item">
    <div class="cover-slide hover-darken">
       <div class="bg-img-zoom img-bg50" style="background-image: url(images/Rose-banquet.jpg)">
       </div>
       </div>
    <p class="houses__title">バラ特集</p>
       </div>
       <div class="houses__item">
         <div class="cover-slide hover-darken">
         <div class="bg-img-zoom img-bg50" style="background-image: url(images/peach.jpg)">
       </div>
       </div>
    <p class="houses__title">春の花特集</p>
       </div>
       <button class="btn slide-bg">さらに詳しく</button>
      </section>
     </div>
    </div>
   </div>
<!-- <div class="cover-slide hover-darken">
  <img class="img-zoom" src="images/nemophila.jpg" alt="" />
  </div>
  <button class="btn float">Button</button>
  <button class="btn filled">Button</button>
  <button class="btn letter-spacing">Button</button>
  <button class="btn shadow">Button</button>
  <button class="btn solid">Button</button>
  <button class="btn slide-bg">Button</button>
  <button class="btn cover-3d">Button</button> -->
  <!-- <a class="btn-cubic"><span class="hovering">Now, Hovering</span><span class="default">Button</span></a> -->
  <script src="scripts/vendors/swiper.min.js"></script>
  <script src="scripts/vendors/TweenMax.min.js"></script>
  <script src="scripts/vendors/scroll-polyfill.js"></script>
  <script src="scripts/libs/scroll.js"></script>
  <script src="scripts/libs/text-animation.js"></script>
  <script src="scripts/libs/hero-slider.js"></script>
  <!-- <script src="scripts/libs/mobile-menu.js"></script> -->
  <script src="scripts/main.js"></script>
</body>
</html>

続きを読む →