コンポーネント集

その他17 

<div class="other-17" id="js-other-17"><span><span>2</span><span>0</span><span>2</span><span>2</span><span>N</span><span>E</span><span>N</span></span><span><span>R</span><span>Y</span><span>U</span><span>K</span><span>O</span><span>U</span><span>G</span><span>O</span><span> </span><span>T</span><span>A</span><span>I</span><span>S</span><span>H</span><span>O</span></span><span><span>M</span><span>U</span><span>R</span><span>A</span><span>K</span><span>A</span><span>M</span><span>I</span><span>S</span><span>A</span><span>M</span><span>A</span><span>!</span><span>!</span></span></div>
 
#js-other-17.other-17
  span
    each char in '2022NEN'
      span #{ char }
  span
    each char in 'RYUKOUGO TAISHO'
      span #{ char }
  span
    each char in 'MURAKAMISAMA!!'
      span #{ char }
 
{
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.other-17';

// 変数
$c_text: #000;

#{ $BLOCK_NAME } {
  font-family: 'DotGothic16', sans-serif;
  line-height: 1;
  font-size: 48px;
  color: $c_text;
  &::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1em;
    border-right: 3px solid $c_text;
    vertical-align: bottom;
    transform: translateY(1px);
    animation: other17BarAnim 2s infinite steps(1, start);
  }
  > span > span {
    display: none;
  }
}

@keyframes other17BarAnim {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
  • URL: /components/raw/other17/other17.scss
  • Filesystem Path: src/components/others/1_20/other17/other17.scss
  • Size: 549 Bytes
  • Content: 
    'use strict';
import { gsap } from 'gsap';

export const other17 = () => {
  const other = new Other17();
  other.init();
}

class Other17 {
  el: HTMLElement;
  constructor() {
    this.el = document.getElementById('js-other-17');
  }

  /**
   * 初期化
   */
  init(): void {
    if (!this.el) return;
    this.textAnim(this.el);
  }

  /**
   * 文字アニメーション
   */
  textAnim(el: HTMLElement): void {
    const tl = gsap.timeline();
    // tl
    //   .to(el.children, {
    //     display: 'inline',
    //     stagger: {
    //       each: 0.15,
    //     },
    //   })
    //   .to(el.children, {
    //     display: 'none',
    //     stagger: {
    //       each: 0.05,
    //     },
    //   }, '+=0.5');
    tl
      .to(el.children[0].children, {
        display: 'inline',
        stagger: {
          each: 0.15,
        },
      })
      .to(el.children[0].children, {
        display: 'none',
        stagger: {
          each: 0.05,
          from: 'end',
        },
      }, '+=0.5')
      .to(el.children[1].children, {
        display: 'inline',
        stagger: {
          each: 0.15,
        },
      }, '+=1')
      .to(el.children[1].children, {
        display: 'none',
        stagger: {
          each: 0.05,
          from: 'end',
        },
      }, '+=0.5')
      .to(el.children[2].children, {
        display: 'inline',
        stagger: {
          each: 0.15,
        },
      }, '+=1');
  }
}
  • URL: /components/raw/other17/other17.ts
  • Filesystem Path: src/components/others/1_20/other17/other17.ts
  • Size: 1.4 KB