srcスタートキット

2025-02-16

srcコードのテンプレート、jsによる各種動きのデモが含まれいる

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DEMO20241220</title>
    <link rel="icon" href="img/favicon-vis.png" />
    <!-- css -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <header class="header">
      <div class="inr">
        <h1>DEMOCRACY</h1>
        <div class="gnav">
          <ul class="gnav_list">
            <li class="gnav_item">HOME</li>
            <li class="gnav_item">NEWS</li>
            <li class="gnav_item">WORKS</li>
            <li class="gnav_item">CONTACT</li>
          </ul>
          <div class="ham"><span></span><span></span><span></span></div>
        </div>
      </div>
    </header>
    <main>
      <div class="mv">
        <figure><img src="img/img_mv.png" alt="" /></figure>
      </div>
      <section class="lesson1">
        <h2>LESSON 1</h2>
        <h3>見出しのフェードイン</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
        <h3 class="fadeText-up">下から一文字ずつ</h3>
        <h3 class="fadeText-left">左からフェードイン</h3>
        <h3 class="fadeUpText-scroll">下から一文字ずつ</h3>
      </section>
      <section class="lesson2">
        <div class="box_left">
          <h2>LESSON2</h2>
          <h3>時間差フェードイン</h3>
          <p>見出しのフェードインのパターンを網羅する</p>
        </div>
        <div class="box_right">
          <img src="img/img_timeDifferent.png" alt="" />
        </div>
      </section>
      <section class="lesson3">
        <h2>extra</h2>
        <h3>急遽tabnineを使用してみる</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson3">
        <h2>FADEIN</h2>
        <h3>慣性スクロール</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson4">
        <h2>FADEIN</h2>
        <h3>パララックススクロール</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson5">
        <h2>FADEIN</h2>
        <h3>セクション移動で背景が回転</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson6">
        <h2>FADEIN</h2>
        <h3>次のセクションに移動したら小さくなる</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson7">
        <h2>FADEIN</h2>
        <h3>自動スクロール</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
      <section class="lesson8">
        <h2>FADEIN</h2>
        <h3>スクロールエフェクト</h3>
        <p>見出しのフェードインのパターンを網羅する</p>
      </section>
    </main>
    <footer class="footer">
      <div class="inr">
        <h1>DEMOCRACY</h1>
        <div class="copyright">©️DEMOCRACY2024</div>
      </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

CSS

@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

/*------------------------------------------ 
  全体の設定
  ------------------------------------------*/
