ブログ

スタッフブログ

webデザイナー募集中webデザイナー募集中

アートボード 3

こんにちは。アウラスタッフの仁木です。

icons8」でアニメーションつきのアイコンがフリーで配布されていたので試しに使ってみました。

アートボード 2

Webで使用しやすいものがチョイスされています。
リンク先のページでは「18 Free Animated Icons」と書かれていますが、種類は60種類確認できます。
同じ見た目のアイコンもいくつかありますが、アニメーションが違うものです。

 

使い方は簡単でした

10数行の記述ですぐに使うことが出来ました。
下のCodepenの「Result」の表示結果画面でアイコンをクリックするとアニメーションが確認できます。

See the Pen veXyYN by Toshitaka Niki (@toshitaka) on CodePen.0

 

色も変えられる!

また、各アイコンはSVGなのでCSSで「stroke」プロパティと「fill」プロパティで色を変更することができます。
SVGのパスでアニメーションをつけているので、CSSより凝った動きでフレンドリーな印象です。UXにも大きく効果がありそうですね。

 

気を付けること

注意しておくこととして、IEとEDGEでは表示が安定しておらず一部線が消えてしまったりするようです。

最近はiPhoneやiPadを筆頭に高解像度のディスプレイが普及してきたのでSVGが大活躍している気がします。
サイトを訪れた人が「おっ」と思うような、ちょっとしたアクセントでホームページもより良くしていきたいですね。

webデザイナー募集中webデザイナー募集中

人気の記事

まだデータがありません。

株式会社アウラ 松永巳知子 社長ブログ

お電話からのお問い合わせはこちら

お気軽にご相談ください。 06-6292-8577 【電話受付】 10:00~18:30(平日)

インターネットから24時間受付中
お問い合わせ専用フォーム 24時間受付中!

御社のホームページ、ご活用されていますか? インターネットからのお問い合わせは24時間受付中

御社のホームページ、ご活用されていますか?