WEBページのアニメーションをcssでやるべきか、javascriptでやるべきか、瞬時に判断できる、ユゲタです。
大体の事がcssでできてしまう状況になっているんですが、そうしたアニメーションって、やっぱりデザイナーさんが作るような見栄えの良いイケてるものもあれば、
プログラミングしかできない人が作ってしまうデザインセンスの無いアニメーションは正直いただけません。
そんな時に、アニメーションサンプルを便利にダウンロードさせてくれるサイトに出会ったので、今回はそのサイトを紹介したいと思います。
本日のIT謎掛け
「CSSアニメーション」と、かけまして・・・
「無視されがちな信号の色」と、ときます。
そのココロは・・・
キー（キーフレームと、黄色）に気をつけましょう。
animista
https://animista.net/
「TRY ME!」ボタンを押すと、アニメーションサンプルがたくさん掲載されているページに移動します。
WEBページ内でよく使いそうな挙動に対して、上下左右など、それぞれの方向に対するアニメーションサンプルが、階層構造で掲載されています。
上部の黒円に囲まれたアニメーションの種類を選んでから、すぐ下の、挙動タイプを選択すると、画面中央のプレビュー画面で、その動きが確認できて、猿でもわかりそうなインターフェイスで便利ですね。
option項目で、細かな設定の微調整ができて、独自の動きも作れます。
最後に、画面右上にフローティングで置かれているボタンの一番右をクリックすると、;
classとアニメーションのサンプルコードがコピペできる画面が現れます。
もはや、迷うことはどこにもありません。
ためらわずに、ソースをコピペするだけで、WEBページにアニメーションが実装されます。
HTML5に対して思うこと
こうした、UIの基本アニメーションなどは、正直デフォルトでセットしてもらっていてもいいぐらい、よく使う内容なのですが、
アニメーションなど、柔軟に使えることが実現されたHTML5の次のHTML5.1か、HTML6があるとしたら、是非ともUIに優しい仕様になっていてほしいですね。
でも、おそらく、技術進化の方が優先されるので、こうしたデザイン面は、クリエーターに委ねられるかもしれませんが・・・
それに伴って、こうした、ジェネレータ・サービスなども、増えてくるんでしょうね。
頑張れ！クリエーター！！！
0 件のコメント:
コメントを投稿