20以上のクールなアニメーションSVGパック

公開: 2015-11-16

SVG(またはScalable Vector Graphics)は、2次元のベクトルを含むXMLベースのファイル形式であり、開発者は動的でアニメーション化されたすばらしいグラフィックスやグラフィックアプリケーションを作成できます。

目次を隠す
SVG POPウォッチ–レスポンシブアニメーションSVGウォッチエンジン
アニメーションSVGイラストパック
アニメーション3Dテキストスタイル– SVG
アニメーションのSVG天気アイコン
6パックSEOSVGアイコン
StarshineJS –SVGアニメーションの輝く星のHTML効果
アニメーションSVGブラウザアイコン
Enliven'em Premiumアドオン:Webプロモーションアイコン
Trigons –抽象的なSVG画像の作成とアニメーション化
Cyclo –SVGローダーキット
循環HTML5プリローダー
レスポンシブミュージシャンアニメーション
アニメーションSVGアイコンメガパック
折りたたみ式ローダーアニメーションSVG
Flatimation SVG –アニメーションSVGアイコンセット
レトロなSVGカメラの写真のスライドショー
16のアニメーションSEOアイコン
Gooeyメニュー:jQueryプラグイン
40のアニメーションSVGソーシャルメディアアイコン
マーカーとロゴ付きのアニメーションSVGグローブ
GearHTML5オーディオプレーヤー
JavaScriptを使用した3D円グラフ
SVGの力を利用した素晴らしいウェブサイトの例
キャバリエ:卓越性の征服者
ピン
Poignee de main virile
ピン
iFly50
アーク:スターシチズンスターマップ
地震を奇妙に保つ
30u
QEDグループ
Melanie Daveid
WWFフランス–アースアワーパリ
ネリソン
ワンデザインカンパニー
青山みどり

SVGは、テキストエディターまたはCSS / JSのいずれかでコードを使用して操作できる強力な画像形式であり、Webデザインでますます使用されています。

SVGの最大の利点の1つは、すべての画面解像度で鮮明に見えることです。 非常に小さいファイルサイズを含めることができ、簡単に編集および変更できます。 SVG画像は、使用する画像のサイズや、最終的なデザインとの相互作用の方法に関して、はるかに自由度が高くなります。

このXMLベースのベクター画像形式はWeb開発者とWebデザイナーにとって物事を容易にするので、ここに22のクールなアニメーションSVGパックを集めてあなたを刺激することにしました。 これらのプレミアムSVGパックは、アイコンやアニメーションテキストをウェブサイトに追加することから、時計やアニメーショングラフィックなどを追加することまで、さまざまな目的を果たします。

これらのアニメーションSVGパックをWebデザインコレクションに追加して、次のWebサイトプロジェクトの準備をしてください!

PS以下に、WebデザインでSVGを使用する方法の例をいくつか追加しました。

SVG POPウォッチ–レスポンシブアニメーションSVGウォッチエンジン

ピン

SVG POP Watchは、プロジェクトやサイトチームに最適です。 外観は簡単に変更できます。網膜に対応し、応答性の高いアニメーションSVG時計エンジンを搭載しています。 独自のデザインを簡単に追加することもできます。 このSVG時計には多くの優れた機能が付属しているので、ぜひチェックしてください。

アニメーションSVGイラストパック

アニメーションSVGイラストパック ピン

これは本当に素晴らしく、アニメーション化されたSVGイラストパックです。 これらはSnap.SVGJavaScriptライブラリを使用して作成されており、プロジェクトで見栄えがします。

アニメーション3Dテキストスタイル– SVG

アニメーション3Dテキストスタイル-SVGプレビュー-CodeCanyon ピン

このセットには、3Dアニメーションテキストの10のユニークなスタイルが含まれています。 彼らはHTMLテキストを使用します。つまり、Googleは他のHTMLテキストと同じようにそれを読みます。 このパックに含まれるスタイルは、リアル、フラット、アイソメトリックの範囲です。

アニメーションのSVG天気アイコン

アニメーションのSVG天気アイコン ピン

これらのアニメーション化されたフラットウェザーアイコンは美しくデザインされました。 それぞれに独自のアニメーションがあり、それらを使用することで、Webデザインプロジェクトをより創造的で説得力のあるものにすることができます。

6パックSEOSVGアイコン

SVGアイコンアニメーションSVGパック ピン

