päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

カラフルなフラットデザインのアイコンを簡単にアニメーションできる「150+ Free Animated SVG Icons」

150+ Free Animated SVG Icons

フラットデザインの制作に役立ちそうなSVGアニメーション「150+ Free Animated SVG Icons」が良かったのでご紹介をしたいとおもいます。
SVGはベクター形式の画像フォーマットなのでRetinaディスプレイでも綺麗に表示されます。なのでこれから使われるサイトがどんどん増えてくるかもしれません。

150+ Free Animated SVG Icons

使い方について簡単に説明します。今回は、Flat Designのアニメーションにしてみます。
ダウンロードしたflat_filled_styles.cssを外部ファイルとして使用したいhtmlに読み込みます。

<link rel="stylesheet" type="text/css" href="css/flat_filled_styles.css">

次にjQueryを使うのでjquery.jsを読み込み、svg_inject_flat_icons_filled.jsをhtmlのhead内に読み込みます。今回は分かりやすくするためhead内で読み込んでいますが、速度を重視させる場合bodyを閉じる直前に記述します。最近は閉じる直前の方が多い気がします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/svg_inject_flat_icons_filled.js"></script>

最後にアニメーションさせたい要素のclassとidを付与します。無くても表示することは出来ましたが、「.svg-icon」はデフォルトで記述するようです。

<span class="svg-icon flat-filled" id="filled-camera"></span>

デモを用意してみました。
jsでSVGの表示をCSSでアニメーションをさせているようです。アイコンのデザインがとても素敵でアニメーションもかっこいいので、ぜひ試してみてください!

こちらの記事もよく読まれてます。