JavaScript11(サイト作成(3))

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>

_image-slide.scssのmargin-bottom: 80vh; の記述を削除

_hero-slider.scssに以下を記述

_base.scssに以下の記述を追加

.content-width {
  width: 90%;
  margin: 0 auto;
  max-width: $contentMaxWidth;
}
.houses {
// 左右に余白を追加:htmlにあまり記述したくないときにオススメ
@extend .content-width;
@extend .mb-lg;

  &__inner {
    @extend .flex;
}

  &__title {
    @extend .font-lr;
    @extend .mb-sm;

  &__btn {
    text-align: center;
// ボタンの位置を調整する
    flex-basis: 100%;
}
}
.main-title {
//継承することで、画面の大きさが変わっても今の画面の設定が適応される
  @extend .font-lg;
  font-weight: 600;
  margin-bottom: 0;
// 一行に重ならないようにする
  display: block;
}
.sub-title {
  @extend .font-sm;
  color: $cSubTitle;
}
//次のflexでレスポンシブ対応するのに必要
.flex {
  display: flex;
  flex-direction: column;
}

_variables.scssに以下の記述を追加

$cWhite: white;
$cBlack: black;
$cSubTitle: #535353;
$cBgGray: #eaebe6;
$cWineRed: #904669;
$contentMaxWidth: 1070px;
$navHeight: 100px;

このようになっていればOK

2:Flexboxでレスポンシブ対応する

_600up.scssに以下の記述を追加

// Stylesheet: 600px以上のタブレットやモニタで適用
.flex {
// 横に2列したいときの設定
  flex-direction: row;
// これを設定しないとflex-basisが変わらない
  flex-wrap: wrap;
}

.houses {
  &__item {
     flex-basis: 50%;
     margin-bottom: 60px;
 }
}

写真が2列になっていればOK

index.htmlに以下の記述を追加(/sectionから)

</section>
<section class="popular">
  <div class="popular__header">
    <h2 class="main-title tween-animate-title">Popular Place</h2>
    <p class="sub-title tween-animate-title">人気の花畑観光地のツアー</p>
  </div>
　　　<!-- グレーの背景の部分 -->
    <div class="popular__inner appear up">
      <div class="popular__container">
      <div class="popular__item item">
    <div class="popular__img">
     <img src="images/Georgia.jpg" alt="" />
    </div>
    <div class="popular__title">Georgia</div>
    </div>
      <div class="popular__item item">
      <div class="popular__img">
        <img src="images/Montreal.jpg" alt="" />
      </div>
    <div class="popular__title">Montreal</div>
    </div>
    <div class="popular__item item">
    <div class="popular__img">
      <img src="images/Flowers3.jpg" alt="" />
    </div>
    <div class="popular__title">北海道</div>
    </div>
   <div class="popular__item item">
     <div class="popular__img">
   <img src="images/Shibazakura.jpg" alt="" />
   </div>
   <div class="popular__title">千葉</div>
   </div>
   <div class="popular__btn appear up">
     <button class="btn cover-3d item">
   <span>一覧から探す</span>
     </button>
   </div>
  </div>
 </div>
</section>

_base.scssに以下の記述を追加

popular {
  &__inner {
    position: relative;
// 下のコメントアウトされているところの設定
   @include p-base($top: 10%, $height: 90%) {
   background: $cBgGray;
}
// &::before {
// content: '';
// position: absolute;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 90%;
// background-color: $cBgGray;
// }
}
  &__header {
// 横幅の余白を追加
  @extend .content-width;
}
  &__container {
// 画像を前面にする
    position: relative;
    z-index: 2;
    @extend .flex;
// 横幅の余白を追加
    @extend .content-width;
    @extend .pb-sm;
}

  &__title {
    @extend .font-md;
    @extend .mb-sm;
}

  &__btn {
    text-align: center;
    flex-basis: 100%;
// 余白追加
    @extend .mb-lg;
}

  &__img {
    height: 150px;
// はみ出た部分を非表示
    overflow: hidden;
    margin-bottom: 5px;

  & > img {
    object-fit: cover;
// 縮小したとき下で揃える
    object-position: bottom;
    height: 100%;
    width: 100%;
  }
 }
}

_600up.scssに以下の記述を追加

.popular {
  &__container {
// 余白を真ん中にしたい
    justify-content: space-between;
}

  &__item {
    flex-basis: 47%;
 }
}

_960up.scssに以下の記述を追加

// Stylesheet: 960px以上のモニタで適用

.font-sm {
  font-size: 16px;
}
.font-md {
  font-size: 19px;
}
.font-lr {
  font-size: 23px;
}
.font-lg {
  font-size: 36px;
}
.mb-lg {
  margin-bottom: 150px !important;
}
.pb-lg {
  padding-bottom: 150px !important;
}

.popular {
  &__item {
    flex-basis: 25%;
}

  &__img {
    height: 335px;
}
}

_1280up.scssに以下の記述を追加

// Stylesheet: 1280px以上のモニタで適用

.world {
  &__inner {
    padding: 50px 150px;
 }
}
.popular {
  &__item {
    flex-basis: 23%;
 }
}

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

とあるITエンジニアのブログ

毎日少しずつ成長する

1:スマホ画面の作成

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

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

_image-slide.scssのmargin-bottom: 80vh; の記述を削除

_hero-slider.scssに以下を記述

_base.scssに以下の記述を追加

_variables.scssに以下の記述を追加

2:Flexboxでレスポンシブ対応する

_600up.scssに以下の記述を追加

写真が2列になっていればOK

index.htmlに以下の記述を追加(/sectionから)

_base.scssに以下の記述を追加

_600up.scssに以下の記述を追加

_960up.scssに以下の記述を追加

_1280up.scssに以下の記述を追加

画面のサイズを変えて以上がないのを確認できたらOK

コメントを残すコメントをキャンセル

1:スマホ画面の作成

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

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

_image-slide.scssのmargin-bottom: 80vh; の記述を削除

_hero-slider.scssに以下を記述

_base.scssに以下の記述を追加

_variables.scssに以下の記述を追加

2:Flexboxでレスポンシブ対応する

_600up.scssに以下の記述を追加

写真が2列になっていればOK

index.htmlに以下の記述を追加(/sectionから)

_base.scssに以下の記述を追加

_600up.scssに以下の記述を追加

_960up.scssに以下の記述を追加

_1280up.scssに以下の記述を追加

画面のサイズを変えて以上がないのを確認できたらOK

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル