Web制作 × AI

【CSS】@keyframesを使用してテキストにノイズが走ったようにブレさせるグリッチエフェクトを実装する方法

コーディングテクニックの実装内容

今回はWeb制作におけるテキストのエフェクトに関する内容です。@keyframesを使用してテキストにノイズが走ったようにブレさせるグリッチエフェクトを実装する方法を紹介します。

コーディングテクニックの使いどころ

見出しのテキストなどに使用すると効果的です。ページアクセス時にメインビジュアル内のタイトルに適用しても効果的です。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

CSS,JavaScriptの記述内容

body {
  overflow: hidden;
  background: #000;
}

.block {
  margin: 70px auto 0;
}

.block p {
  position: relative;
  font-size: 100px;
  text-align: center;
  color: #fff;
}

.block p span {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.block.active  p span {
  opacity: 1;
  animation: anime 0.8s 1 alternate-reverse 1s;
}

@keyframes anime {
  0% {
    left: -10px;
    clip: rect(10px, 9999px, 63px, 0);
  }
  4% {
    clip: rect(137px, 9999px, 150px, 0);
  }
  8% {
    clip: rect(82px, 9999px, 178px, 0);
  }
  12% {
    left: -2px;
    clip: rect(85px, 9999px, 125px, 0);
  }
  16% {
    clip: rect(223px, 9999px, 258px, 0);
  }
  20% {
    left: 10px;
    clip: rect(100px, 9999px, 146px, 0);
  }
  24% {
    clip: rect(41px, 9999px, 72px, 0);
  }
  28% {
    clip: rect(9px, 9999px, 45px, 0);
  }
  32% {
    clip: rect(136px, 9999px, 164px, 0);
    filter: hue-rotate(-25deg);
  }
  36% {
    left: -9px;
    clip: rect(84px, 9999px, 116px, 0);
  }
  40% {
    top: 7px;
    clip: rect(229px, 9999px, 315px, 0);
  }
  44% {
    clip: rect(37px, 9999px, 73px, 0);
  }
  48% {
    clip: rect(163px, 9999px, 180px, 0);
  }
  52% {
    clip: rect(205px, 9999px, 244px, 0);
  }
  56% {
    left: 6px;
    clip: rect(135px, 9999px, 170px, 0);
  }
  60% {
    clip: rect(14px, 9999px, 100px, 0);
  }
  64% {
    left: -2px;
    clip: rect(116px, 9999px, 129px, 0);
  }
  68% {
    clip: rect(37px, 9999px, 69px, 0);
  }
  72% {
    top: -9px;
    clip: rect(232px, 9999px, 264px, 0);
  }
  76% {
    left: -8px;
    clip: rect(100px, 9999px, 196px, 0);
    filter: hue-rotate(35deg);
  }
  80% {
    clip: rect(199px, 9999px, 245px, 0);
  }
  84% {
    clip: rect(37px, 9999px, 73px, 0);
  }
  88% {
    left: -10px;
    clip: rect(1px, 9999px, 296px, 0);
  }
  92% {
    clip: rect(141px, 9999px, 272px, 0);
  }
  96% {
    clip: rect(33px, 9999px, 65px, 0);
  }
  100% {
    clip: rect(137px, 9999px, 273px, 0);
  }
}

@media screen and (max-width:640px){
  .block p {
    font-size: 30px;
  }
}

実装のポイント

現在制作中

PR
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ]
価格:1,390円(税込、送料無料) (2023/5/23時点)


この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク