エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSを使ったモザイクエフェクトの実装
100BANCHさんのプロジェクトを紹介するWebサイト『Future Explorations』で実装したモザイクエフェクト... 100BANCHさんのプロジェクトを紹介するWebサイト『Future Explorations』で実装したモザイクエフェクトの仕組を解説します。 DEMO Mosaicizeボタンを押すと、白い画面からモザイクエフェクトで写真が出現します。 仕組み 画像の前面に正方形のセルを被せる それぞれのセルに、白→モザイク→解除(元画像可視化)、この3段階アニメーションを設定 モザイクのセルを4パートに分け、段階的にアニメーション 途中、モザイクのランダムを表現するためJavaScriptも利用していますが 作成した乱数を固定値として扱い、トリガーをhoverなどスタイルシート制御にするとスクリプトなしの構成で動きます。 モザイク化画像をCSSで作成 モザイクがかかった状態の画像は、対象の画像の前面へgridを作成しbackdrop-filterのblur効果を重ねることで再現できます。 grid