「JavaScript」カテゴリーアーカイブ

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>

続きを読む →

JavaScript10(サイト作成(2))

コメントを残す

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

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

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

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

続きを読む →

JavaScript9(サイト作成(1))

コメントを残す

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

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

HTMLに設定を追加する

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

style.scssに以下のような設定をする

// スマホ画面の設定
@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";
}

モバイルファーストが基本

続きを読む →

JavaScript8(ヒーロースライダー)

コメントを残す

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の記述

続きを読む →

Javascript7.5(ページローダー)

コメントを残す

7から続きます

2:ページローダーの実装

作成するもの

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
  <link rel="stylesheet" href="loader.css">
  <script src="./pace.js"></script>
</head>
<body>
  <div id="global-container">
    <a href="https://github.hubspot.com/pace/docs/welcome/" target="_blank">PaceJs</a>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<style>
img {
 max-width: 100%;
}
</style>
  </div>
</body>
</html>

SCSSの記述

続きを読む →

JavaScript7(モバイルメニュー)

コメントを残す

1:スマホ画面用のメニューを作る(mixinはいつもどおりなので省略)

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 全体を囲むglobal-cotainerをさくせい-->
  <div id="global-container">
<!-- -->
  <div id="container">
  <div class="mobile-menu__cover"></div>
<header class="header">
  <button class="mobile-menu__btn">
  <span></span>
  <span></span>
  <span></span>
  </button>
</header>
  </div>
<!-- __２つあるのはSCSSにて -->
  <nav class="mobile-menu">
    <ul class="mobile-menu__main">
      <li class="mobile-menu__item">
       <a class="mobile-menu__link" href="#">
        <span class="main-title">Our Service</span>
        <span class="sub-title">サービスについて</span>
       </a>
      </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
        <span class="main-title">About us</span>
        <span class="sub-title">私達について</span>
      </a>
     </li>
     <li class="mobile-menu__item">
      <a class="mobile-menu__link" href="#">
       <span class="main-title">Contact us</span>
       <span class="sub-title">コンタクト方法</span>
      </a>
     </li>
    </ul>
   </nav>
</div>
<script src="main.js"></script>
</body>
</html>

main.jsの記述

続きを読む →

SCSS(カバースライド)

コメントを残す

カバースライドアニメーションを作る

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
<!-- ホバーしたときに暗くする -->
    <!-- <div class="cover-slide hover-darken inview">
<img class="img-zoom" src="images/image-1.jpg" alt="">
  </div> -->
<!-- アス比を保ちたいときの設定 -->
  <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div>
  </div>
</body>
</html>

mixinの記述

@mixin animation($name, $duration: 1s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
 }
}

SCSSの記述

続きを読む →

JavaScript6.2(スライドアニメーション)

コメントを残す

6.1から続きます

3:スライドアニメーションをスクロールの監視で発火する

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="container">
  <!-- <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div> -->
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
  <div class="cover-slide hover-darken">
   <img class="img-zoom" src="images/image-1.jpg" alt="" />
  </div>
</div>
  <script src="scroll-polyfill.js"></script>
  <script src="scroll.js"></script>
  <script src="main.js"></script>
</body>
</html>

SCSSの記述

続きを読む →

Javascript6.1(リファクタリング+機能追加)

コメントを残す

６から続きます。

2:リファクタリング+機能追加

mixinはいつもどおりなので省略

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <section>
    <div class="animate-title">Start Animation.</div>
  </section>
  <section>
    <div class="animate-title">Use what you have.</div>
  </section>
  <section>
    <div class="animate-title">Do what you can.</div>
  </section>
  <script src="text-animation.js"></script>
  <script src="scroll-polyfill.js"></script>
  <script src="scroll.js"></script>
  <script src="main.js"></script>
</body>
</html>

<script src=”scroll-polyfill.js”></script>を追加

続きを読む →

JavaScript6(画面のスクロールを検知して発火)

コメントを残す

5.5から続く

1:画面のスクロールを検知してテキストアニメーションをする

mixinはいつもどおりなので省略

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>
<body>
  <section>
    <div class="animate-title">Start Animation</div>
  </section>
  <section>
    <div class="animate-title">Use what you have.</div>
  </section>
  <section>
    <div class="animate-title">Do what you can.</div>
  </section>
<!-- main.jsよりも先に読み込ませる -->
  <script src="text-animation.js"></script>
  <script src="main.js"></script>
</body>
</html>

SCSSの記述

@import "mixin";
html {
  font-family: "Teko", sans-serif;
}
body {
  margin: 0;
}
section {
  position: relative;
  height: 100vh;
  background-color: teal;

  &:nth-child(2) {
    background-color: mediumvioletred;
}
  &:nth-child(3) {
    background-color: orange;
 }
}
.animate-title,
.tween-animate-title {
  position: absolute;
// 文字が画面中央に来るようにする
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  font-size: 2em;

  &.inview {
    opacity: 1;
  & .char {
    display: inline-block;
 }
}
  & .char {
    opacity: 0;
 }
}

.animate-title.inview .char {
@include animation(
$name: kf-animate-chars,
$duration: 0.5s,
$timing-function: cubic-bezier(0.39, 1.57, 0.58, 1),
$fill-mode: both
);

@for $i from 1 through 30 {
  &:nth-child(#{$i}) {
    animation-delay: $i * 0.04s;
  }
 }
}

@keyframes kf-animate-chars {
0% {
  opacity: 0;
  transform: translateY(-50%);
}

100% {
  opacity: 1;
  transform: translateY(0);
 }
}

main.jsの記述

続きを読む →