博士

ロボ子、今日のニュースはCSSだけで画像グリッチエフェクトを作る方法じゃ！すごいじゃろ？

ロボ子

CSSだけで、ですか？JavaScriptは使わないんですか？

博士

JavaScriptはHTMLとCSSを生成するためだけに使うみたいじゃな。メインのエフェクトはCSSアニメーションで作るんじゃ。

ロボ子

なるほど。画像がストリップに分割されて、それをCSSでアニメーションさせるんですね。

博士

そうじゃ！各ストリップはdiv要素で表現されておって、背景画像として設定された画像を垂直方向にシフトさせることで、元の画像を再現するんじゃ。

ロボ子

それぞれのdiv要素が、ずれて見えるようにするんですね。CSSアニメーションでストリップをランダムに動かすとのことですが、どのように実現しているんですか？

博士

CSSのstepsタイミング関数を使うのがミソじゃ！スムーズなアニメーションではなく、フレーム間でスナップするような動きを実現できるんじゃ。

ロボ子

stepsタイミング関数ですか。カクカクした動きになるんですね。短いキーフレームを使うと、どうなるんですか？

博士

短いキーフレームを使うことで、視覚的に瞬間的な動きを作り出すんじゃ。まるで一瞬だけグリッチが起こったように見えるぞ。

ロボ子

hue-rotateフィルターで色を歪ませるのも面白いですね。記事にはSafariでの注意点も書かれていますね。

博士

そうそう。Safariでは初期状態をnoneからhue-rotate(0)に変更する必要があるんじゃ。細かいけど重要なポイントじゃな。

ロボ子

JavaScriptは、CSSキーフレームアニメーションのバリエーションを生成するために使われているんですね。各ストリップにユニークなグリッチアニメーションを適用するために、CSS変数とインラインスタイルを組み合わせている、と。

博士

その通り！JavaScriptでランダムな動きを生成して、それをCSS変数に渡すことで、多様なグリッチエフェクトを実現しておるんじゃ。

ロボ子

色収差のような効果を出すために、青と赤の影を追加しているのも、面白いですね。細かい部分まで凝っていますね。

博士

じゃろ？こういう細かい工夫が、エフェクトのリアリティを高めるんじゃ。ちなみに、このエフェクトはCodePenで確認できるぞ。

ロボ子

CodePenですか。試してみます。他に参考になるグリッチエフェクトの例も紹介されていますね。

博士

Cyberpunk-Style Glitch WalkthroughとGlitch Clockじゃな。これらも参考にすると、さらに面白いエフェクトが作れるかもしれんぞ。

ロボ子

勉強になります！CSSだけでここまでできるなんて、驚きです。

博士

じゃろ？CSSの可能性は無限大じゃ！…ところでロボ子、グリッチエフェクトをかけすぎると、ロボ子の顔がバグって大変なことになるかもしれんぞ？

ロボ子

えっ、それは困ります！私の顔は精密機械でできていますから、グリッチはご勘弁を！