SVGとanimationで滑らかな動きの波っぽいやつ
Result ヒーローイメージに目が疲れない程度のアニメーションフレームを用意して注視を促し、訴求力向上を期待する的なやつ。向上するかは分かりません ユーザーにストレスないものが望ましいという事で癒されそうな波をSVGとCSSだけで表現するサンプルです まぁこれでもストレス感じる人がいないわけではないでしょうけども。 css.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration:
HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場
ハイパフォーマンスで超多機能を謳うアニメーションライブラリーが登場しました。HTMLやSVG、テキストなど、プラグインで拡張できる注目のJavaScriptライブラリーを試してみましょう。 この記事ではthednpとdalisoftによって開発されたオープンソースの多機能フリーJavaScriptアニメーションエンジンKUTE.jsを紹介します。 KUTE.jsでできること KUTE.jsではアニメーションのコアエンジンと、特定のプロパティにアニメーションを実装するたくさんのプラグインが利用可能です。このライブラリーはKUTE.jsのモジュール構造によって高い性能と柔軟性があります。 コアエンジンで実装できるアニメーション コアエンジンだけを使って実装できるアニメーションは以下です。 Opacity（透明度）プロパティ matrixおよび2軸で値を指定したskew、scaleを除く、すべて
もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい
まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、SVGなどのテクノロジーを使えば、「見えないペン」と呼ぶエフェクトを比較的容易に実現できます。閲覧者は、まるで見えないペンで描かれたかのように、1ラインずつ表示される絵を目にします。 そのアイデアは新しいものではありません。よく知られているように、1953年の「Duck Amuck（カモにされたカモ）」にまでさかのぼると、のちにバッグス・バニーだと判明した見えざる手は、周りの世界を何度も消しては描き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
