美しいボケ効果を生み出すコードスニペット8選【CSS/JavaScript】

被写体にピントをあわせて背景をぼかすテクニックは、昔から写真で活用されてきました。いまでは写真以外でも、WebサイトにCSSやJavaScriptを使ってボケ効果を取り入れることも多いです。

本記事では、さまざまな種類のボケ効果を実装できるコードスニペット8種類を紹介します。

3D背景のボケ効果

ボケ効果は奥行きを感じさせますが、このスニペットはThree.jsによって3Dのアニメーションをつけ、奥行きをより深く見せています。背景をドラッグすると視点を変えられるのもポイントです。

See the Pen Bokeh Lighting Background by Wakana Y.K. (@wakana-k) on CodePen.

ホタルのように漂うボケ効果

CSS Grid、アニメーション、フィルターを組み合わせて作られたスニペット。クリックするとJavaScriptによってデザインが切り替わります。アニメーションが控えめなので、ヒーローエリアやページの背景にもおすすめです。

See the Pen Bokeh CSS Doodle by Crystal S (@CrystalS) on CodePen.

液体のようなボケ効果

溶岩が流れるような様子とボケ効果が組み合わさり、落ち着いた雰囲気に仕上がっています。泡のようなレンズフレアも特徴です。

See the Pen Animated Bokeh Lava Lamp Canvas by smpnjn (@smpnjn) on CodePen.

六角形のボケ効果

ボケをテーマにしつつ、円ではなく六角形を採用し、スクロールによるパララックス効果も活用しています。また、ジェネレーティブパターンUIを巧みに利用し、ページが更新されるたびに新しいシーンを生成しています。

See the Pen Hex Bokeh by Will Boyd (@lonekorean) on CodePen.

繊細なグラデーションのボケ効果

繊細なボケ効果を求めているなら、このスニペットがおすすめです。SVGとCSSの組み合わせで、雰囲気のあるタッチに仕上げています。テキスト部分を強調できるので、背景にぴったりです。

See the Pen bokehlicious by Andy Fitzsimon (@andyfitz) on CodePen.

明るい色調のボケ効果

ボケ効果を使ったスニペットは暗い色が多いですが、このスニペットは明るい色調が特徴です。ボケ効果がかかった円がフェードインとフェードアウトを繰り返し、繊細な印象を与えます。

See the Pen Canvas Bokeh Effect by Aaron Silber (@aaronlsilber) on CodePen.

降り積もる雪のようなボケ効果

白と黒の配色が印象的な、降り積もる雪のようなスニペット。どんどん積もっていく様子を、つい眺めてしまいます。

See the Pen Snowing Bokeh by Preetesh Jain (@preeteshjain) on CodePen.

Refreshing CSS Bokeh Effect

プロジェクトに色を取り入れる余裕があるなら、このスニペットが役に立つかもしれません。クリックするたびに、色が更新されます。ゆっくり動く円と落ち着いた色調は、コンテンツを邪魔しません。

See the Pen Untitled by Nayra Rodrguez (@Nayra710) on CodePen.

おわりに

ボケ効果は、Webサイトをアーティスティックな雰囲気にしてくれます。繊細なデザインから大胆なデザインまで、さまざまな表現が可能です。CSSとJavaScriptを使って色や動きをカスタマイズし、プロジェクトにあったデザインに調整してみましょう。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：齊藤颯人　提供元：speckyboy）