* {
  margin: 0;
  padding: 0;
}
/* * {
  outline: 1px solid pink;
} */
html {
  font-size: 62.5% !important;
}
img {
  width: 100%;
}
:root {
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "roboto", serif;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #f2f2f2;
}
/*------------------------------------------ 
  component
------------------------------------------*/
h1 {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
}
h2 {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
}
h3 {
  font-family: var(--font-ja);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
p {
  font-family: var(--font-ja);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
}
.copyright {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.03rem;
}
section {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 150px;
}
/*------------------------------------------ 
  header
------------------------------------------*/
.header {
  background-color: var(--color-gray);
  padding: 20px 0;
  margin-bottom: 30px;
}
.header .inr {
  width: 95%;
  margin: 0 auto;
  background-color: var(--color-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .gnav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.header .gnav_list {
  display: flex;
  gap: 30px;
}
.header .ham {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 35px;
  z-index: 1000;
}
.header .inr .gnav .ham span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  height: 1px;
  background: var(--color-black);
}
.header .inr .gnav .ham span:nth-of-type(1) {
  top: 30%;
  width: 100%;
}
.header .inr .gnav .ham span:nth-of-type(2) {
  top: 50%;
  width: 100%;
}
.header .inr .gnav .ham span:nth-of-type(3) {
  top: 70%;
  width: 100%;
}
/*------------------------------------------ 
  footer
------------------------------------------*/
.footer {
  background-color: var(--color-gray);
  padding: 40px 0;
}
.footer .inr {
  width: 95%;
  margin: 0 auto;
  background-color: var(--color-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*------------------------------------------ 
  mv
------------------------------------------*/
.mv {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 150px;
}
/*------------------------------------------ 
  lesson2
------------------------------------------*/
.lesson2 {
  display: flex;
  justify-content: space-between;
}
.lesson2 .box_right {
  width: 50%;
}

/*------------------------------------------ 
  見出しのフェードイン
------------------------------------------*/
/* fadeText-up のアニメーション用 */
.fadeText-up .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px); /* 下から */
}

/* fadeText-left のアニメーション用 */
.fadeText-left {
  opacity: 0; /* 初期状態で非表示 */
  transform: translateX(-40px); /* 左からスライドイン */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションの設定 */
}

.fadeUpText-scroll {
  transform: translateY(20px); /* 下から出現する効果 */
}

.letter {
  display: inline-block; /* 各文字を個別に操作するため */
  opacity: 0; /* 初期状態で非表示 */
}

JS

/*------------------------------
  fadeUpText
------------------------------*/
function animateTextUp(selector) {
  const textElement = document.querySelector(selector);
  const text = textElement.textContent;

  // テキストを一文字ずつ分割してHTMLに置き換え
  textElement.innerHTML = text
    .split("")
    .map((char) => `<span class="letter">${char}</span>`)
    .join("");

  // 各文字要素を取得
  const letters = textElement.querySelectorAll(".letter");

  // GSAPアニメーションを適用
  gsap.to(letters, {
    opacity: 1,
    y: 0, // Y方向に移動（下から）
    stagger: 0.1, // 一文字ごとの遅延
    duration: 0.5, // アニメーションの時間
    ease: "power2.out", // イージング
  });
}

// 実行
animateTextUp(".fadeText-up");

/*------------------------------
  fadeLeftText
------------------------------*/
function animateTextLeft(selector) {
  const textElement = document.querySelector(selector);

  // GSAPアニメーションを適用
  gsap.to(textElement, {
    opacity: 1, // 透明度を1にする（フェードイン）
    x: 0, // X方向に移動（左から）
    duration: 1, // アニメーションの時間
    ease: "power2.out", // イージング
  });
}

// 実行
animateTextLeft(".fadeText-left");

/*------------------------------
  時間差フェードイン
------------------------------*/
// 左右のフェードインアニメーションを設定する関数
function animateLesson2() {
  const timeline = gsap.timeline();

  // アニメーションの定義
  timeline
    .from(".box_left h2", {
      x: -50,
      opacity: 0,
      duration: 0.8,
      ease: "power2.out",
    })
    .from(
      ".box_left h3",
      { x: -50, opacity: 0, duration: 0.8, ease: "power2.out" },
      "-=0.4"
    )
    .from(
      ".box_left p",
      { x: -50, opacity: 0, duration: 0.8, ease: "power2.out" },
      "-=0.4"
    )
    .from(
      ".box_right img",
      { x: 50, opacity: 0, duration: 0.8, ease: "power2.out" },
      "-=0.4"
    );
}

// 関数を実行
animateLesson2();

/*------------------------------
  fadeUpText-scroll
------------------------------*/

// 必要なGSAPスクリプトを読み込んでいる前提
function animateTextUp(selector) {
  const textElement = document.querySelector(selector);
  const text = textElement.textContent;

  // テキストを一文字ずつ分割してHTMLに置き換え
  textElement.innerHTML = text
    .split("")
    .map((char) => `<span class="letter">${char}</span>`)
    .join("");

  // 各文字要素を取得
  const letters = textElement.querySelectorAll(".letter");

  // ScrollTriggerを使ってGSAPアニメーションを設定
  gsap.to(letters, {
    opacity: 1,
    y: 0, // Y方向に移動（下から）
    stagger: 0.1, // 一文字ごとの遅延
    duration: 0.5, // アニメーションの時間
    ease: "power2.out", // イージング
    scrollTrigger: {
      trigger: textElement, // トリガーとなる要素
      start: "top 80%", // ビューポートのどの位置で開始するか
      toggleActions: "play none none none", // アニメーションの再生動作
    },
  });
}

// 実行
document.addEventListener("DOMContentLoaded", () => {
  animateTextUp(".fadeUpText-scroll");
});

/*------------------------------
  fadeUpText
------------------------------*/
function animateTextUp(selector) {
  const textElement = document.querySelector(selector);
  const text = textElement.textContent;

  // テキストを一文字ずつ分割してHTMLに置き換え
  textElement.innerHTML = text
    .split("")
    .map((char) => `<span class="letter">${char}</span>`)
    .join("");

  // 各文字要素を取得
  const letters = textElement.querySelectorAll(".letter");

  // GSAPアニメーションを適用
  gsap.to(letters, {
    opacity: 1,
    y: 0, // Y方向に移動（下から）
    stagger: 0.1, // 一文字ごとの遅延
    duration: 0.5, // アニメーションの時間
    ease: "power2.out", // イージング
  });
}

// 実行
animateTextUp(".fadeText-up");