gsap

テキスト下から表示

テストタイトルテストタイトルテストタイトル

• HTML
• CSS
• JavaScript

    
<h2 class="g-test01">
  テストタイトルテストタイトルテストタイトル
</h2>
    

    
/*******************************************
テキスト下から表示
*******************************************/
.g-test01 {
    margin-top: 300px;
    display: block;
}
    

    
                  /*******************************************
テキスト表示
*******************************************/

/* 文字列を分割しspanで囲む */
const jsTextElements = document.querySelectorAll('.g-test01');
jsTextElements.forEach(target => {
  let newText = '';
  const text = target.textContent;
  const result = text.split('');
  for (let i = 0; i < result.length; i++) {
    newText += '<span>' + result[i] + '</span>';
  }
  target.innerHTML = newText;
});

/* 以下アニメーション */
const jsText = '.g-test01 span'; // メインビジュアルのタイトル内のspan要素

// 初期状態をセット
gsap.set(jsText, {
  // アニメーションさせない静止状態を指定する
  opacity: 0,
  y: 30,//-にすれば上から表示になる
  display: "inline-block", // 追加
});

// timelineを作成
const tl = gsap.timeline();

tl.to(
  /* タイトル */
  jsText, {
  /* 前のアニメーションが完了する0.1秒前に実行 */
  opacity: 1,
  y: 0,
  stagger: {
    amount: 1,
    from: "start",
    ease: "sine.in"
  }
},

);
    

左に流れるテキスト

• HTML
• CSS
• JavaScript

    
<div class="test02Box">
  <p class="g-test02">
    ・テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
  </p>
  <p class="g-test02">
    ・テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
  </p>
  <p class="g-test02">
    ・テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
  </p>
</div>
    

    
/*******************************************
左に流れるテキスト
*******************************************/
.test02Box {
    padding: 20px 0;
    background-color: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;

    & .g-test02 {

        font-size: 1.2vw;
        white-space: nowrap;
    }

}
    

    
/*******************************************
  左に流れるテキスト
*******************************************/
const test02 = document.querySelectorAll(".g-test02");
const speed = 50; // 速さ（大きいほど遅くなる）

gsap.set(test02, { xPercent: 0 }); // 初期位置をセット

gsap.to(test02, {
  xPercent: -100, // 左に100%移動
  ease: "linear", // 均等な動き
  repeat: -1, // 無限ループ
  duration: speed, // 動作速度
});