月別アーカイブ: 2021年9月

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

続きを読む →

contact

コメントを残す

当ブログに関するお問い合わせは、以下のフォームよりお願いいたします。

なお、内容によってはお答えできない場合がございますこと、あらかじめご了承ください。

    JavaScript5.6(クラス継承)

    コメントを残す

    5から続きます

    3:thisを使いこなす

    mixinとSCSSは1と同じなので省略

    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">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
</head>
<body>
  <div id="container">
  <div class="animate-title">
    PLAY ANIMATION
  </div>
  <div class="animate-title-2">
    ANIMATIONNNNNN
  </div>
    <button id="btn">Animation</button>
  </div>
  <script src="main.js"></script>
</body>
</html>

    main.jsの記述

    document.addEventListener("DOMContentLoaded", function () {
  const btn = document.querySelector("#btn");
  const ta = new TextAnimation(".animate-title");
  const ta2 = new TextAnimation(".animate-title-2");
  ta.animate();
  ta2.animate();
// btn.addEventListener('click', ta.animate.bind(ta));
// bindを使いたくないとき
  btn.addEventListener("click", function () {
    ta.animate();
  });
});

// フリーな位置にあるとグローバルオブジェクト(window)を参照する
console.log(this);

// new演算子を使うことによってオブジェクトを生成するためのもの
class TextAnimation {
  constructor(el) {
// 変数taとta2参照する
  console.log(this);
  this.el = document.querySelector(el);
  this.chars = this.el.innerHTML.trim().split("");
  this.el.innerHTML = this._splitText();
}
_splitText() {
  return this.chars.reduce((acc, curr) => {
  curr = curr.replace(/\s+/, " ");
  return `${acc}<span class="char">${curr}</span>`;
}, "");
}

// animate() {
// console.log(this);
// this.el.classList.toggle("inview");
// }

// タイムアウトを設定するとき
// animate() {
// // windowは省略できるよ
// window.setTimeout(function (){
// // ここのthisはwindowsオブジェクトを参照する
// console.log(this);
// this.el.classList.toggle('inview');
// // bindを用いたthisの束縛
// }.bind(this));
// }
// }

// こちらの書き方でもOK(bindを使わないときの記法)
animate() {
  const _that = this;
    setTimeout(function () {
    console.log(_that);
   _that.el.classList.toggle('inview');
  },1000
 )};
}

    続きを読む →