参考サイト
ローディングアニメーションの引き出しを増やしたいけど、
どうすれば良いのだろう・・・?
アニメーションの数を増やしたいけど、ゼロから作るのって難しいですよね。。
そんなときはアニメーションのソースを配布されているサイトを活用しましょう!
今回は10個のサイトをご紹介します。
Creating a Collection of CSS3 Animated Pre-loaders
Creating a Collection of CSS3 Animated Pre-loaders
こちらのサイトは6種類のアニメーション掲載。
上記のページからHTMLとCSSを参照可能。
Spinkit
画面上部にある『<>Source』部分をクリックするとHTMLとCSSを参照可能。
また左右でアニメーションの種類を選べます
Single Element CSS Spinners
『<View Source>』ボタンをクリックでHTMLとCSSを参照可能。
また『BG』で背景の色を変えることができ、『FG』でアニメーションの色を変更可能。
Epic-spinners
各アニメーションをクリックでHTMLとCSSの参照可能。
動くWebデザイン アイディア帳
各アニメーションをクリックするとHTML、CSS、JSの参照可能。
CSS3 Loading Animation
CodePenよりHTMLとCSSを参照可能。
CSS WAND
各アニメーションをクリックするとHTMLとCSSから参照可能。
まとめ
以上となります。
アニメーションはサイトのイメージにも繋がりますので、
たくさん引き出しを増やしておきたいですね。
ローディングアニメーションをつくってみよう についてはこちら
ローディングアニメーションの参考サイト② についてはこちら