Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

CSSでグリッチっぽい表現をやる

More than 1 year has passed since last update.

jdIOWpguRq.gif

PIXIV TECH FES. ← このサイトかなりカッコいいですよね(私は行けませんが…)(担当したのは@yui540です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>

image.png2

まずグリッチしたい要素(今回は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>

image.png

.text-wrappern + 1個に増やす(nは分割する数です)、今回は10分割するので11個に増やします

最後の要素に.placeholderクラスを付与しておく(次からのCSSでの見通しが良くなるからです(使わない場合は:nth-of-last-typeなどでどうにか気合でやる))

SCSS

forループとかを使うと一般化ができるのでかなり嬉しいのでSCSSで書く、リセットCSSなどでmargin等が消えている前提でCSSを書いていきます

1

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

概略図
mspaint_mK3RjqrKDt.png

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;
}

image.png

すべての.text-wrapper要素に必要なスタイルを当てる(文字をデカくする)

.placeholder要素は場所を取るだけの要素なので見えないようにしておきます

.placeholder以外の要素はすべて重ね合わせてある状態になっています

概略図

image.png

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%);
      }
    }
  }
}

A4imFr318C.gif

気合で理解してほしいです

文字のような要素ではwhite-space: nowrapを指定しないと改行されて壊れます

概略図
image.png

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%);
      }
    }
  }
}

image.png

おー斬れました よかったですね

後はmathsassなどを使って乱数っぽく座標をずらしたりすると良いと思います(29% * sin(1.7922rad * cos(1.9877777777deg * $i) + $i * .7rad)など)、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%);
      }
    }
  }
}

作例

画像でも応用できる
odFwwtFj7J.gif

transform: skew()などをやるとかなり意味がわからない動きになってメチャクチャ面白い
iM40d4seu6.gif

以上です

SnO2WMaN
楽園の素敵なフロントエンジニア / Javascriptを書く程度の能力
http://sno2wman.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away