SVGアニメーションを驚くほど簡単に!インストール不要10秒で作成
SVGアニメーション作ってますか？ サイトのローディング時なんかにちょっとオリジナルなローディングを設置するとそれだけで、印象がだいぶ違います。 それ以外にもUIをよりわかりやすく、直感的にする上で SVGアニメーションを用いることもあるでしょう。 でもSVGアニメーションを作るのって初心者にはちょっと難易度が高いですよね。 SVGアニメーションを簡単に作れるツールそんな時に使って見たいのが「SVG Arista」 SVG Aristaの特徴SVG AristaはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクトとして開発されたオンラインツールです。 SVG Aristaの特徴をざっと紹介しましょう。 オンラインツールなのでインストールはもちろん不要！登録も不要！もちろん無料！直感的に設
SVGで手書き風アニメーションを実装する方法 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちはアートディレクターの奥田です。 最近はハンドドリップコーヒーにはまっています。 手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。 コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。 もっと他のコーヒーも試してみたいですね。 さて、ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか？ 今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。 Table of contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成
SVGとCSSで簡単な描画アニメーションを実現する
SVG形式に対応するブラウザが増えたことにより、利用するシーンが増えてきた画像形式です。このSVGとCSSを利用することで、簡単なアニメーションを実現することができます。 SVGファイルとは SVGファイルとは、JPGなどのビットマップデータと違い、ベクターデータであることが特徴です。JPGやPNGなどのビットマップデータは、画像を拡大・縮小すると劣化しますが、SVGデータは劣化することがありません。そのため、ロゴなどの単純な画像に適した形式だと言えます。 SVGファイルの作り方 SVGファイルはイラストレーターで制作することができます。ロゴや自作したデータをSVG形式で保存することで、SVGファイルを制作することができます。 SVGファイルの中身 まずは、下記の画像を確認してください。 上記の画像のようにHTMLにコードを記述することで、画像を表示することができるのがSVGファイルの特徴
CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー - コムテブログ
TL;DR CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。 slider デモ 作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。 2019/01/29 追記：IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。 参考にさせていただいたのは、css だけで作るスライダー – PeonyQueenで作成されているスライダー。 上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。 こちらを参考に、html の img 記述をなくし、フェ
アニメーション終了後にサイトを表示させる方法 – Creator Note
こんにちは！ 9月も終わりに近づいて、毎日毎日あっという間に終わっていきますね～ すぐ紅葉の季節が来るんでしょうね…汗 秋が楽しみです！ 今回はアニメーション終了後にサイトを表示させる方法をご紹介します。 いろんなやり方がありますので、私のやり方は1つの参考程度に見ていただければと思ってます。 自分でアニメーション画像を作成して、サイトに入れたはいいけどなんかしたいことと違う。 ということで、備忘録として残しておくことにしました。 ちなみに今回私が実装したのは「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法です。 もっと簡単なやり方もあるんですが、setTimeoutを使うことが最近多いのでそれも含めて書いておこうと思います。 流れとしては ●サイトを開いた瞬間、アニメーションがはじまる ↓ ●アニメーションが終わったら、サイトを表示する と言う流
【jQuery】簡単！Flashのようなタイムラインアニメーションを実現するテクニック（レスポンシブ対応）｜Tips*Blog｜株式会社コプロシステム
【jQuery】簡単！Flashのようなタイムラインアニメーションを実現するテクニック（レスポンシブ対応） こんにちは、UXデザイン室の松山です。 好きなスタンドは、パープルヘイズです。 前回のTips*Blogでは「背景画像の複数設定と:before、:afterを使ったレスポンシブCSSテクニック」を説明しました。 今回は、jQueryでFlashのタイムラインのように順番にアニメーションを実行するテクニックを説明します。 最近ではFlashを使用しているサイトはほぼ見なくなり、アニメーションならjQueryやCSS3で再現しているサイトがほとんどですが、お客様にむかし流行ったFlashで作るオープニングムービーのようなものを依頼された時にどうやって実装すればいいのか悩んだことはないでしょうか？ そんな時に使えるテクニックをご紹介します。 今回作成したサンプル まずはサンプルをご覧くだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】