コンポーネント集

その他08 

<div class="other-08" id="js-other-08">
    <div class="other-08__content">テキストが入ります。テキストが入ります。テキストが入ります。</div>
    <div class="other-08__close js-other-08-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
            <path d="M150,10A140,140,0,1,0,290,150,140,140,0,0,0,150,10"></path>
        </svg></div>
</div>
 
.other-08#js-other-08
  .other-08__content #{ text }
  .other-08__close.js-other-08-close
    svg(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300')
      path(d='M150,10A140,140,0,1,0,290,150,140,140,0,0,0,150,10')
 
{
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.other-08';

// 変数
$color_primary: #0089d8;
$color_white: #fff;
$duration_default: 0.6s;
$easing_default: ease-in-out;

#{ $BLOCK_NAME } {
  position: fixed;
  right: 12px;
  bottom: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: $color_white;
  background: $color_primary;

  &__content {
    width: 300px;
    padding: 64px 48px;
  }

  &__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 52px;
    height: 52px;
    cursor: pointer;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 20px;
      height: 2px;
      margin: auto;
      content: '';
      background: $color_white;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    & > svg {
      opacity: 0;
      fill: none;
      stroke: $color_white;
      stroke-dasharray: 880;
      stroke-dashoffset: -440;
      stroke-width: 4px;
      transition: all $duration_default $easing_default;
    }

    &:hover > svg {
      opacity: 1;
      stroke-dashoffset: 0;
      transform: rotate(360deg);
    }
  }
}
  • URL: /components/raw/other08/other08.scss
  • Filesystem Path: src/components/others/1_20/other08/other08.scss
  • Size: 1.2 KB
  • Content: 
    'use strict';

import { gsap } from 'gsap';

export const other08 = () => {
  const other = new Other08('js-other-08', 'js-other-08-close');
  other.init();
}

class Other08 {
  el: HTMLElement;
  hideEls: HTMLCollectionOf<Element>;
  constructor(elId: string, hideClass: string) {
    this.el = document.getElementById(elId);
    this.hideEls = document.getElementsByClassName(hideClass);
  }

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

  /**
   * 要素を非表示にする
   */
  hide(): void {
    const self = this;
    gsap.to(this.el, {
      duration: 1,
      y: 30,
      opacity: 0,
      onComplete() {
        // 非表示後に要素を削除
        self.el.remove();
      },
    });
  }

  /**
   * 非表示ボタンクリック時の挙動
   */
  onHideElsClick() {
    [...this.hideEls].forEach(el => {
      el.addEventListener('click', e => {
        e.preventDefault();
        this.hide();
      });
    });
  }
}
  • URL: /components/raw/other08/other08.ts
  • Filesystem Path: src/components/others/1_20/other08/other08.ts
  • Size: 1 KB