jQueryプラグイン活用講座

簡単なコードでアニメーションする円グラフをつくる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単なコードで、アニメーションする円グラフをつくります。
講師:
04:21

字幕

このレッスンではアニメーションする円グラフが作れるプラグインCircliful を簡単な設定でとりあえず使ってみたいと思います。今、円グラフが表示されていますけれどもこれをリロードするとアニメーションするんですね。こんな円グラフを作ってみたいと思いますDreamweaver で開いたHTML ドキュメントなんですけれどもjQuery とそれからCircliful、プラグインの読み込みをscript 要素で行っています。後、Circliful のダウンロードの中に付属で付いてくる css のファイルこちらも読み込んであります。まだ JavaScript のコードは書いていません。これを書いていきたいと思いますがその前に、円グラフを表示するための要素をbody 要素に加えておかないといけません。これは div 要素にします。div で class を設定しましょう。mystat という名前にして、他にも設定をいろいろ加えるんですがとりあえずは、これ閉じておきます。そして script 要素ですね。こちらに jQuery を使ったcircliful の呼び出しを入れたいと思います。まずは、ドキュメントが読み込まれたら実行したいという場合jQuery のお決まりの書き方ですけれども$(function ですね。 そして (){}で) も閉じて ; と。ここはもうお決まりです。そして、その中に Circliful の呼び出しを入れます。まずは selector なんですけれどもclass「mystat」を設定しましたね。ですから mystat を選んで閉じます。そして、それに対してCircliful の呼び出しを行います。circliful プラグインの名前のとおりですね。そして ; と。まずこれで、動くことは動くので確認してみましょう。ファイルを「保存」して「ブラウザーでプレビュー」します。動きました。グレーの輪が描かれただけですね。実際の円グラフの表示がされていません。というのは、何パーセントにするのか何も設定していないからですね。これを div 要素の方に設定していきます。HTML ドキュメントでdiv 要素に加えるのはdata で始まる属性です。2つ設定したいんですが、まず1つ目。data-percent です。そして、文字列で数値を入れます。ちょっと大きい方が見栄えがするので65 としておきます。そして「保存」しましょう。ブラウザのウィンドウをリロードします。アニメーションが動きました。 真ん中に、パーセンテージの数字が欲しいですね。それをもう1つ加えてみましょう。また data で始まる属性です。この後にスペースのdata-text と、文字を入れるんですね。テキストを加えます。65% と。% の記号も、ちゃんと入れる必要があります。そして「保存」して確認しましょう。もう1度ブラウザをリロードします。ちゃんと真ん中に65% という表示が出ました。このレッスンでは、円グラフを作れるアニメーションをする円グラフですね。Circliful というプラグインを簡単な記述で使ってみました。まずはもちろん、プラグインのCircliful を読み込んでおきます。あと css も読み込みました。そして、円グラフを表示するのはdiv 要素です。class を設定しdata で始まる属性今回は percent と text2つを指定しました。その上で、実行の仕方が簡単でjQuery のお馴染みの書き方の中に$ で selector ですね。class を指定して.circliful。空っぽの () で大丈夫です。

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。