このパックには、6つのSEOSVGアニメーションアイコンが含まれています。 それらを使用してWebデザインプロジェクトに統合し、Webサイトをインタラクティブにすることができます。

StarshineJS –SVGアニメーションの輝く星のHTML効果

StarshineJSアニメーションSVGパック ピン

アニメーション化されたHTML効果を使用すると、HTML要素に輝き、セクシー、または漫画のライトを追加できます。 配置、サイズ、色などを簡単に調整できます。

アニメーションSVGブラウザアイコン

アニメーションSVGアイコン ピン

これらのアニメーション化されたSVGアイコンは、まさにWebサイトに必要なものです。 これらは、アプリ、テーマ、またはゲームがすべての主要なブラウザーで完全に機能することを顧客に伝えるのに最適な方法です。

Enliven'em Premiumアドオン:Webプロモーションアイコン

アニメーションSVGパックアイコン ピン

このパックには、50個のWebプロモーションアイコンが含まれています。 これはEnliven'emのアドオンです。 各アイコンには5つの背景バリエーションがあり、合計250のSVGファイルを取得できます。

Trigons –抽象的なSVG画像の作成とアニメーション化

TrigonsアニメーションSVGパック ピン

これは非常に柔軟なJSスクリプトであり、オプションのアニメーションを使用してモダンでスタイリッシュなSVG画像を作成するのに役立ちます。 このセットには、完璧なWebデザインプロジェクトを作成するために使用できる30の組み込みアニメーション効果が含まれています。

Cyclo –SVGローダーキット

Cyclo-SVGローダーキット ピン
このセットを使用すると、プリローダーの見栄えが良くなります。 これは、SVGでのみ作成された33の読み込みアニメーション効果です。

循環HTML5プリローダー

循環HTML5プリローダー ピン

これは循環HTML5プリローダーであり、通常のユーザーエクスペリエンスとWebサイトのコンテンツへのスムーズな移動の間を移行します。

レスポンシブミュージシャンアニメーション

レスポンシブミュージシャンアニメーションアニメーションSVGパック ピン

このパックには、いくつかのアニメーションSVGミュージシャンと元のベクターファイルが含まれています。 デモパッケージ、ミュージシャンパッケージもあります。 このパックは非常によく文書化されています。

アニメーションSVGアイコンメガパック

ピン

アニメーションSVGアイコンメガパックはあなたのベクターアートを生き生きとさせます。 アートワークを保存し、HTMLにコード行を追加するだけで、準備完了です。

折りたたみ式ローダーアニメーションSVG

折りたたみ式ローダーアニメーションSVG ピン

Folding Loader SVGアニメーションは、プリローダーページに最適です。 安心してお使いください!

Flatimation SVG –アニメーションSVGアイコンセット

FlatimationアニメーションSVGパック ピン

Flatimations SVGアニメーションアイコンセットは、Webサイトをより楽しくクリエイティブにします。 これらの人目を引くアイコンは、どのデバイスやブラウザでも見栄えがします。

レトロなSVGカメラの写真のスライドショー

レトロなアニメーションSVGパック ピン

このレトロなSVGカメラの写真のスライドショーはフラットなデザインにインスピレーションを得ています。 レトロでありながら現代的に見え、画像をアニメーション化して表示するのに最適な方法です。

16のアニメーションSEOアイコン

アニメーションSVGパックアイコン ピン

あなたのウェブサイトを生き生きとさせるこれらの16のアニメーション化されたSEOアイコンを持って使用するのはどうですか。 それらは完全にスケーラブルなベクターグラフィックであり、どのデバイスやブラウザでも見栄えがします。

Gooeyメニュー:jQueryプラグイン

GooeyMenujQueryプラグイン ピン

このプラグインは、アイテムとして円を使用してねばねばしたメニューを作成するのに役立ちます。 SVGフィルターを使用し、6つのメニュースタイルを含み、多くのカスタマイズ可能なオプションなどが付属しています。

40のアニメーションSVGソーシャルメディアアイコン

アニメーションSVGパックソーシャルメディアアイコン ピン

これは、Webサイトの訪問者をソーシャルメディアページに誘導するのに最適なアニメーションSVGアイコンの非常に優れたセットです。

マーカーとロゴ付きのアニメーションSVGグローブ

アニメーションSVGロゴ ピン

