CSS と SVG だけで構築された 12 の風景シーン

公開: 2021-01-26

SVG を使用すると、かなりおかしなことができます。開発者は、SVG & キャンバス機能を使用するだけで、画像ファイルなしでページにグラフィックスをコーディングできます。

これは、私がここで収集した純粋な SVG ランドスケープのような本当にクールなプロジェクトにつながります。

これらのプロジェクトはすべて、完全に無料で編集および使用できます。 SVG コードといくつかの基本的な CSS および JS を使用して、アニメーション、歪み、視差効果を作成します。

ホークスベイ

この美しい湾の風景の例は、ルイスコイルによって開発されました。 3D レンダリングで通常見られるポリゴン表示を模倣したポリゴンスタイルの外観に従います。

これは SVG と JavaScript で人気のある効果ですが、実行するのは簡単ではありません。

Louis は TweenMax ライブラリを使用して、スタイルとコードの両方でエレガントなアニメーションを作成しています。

生の SVG コードを掘り下げたいと思ったことがあるなら、このスニペットから学ぶべきことがたくさんあります。

低ポリ風景

これは、ローポリの外観をモデルにした別の風景です。

これは開発者の Luke Reid によるもので、3D 効果に重点を置いています。レイアウト全体がとてもリアルで、星がちりばめられた空のグラデーションがこのデザインに命を吹き込みます.

JavaScript コードを見ると、星の位置がランダムに生成されていることがわかります。これは、SVG 背景やヒーローヘッダースタイルをデザインしている場合に便利な効果です。

SVG ランドスケープアニメーション

Evan Winston は、すべての可視要素をゆっくりとビューにドロップするこのカスタムアニメーションを開発しました。

これは非常にクールな効果であり、誰でも作成できるものです。確かに、アニメーションが完了するまでに時間がかかるため、これは巨大な背景イラストほど有用ではないかもしれません。

しかし、Web サイトのカスタム SVG アイコンで同様のことを行うことができます。基本的な SVG を設計し、上記のスニペットのコードを使用してそれらをアニメーション化するのに役立つチュートリアルがたくさんあります (TweenMax でも実行されます)。

海の風景

基本的な湖畔のビューについては、この SVG スニペットを掘り下げています。水の波や背景の雲など、いくつかの基本的なページアニメーションが表示されます。

これらはすべて、小さな JavaScript で非常に簡単に行うことができます。しかし、このスニペットは純粋な cssで作成されているため、さらに印象的です。

最新の CSS3 アニメーションは、UI/UX アニメーションを含む Web サイトで最も役立ちますが、風景やイラストにも使用できます。それは、開発者としての楽しみの半分です。

冬の風景

この冬の風景は、毎年目にする真っ白な雪を思い起こさせます。

Andrey Sorokin は、SVG コードといくつかの JavaScript だけで、この基本的なアニメーションを作成しました。アニメーションが遅くなる可能性があるため、完全な効果を確認するには 1 分ほどかかる場合があります。

イージング効果の品質と、これがブラウザーでうまく機能することに最も感銘を受けました。

アニメーションで表示される要素の数に基づいて、少し遅いと思いましたが、どれだけ多くのことが起こっているかを考えると、信じられないほど速くロードされます.

言うまでもなく、木から太陽が昇るアニメーションは、単純に楽しいものです。

SVG シーナリー

グラデーションのない基本的な色を使用するフラットデザインやセミフラットデザインのトレンドが大幅に増加しています。

このスニペットは、影と角にハードエッジを使用した同じスタイルに従います。

これは美しいスニペットであり、SVG のみのランドスケープの中で最も扱いやすいものの 1 つです。これまで SVG コードを使用したことがない場合でも、このスニペットを参照すると、Google で検索して詳細を確認できる多くの SVG/XML 属性が提供されます。

自然の風景

開発者の Amr Zakaria は、アニメーション化されたボートと飛行機を使用して、この風景で同様のフラットデザインを作成し、注目を集めました。

全体が純粋な CSS で実行され、かなり明確な CSS キーフレームアニメーションで動作します。

忍耐力があれば、これらすべてを Web ページの背景用に複製できます。最も難しいのは、これをモバイル画面で完全にレスポンシブにすることです。

視差ライト

Web 上のすべての視差効果のうち、これは非常に基本的なものです。ただし、すべてがCSS だけで機能し、スクリプトを作成する必要がないため、非常に印象的です。

街灯を含むすべての要素は、SVG 形状と CSS 効果で設計されています。

近くで見ると、実際にランプが CSS シャドウ効果を使用してリアルな輝きを生み出していることに気付くでしょう。

基本的なアニメーション

この更新された SVG ランドスケープでは、多数のカスタム要素が表示されます。

クリエーターのシュテフ・ヴァン・ダイクは、各アニメーションに細心の注意を払い、各ピースにバウンスや重力のような効果を追加しています。たとえば、山が視界に入ると、地面からの跳ね返り効果に気付くでしょう。

これは、細部に注意を払うことで得られるものであり、私が最新の Web アニメーションの大ファンである理由です。

SVG と CSS

超大型の背景アニメーションについては、このペンをご覧ください。このすべては、JavaScript を使用せずに SVG と純粋な CSS で機能します。

ランドスケープのレイヤーがゆっくりと表示され、それぞれに独自のキーフレームアニメーションがあります。しかし、それらが表示されると、一部の要素が動き続けることに気付くでしょう (太陽や雲など)。

このようなものを設計するには、多くの時間がかかります。しかし、CSS アニメーションの基本とともに、SVG 構文にも慣れることができます。

草

このランドスケープは非常にシンプルですが、新しいフロントエンドコーダーにとって優れた教師でもあると思います。

Felix De Montis は、草、丘、樹木の少量の SVG コードを使用して、このプロジェクトをゼロから作成しました。それを再現し、CSS を使用して位置を変更するのも簡単です。

全体として、単純な SVG デザインに興味がある場合は、これを開始するのに最適です。基本的な CSS 以外のものを探している場合、Felix は LESS プリプロセッサも使用します。

視差ページ

Chris Gruber は、マウスの動きに基づいて動く、この真っ白な視差ランドスケープを開発しました。

しかし、それに加えて、ヨットや背景の雲などの特定のページ要素もアニメーション化しました。

これは 20 行未満の jQuery で動作するため、JavaScript はほとんど必要ありません。これがどれほど詳細であるかを考えると、さらに印象的です。