1:ヘッダーやサイドバーを作成しベースを完成させる

モバイルメニューのところで作成したstyle.scssを流用する

_mobile-menu.scssにリネームしてmodulesに貼り付けする

style.scssで読み込むのも忘れずに

_mobile-menu.scssに以下の記述を追加

$cMenuClose: Black;
$cMenuOpen: Black;

.mobile-menu {
  position: fixed;
  right: 0;
// 上から60px
  top: 60px;
  width: 300px;

  & .logo {
    padding: 0 40px;
    font-size: 38px;
}
// BEM(Block Element Modifier)
  &__btn {
    background-color: unset;
    border: none;
    outline: none !important;
    cursor: pointer;
 
    & > span {
      background-color: $cMenuClose;
      width: 35px;
      height: 2px;
      display: block;
      margin-bottom: 9px;
      transition: transform 0.7s;
 
    &:last-child {
      margin-bottom: 0;
  }
 }
}
// 黒い膜をつける
    &__cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      opacity: 0;
      visibility: hidden; 
      transition: opacity 1s;
      cursor: pointer;
      z-index: 200;
 }
  &__main {
    padding: 0;
// ３Dアニメーションをしたいとき親の要素につける
    perspective: 2000px;
    transform-style: preserve-3d;
}
  &__item {
// ・をけす
    list-style: none;
    display: block;
    transform: translate3d(0, 0, -1000px);
    padding: 0 40px;
    transition: transform 0.3s, opacity 0.2s;
    opacity: 0;
}
  &__link {
// 左右いっぱいに広がるようにする
    display: block;
    margin-top: 30px;
    color: $cBlack;
// 下線を削除
   text-decoration: none !important;
  }
}

.menu-open {
// クリックしたときに左下にずれるアニメーションの設定
  & #container {
    transform: translate(-300px, 60px);
    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}
 // クリックされたときの記述を書く
  & .mobile-menu {
  &__cover {
    opacity: 1;
    visibility: visible;
}
  &__item {
    transform: none;
    opacity: 1;
// 要素を少しずつ遅延して表示
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.07s;
  }
 }
}
  &__btn {
    & > span {
      background-color: $cMenuOpen;
 
  &:nth-child(1) {
    transition-delay: 70ms;
    transform: translateY(11px) rotate(135deg);
}
  &:nth-child(2) {
    transition-delay: 0s;
    transform: translateX(-18px) scaleX(0);
}
  &:nth-child(3) {
    transition-delay: 140ms;
    transform: translateY(-11px) rotate(-135deg);
    }
   }
  }
 }
}

続きを読む →

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>

続きを読む →

1:テキストアニメーションの実装

テキストアニメーションで作成したmain.js・_mixin.scss・scroll-polyfill.js_・scroll.js・style.scss・text-animation.jsをこのように配置する。

貼り付けたmain.js内の以下を切り取り

scripts/main.jsにこのように貼り付け

続きを読む →

これまでの知見からサイトを実際に作ってみる

1:まずするべきこと(レスポンシブ対応)

HTMLに設定を追加する

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

// スマホ画面の設定
@import "breakpoints/base";
// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}
// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}

@media (min-width: 960px) {
@import "breakpoints/960up";
}

@media (min-width: 1280px) {
@import "breakpoints/1280up";
}
// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}
// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}

7.5から続きます

ヒーロースライダーを作成する

作成するもの

こちらでSwiperを利用する(今回はswiper.min.jsを利用)

https://swiperjs.com/get-started

導入方法

HTMLに記述を追加することと下をコピー&ペースト

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSSにこれも追加すること

.swiper {
  width: 600px;
  height: 300px;
}

SCSSの記述

@import "mixin";

  $cWhite: white;

@import 'hero-slider';

main.jsの記述

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

HTMLの記述

続きを読む →