コンポーネント集

その他13 

<div class="other-13" id="js-other-13"><i class="other-13__icon">▶</i>ページ表示後3秒で引っ込む</div>
 
#js-other-13.other-13
  i.other-13__icon ▶
  | ページ表示後3秒で引っ込む
 
{
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.other-13';

// 変数

#{ $BLOCK_NAME } {
  position: fixed;
  display: flex;
  align-items: center;
  top: 20px;
  right: 0;
  background: #000;
  color: #fff;
  padding: 20px;
  cursor: pointer;
  transition: transform .5s;
  &.--loaded {
    transform: translateX(calc(100% - 60px));
    &:hover {
      transform: translateX(0);
    }
  }

  &__icon {
    display: block;
    width: 20px;
    margin-right: 20px;
    flex-shrink: 0;
  }
}
  • URL: /components/raw/other13/other13.scss
  • Filesystem Path: src/components/others/1_20/other13/other13.scss
  • Size: 458 Bytes
  • Content: 
    'use strict';

export const other13 = () => {
  const other = new Other13();
  other.init();
}

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

  /**
   * 初期化
   */
  init(): void {
    if (!this.el) return;
    setTimeout(() => {
      this.el.classList.add('--loaded');
    }, 3000);
  }
}
  • URL: /components/raw/other13/other13.ts
  • Filesystem Path: src/components/others/1_20/other13/other13.ts
  • Size: 362 Bytes

参考