でユニークな背景効果を作成するための10のスニペットは、（文字通りと比喩の両方）大きいです。 HD（そして現在は4K）ディスプレイの登場により、設計者は画面の不動産の負荷を占める背景を作成しています。 どうして？ 彼らは信じられないほどの視覚的な影響のために作り、物語を伝えるのに役立つので。

しかし、単に大きなスペースに写真やテクスチャを投げるよりも、背景にそんなに多くがあります。 CSSとJavaScriptのパワーの時折ビットの組み合わせは、いくつかの素晴らしい特殊効果の作成。

のは、デザイナーが背景をspicingされているユニークな方法のいくつかを探求してみましょう。 あなたは彼らがどのように動作するかを正確に見ることができるように、我々はまた、各技術のためのペンが含まれています。

CSSブレンドモードの色の変更

この背景効果を非常にクールにするのは、ユーザーがスクロールすると上の固定要素が色を変更するように CSSmix-blend-modeプロパティを使用すると、背景の内容に依存する色相の変更が可能になります。

スクロールアニメーション

過去のサイドスクロールビデオゲームを連想させる、この技術は、二つの異なる画像を備えています-反対方向に各スクロー これはCSStransformといくつかのJSの助けを借りて行われます。

歪んだ

歪んだ背景は、webデザインの最もホットなトレンドの一つです。 これは、印刷デザインに実装するのが信じられないほど簡単だった効果であり、今まではウェブ上で行うのが苦痛でした。 この純粋なHTML/CSSソリューションは、それを楽勝にします。

Moving Pictures

CSSのかなり単純なビットを使用して、この背景は、複数の画像間のスムーズな移行を可能にします。 これは、従来のJavaScriptよりもはるかに軽量なスライダーになります。

アニメーショングラデーション

慎重に行われていない場合、アニメーションの背景は、その上に座っている任意のコンテンツからそらすこ このアニメーション化されたグラデーションの例は、より微妙な効果であるためいいです。 JavaScriptを使用すると、パレットに合わせてグラデーションの色を定義できます。

Blur on Scroll

このテクニックは、訪問者が背景画像（ニュース記事のヘッダーのような）に集中し、テキストを上に簡単に読むことができるようにしたい時には非常に有用である可能性があります。 JQueryの少しは、効果を作成するためにスクロール時にbackground-sizeプロパティを変更します。

フェードインヒーローイメージWith Overlay

この例ではいくつかのことが行われています。 まず、全角のヒーロー画像には、異なる色相を作成するために上にカラーオーバーレイが追加されています。 次に、フェードアニメーションを実装して、視覚的に滑らかな方法で画像を導入します。 最後に、視差スタイルのスクロール効果がミックスに追加されます。 その結果、比較的少ないコード（およびJSを使用しない）を使用する非常に現代的な外観になります。

背景ズームとパン

ここでは、最近かなり見ている効果です。 ユーザーがパネルの上にマウスを置くと、背景画像がズームインし、カーソルの動きとともにパンします。 これは、いくつかの対話性を追加し、ユーザーの関心を維持するための簡単な方法です。

Reveal on Hover

この例では、ユーザーのマウスの位置に基づいて背景が表示される分割画面を示しています。 “前”と”後”のショットのような比較に最適です。

スクロールの色の変更

時には、単純な単色の使用がいかに強力であるかを忘れてしまいます。 ここでは、スクロール位置に基づいて背景色が変化すると、それが与える影響を確認します。 この軽量の解決は重いイメージ同じように視覚で有効である場合もある。背景は、もはやコンテンツをフレーム化する手段ではなく、コンテンツ自体の一部になることがよくあります。 それらを利用するための非常に多くの興味深い方法で、それは様々な背景技術を試してみて、彼らはあなたの次のプロジェクトのユーザーエクスペリエンス