これは、モバイルデバイスとデスクトップデバイスの両方でうまく機能するマーカーとロゴを備えた本当にクールなアニメーションSVGグローブです。 これは、場所を視覚化するのに最適な方法です。

GearHTML5オーディオプレーヤー

ギアアニメーションSVGパック ピン

これで、クリエイティブな方法で音楽を簡単に紹介できます。 このギアプレーヤーは、あなたが間違いなく気に入る非常に魅力的なユーザーインターフェースを提供します。

JavaScriptを使用した3D円グラフ

JavaScriptを使用した3D円グラフ ピン

この3D円グラフは、JavaScript、SVG、VMLの代替で開発されました。 簡単にカスタマイズしたり、位置、高さ、半径、凡例の属性、テキストサイズなどを変更したりできます。

SVGの力を利用した素晴らしいウェブサイトの例

キャバリエ:卓越性の征服者

キャバリエSVGウェブサイト ピン

これらの一連のゲームは、アニメーションとグラフィックスにSVGを使用して作成されました。 Posture&Balanceは、革新的なテクノロジーで設計されたCavalierと呼ばれるプラットフォーム用に作成された最初のゲームです。

Poignee de main virile

PoigneesvgWebサイト ピン

このアニメーションと写真の新しいウェブサイトは、フランスを拠点とするグラフィックデザインとデジタルクリエイティブスタジオPoignee demainvirileのために構築されました。 結果は信じられないほどです!

iFly50

iFly50svgウェブサイト ピン

FLY KLM Magazineが第50版を祝ったとき、それは究極の旅行コレクションのために鮮やかにアニメーション化されたサイトを設計しました。 このようにして、地球上で最も美しく魅力的な50の場所が紹介されました。

アーク:スターシチズンスターマップ

svg websiteStarmap ピン

このウェブサイトは、信じられないほどのARKインターフェースを使用して、ゲーム「スターシチズン」内の宇宙船メーカーであるロバートの宇宙産業を紹介しています。 これは、スターシチズンの市民を保護するための、独自の宇宙船の情報、更新、購入のためのポータルです。

地震を奇妙に保つ

svgを使用するEarthquakeのWebサイトを維持する ピン

Keep地震の奇妙なは、地震の場合にポートランドの人口を準備することを目的として構築された見事なSVGグラフィック効果で作成されたプラットフォームです。 内容は非常に教育的です。

30u

30usvgウェブサイト ピン

30uは、スタイルに注目し、いくつかの興味深いSVG機能を使用した開発者によって作成されたサイトで靴を販売するeショップです。

QEDグループ

QED-GroupsvgWebサイト ピン

QED GROUPサイトには、すばらしいナビゲーション体験を提供する驚くべき示唆に富むイラストがあります。 サイトのレイアウトは上品でスマートです。

Melanie Daveid

MelanieDaveidsvgウェブサイト ピン

Melanie DaveidのWebサイトは、Web上で見つけることができる最も優れたポートフォリオサイトの1つです。 このサイトには、スムーズな移行とゴージャスな手のイラストが含まれています

WWFフランス–アースアワーパリ

WWFFrancesvgのWebサイト ピン

このアニメーションサイトはWWFフランスのために作成され、3月19日にエッフェル塔のライトがアースアワーのためにオフになることを発表するために使用されました。

ネリソン

NerissonsvgWebサイト ピン

Nerisson、別名Jimmy Raheriarisoaは、ウェブ/モバイルデザイン、イラストレーション、モーションデザインを専門とするフランスのアートディレクターです。 これは素晴らしいイラストとグラフィック機能を備えた素晴らしいポートフォリオサイトです。

ワンデザインカンパニー

One DesignsvgWebサイト ピン

One Design Companyは、デザイナー、開発者、プロジェクトマネージャー、ライター、アーティストからなる経験豊富で熱狂的なチームです。 彼らのサイトは、鮮明なSVG画像に基づいた、鮮やかでインタラクティブなサイトです。

青山みどり

MIDORIAOYAMAsvgウェブサイト ピン

青山みどりは東京を拠点に活動するDJ兼プロデューサーです。 彼は自分のパーティー「EUREKA!」を立ち上げました。 それは今でも日本で最高のハウスミュージックパーティーの1つです。 彼のサイトも革新的で、SVGの興味深い例であり、ユーザーとしてSVGからどのように利益を得ることができるかを示しています。