最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 また、テキストエディタで開いて修正ができるので、別の色の画像が必要になった場合も、中の色コードを変えるだけで簡単に複製することが可能です。 今回は、SVGのpathを直接変更できる点を利用して、アニメーションのサンプルをいくつか作成してみました。 Contents ①imgタグを読み込み ②svgタグを直接書き込む ③imgタグを読み込み、desvg.jsを使用する パーツ別にアニメーションを付ける クリッピングマスクのアニメーション 波のアニメーション 線を描くアニメーション ①imgタグを読み込み 動

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat

CSSで使えるおしゃれな円グラフをまとめてみました！ codepenから引用しています 円グラフ　コピペで実装 今回は円グラフのデザインを集めてみました！ あなたが使いやすいと思う円グラフを ぜひコピペで実装してみてください！ 近未来の円グラフ これはかっこいい！色の違いもおしゃれ See the Pen Crazy Pie Chart by Siddharth Parmar (@Siddharth11) on CodePen. サークルくるくるアニメーション グラフの出方がおしゃれ！ See the Pen SVG Doughnut chart with animation and tooltip by Hiro (@githiro) on CodePen. データが見やすし マウスがあったところの名前と％が表示される See the Pen Highchart Pie Chart w/

サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書

グラフ画像をただ置いておいても、円グラフはただの丸、棒グラフもただの棒の並びのように見えてしまい、なかなか注目されないものです。 そこでグラフを動かすchart.jsで、グラフをニョキニョキっと動かし、視認性UPに繋がるようにしてみました。 しかし単純にサンプルコードから引っ張って来ても動かなかったり、参考ページを見て追加したことなど、カスタマイズした項目もありますので、合わせてご紹介したいと思います。 公式サイトからDL 公式サイトはこちら 上記からGit hubへアクセスして、chart.jsをDLし、任意のjsディレクトリにUPしておきます。 コードを記述 HTMLファイルのscriptタグまたは外部jsファイルの中身に、以下を記述します。 デモコードよりもさらに記述を追加していますが後に紹介します。 //スクロールしたとき、画面中央で発火して動くようにする var chartEl1

Chart.jsはグラフを作成する便利なプラグイン Chart.jsを使用すれば円グラフや棒グラフなど各種グラフをキレイに作成することができます。 簡単に導入できるため、利用している方も多いのではないでしょうか しかし、デフォルトではページを読み込んだ際にグラフも同時に読み込まれてしまいます。 スクロールしていき、グラフが見えるタイミイングで起動できるとキレイなアニメーションを見せることができます。 デモはこちら まずはグラフを表示させる それでは「Chart.js」を使ってグラフを表示させていきましょう。 導入方法はとても簡単で、Chart.jsのスクリプトを読み込むことと、HTMLにcanvasを用意することのたった2ステップです。 HTMLの記述 「Chart.js」を使用するには、HTMLでスクリプトを読み込む必要があります。公式サイトからCDNが提供されているのでHTMLのソース

ワンポイントに使えるCSS3マウスオーバーアニメーション5種 ちょっとしたワンポイントに使えそうなCSS3オンリーのマウスオーバーアニメーションです。 IEは10以上で動きます。 投稿日2013年10月30日 更新日2013年10月30日 ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height:

「The Box」- JavaScriptとCSS3を使った超絶デモ (TechWave) CSS3で作られた、3Dアニメーションのデモ「The Box」が紹介されています。 手書きで紙を切り取ったようなキャラクタが立体的に配置されアニメーションしています。 マウスをドラッグして視点を変えられます。 HTML5 canvas/WebGLではなく、CSS3 3D transformsを使っているようです。

Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名　時間　アニメーション方法 ;

Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy! CSS3 Clock With jQuer