CSS로 글리치 같은 표현을 한다

PIXIV TECH FES. ← 이 사이트 꽤 멋지네요 (나는 갈 수 없습니다만…) (담당한 것은 입니다 1 )

CSS로 문자를 분할합니다, 귀찮기 때문에 구성은 Parcel 로 갑니다, JavaScript는 사용하지 않습니다만 현실적인 곳을 생각하면 필요합니다(애니메이션의 발화를 제어하는데라든지…)

yarn add parcel-bundler -D
npx parcel src/index.html

이 기사는 스스로도 하늘에서 거는 자신이 없기 때문에 비망록으로서 써 남겨 둡니다 (애니메이션까지는 번거롭게 쓰여져 쓰지 않게 되었습니다, 쓰는 것은 문자 분할까지입니다)

HTML

우선 HTML에서

1

<body>
  <div class="wrapper">
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
  </div>
</body>

2

우선 글리치하고 싶은 요소(이번은 p )를 .text-wrapper 로 둘러싼다.text-wrapper 를 더 큰 .wrapper

2

<body>
  <div class="wrapper">
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper"><p>そのツイート、切らせてもらう</p></div>
    <div class="text-wrapper placeholder"><p>そのツイート、切らせてもらう</p></div>
  </div>
</body>

.text-wrapper
마지막 요소에 n + 1 클래스를 부여해 둔다(다음으로부터의 CSS로의 전망이 좋아지기 때문입니다(사용하지 않는 경우는 n 등으로 어떻게든 기합으로 한다))

SCSS

for 루프 등을 사용하면 일반화가 가능하기 때문에 꽤 기쁘기 때문에 SCSS로 쓰고, 리셋 CSS 등으로 margin 등이 사라지고있는 전제로 CSS를 써 갑니다

1

.wrapper {
  position: absolute;
  top: 25px;
  left: 25px;
}

개략도

2

.wrapper {
  position: absolute;
  top: 25px;
  left: 25px;
}

.text-wrapper {
  font-size: 3rem;
}

.text-wrapper.placeholder {
  visibility: hidden;
}

.text-wrapper:not(.placeholder) {
  position: absolute;
  top: 0;
  left: 0;
}

모든 .placeholder 요소에 필요한 스타일을 맞추기
:nth-of-last-type 요소는 장소를 취하는 것만의 요소이므로 보이지 않도록 해 둡니다.
.text-wrapper 이외의 요소는 모두 중첩되어 있는 상태가 되어 있습니다

개략도

3

.wrapper {
  position: absolute;
}

.text-wrapper {
  font-size: 3rem;
}

.text-wrapper.placeholder {
  visibility: hidden;
}

.text-wrapper:not(.placeholder) {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  overflow: hidden;
  & > p {
    position: absolute;
    top: 0;
    white-space: nowrap;
  }
  @for $i from 1 through 10 {
    &:nth-of-type(#{$i}) {
      left: ($i - 1) * 10%;
      & > p {
        left: -(($i - 1) * 100%);
      }
    }
  }
}

기합으로 이해하고 싶습니다.

문자와 같은 요소에서는 .placeholder 를 지정하지 않으면 개행되어 부서집니다

개략도

4

.text-wrapper:not(.placeholder) {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  overflow: hidden;
  & > p {
    position: absolute;
    top: 0;
    white-space: nowrap;
  }
  @for $i from 1 through 10 {
    &:nth-of-type(#{$i}) {
      top: ($i * 25%); // ← ここで文字を斬る
      left: ($i - 1) * 10%;
      & > p {
        left: -(($i - 1) * 100%);
      }
    }
  }
}

오, 내가 좋았어.

후에는 mathsass 등을 사용하여 난수처럼 좌표를 어긋나거나 하면 좋다고 생각합니다( .placeholder 등), transform, translate 등을 구사해 노력해 주세요

일반화

.text-wrapper:not(.placeholder) {
  $n: 30;

  position: absolute;
  top: 0;
  left: 0;
  width: (100% / $n);
  height: 100%;
  overflow: hidden;
  & > p {
    position: absolute;
    top: 0;
    white-space: nowrap;
  }
  @for $i from 1 through $n {
    &:nth-of-type(#{$i}) {
      left: ($i - 1) * (100% / $n);
      & > p {
        left: -(($i - 1) * 100%);
      }
    }
  }
}

작례

이미지에서도 적용 가능

white-space: nowrap 등을 하면 상당히 의미를 모르는 움직임이 되어 메척차 재미있다

이상

htps : // 라고 해서 r. 코 m/유이 540/s 타츠 s/1217733679021117440 ↩

htps : // 라고 해서 r. 이 m/_로타렌_/s타츠 s/1126783024870244352 ↩

Reference

이 문제에 관하여(CSS로 글리치 같은 표현을 한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/SnO2WMaN/items/e0582b64c41f31fc92cb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다