デモ - ソースコード
インターネットを使用した長年の経験から気付いたはずですが、実際には、Webページ上の要素のほとんどは正方形または長方形です。 そのため、場合によっては、デザイン内の円や三角形などの興味深い要素が非常に役立ちます。 このチュートリアルでは、ポートフォリオサイトで通常表示される円グラフのアニメーションの作成方法を示します。 これにより、スキルを視覚的に強調したり、処理できるタスクを示すことができます。 デモを見て、最終結果を確認してください。
それでは始めましょう！
このチュートリアルを作成するときは、 Circlifulを使用します。 これは無料のオープンソースjQueryプラグインです。 メインファイルはGithubからダウンロードできます。 .jsファイルと、対応するCSSスタイルシートが含まれています。 サークル効果を実現するには、ページに両方が含まれている必要があります。
<pre lang="PHP" line="1"><!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Animated Circle Stats - Template Monster Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.circliful.min.js"></script> </head> </pre>
私のページには、私のCSSスタイルに似たstyles.cssスタイルシートが含まれています。 jQueryライブラリーのコピーも作成する必要があります 。 プラグインが正しく機能する必要があります。
それ自体では、ページの構造はかなり簡単です。 サークル要素は、HTML5属性を使用してデータを操作するdivタグに含まれています。 または、jQuery関数に保存することもできますが、各要素をより適切に制御したい場合は、HTMLで作業する方が簡単です。
<pre lang="PHP" line="1"><div id="stats" class="clearfix"> <div class="wrap"> <div class="row"> <div class="circle-container"> <h3>Photoshop</h3> <div class="circlestat" data-dimension="200" data-text="55%" data-width="30" data-fontsize="38" data-percent="55" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> <div class="circle-container"> <h3>Illustrator</h3> <div class="circlestat" data-dimension="200" data-text="75%" data-width="30" data-fontsize="38" data-percent="75" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> <div class="circle-container"> <h3>After Effects</h3> <div class="circlestat" data-dimension="200" data-text="35%" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> </div><!-- @end .row --> </pre>
これは、3つのアニメーションユニットで構成される円の最初の行のコピーです。 これらのデータ属性はすべて、プラグインのドキュメントでさらに説明されています 。 それぞれに、アニメーション効果を定義するオプションがあります。 以下は、私が使用するオプションの簡単な説明です。
- データ次元-合計円サイズ幅/高さ;
- data-text-各円の中心に表示されるテキスト。
- データ幅-回転するデータアークの厚さ;
- data-fontsize-中央のテキストのフォントサイズ。
- data-percent-サークル内のパーセンテージを表示する0〜100の数値。
- data-fgcolor-円の前景色;
- data-bgcolor-円の背景色。
- data-fill-内側の円の背景色の内側の塗りつぶし。
CSSページレイアウト
もちろん、プラグインをカスタマイズしたくない場合は、 jquery.circliful.cssを直接編集することを主張しません。 ほとんどの色はHTML5データ属性から直接変更できます。Circlifulスタイルのいずれかを本当に書き換えたい場合は、独自のスタイルシートでこれを行うことをお勧めします。
これをお伝えしたので、私はこのプロジェクト用に独自のスタイルシートを作成しました。Circlifulスタイルを書き直すことはしません。 Webページ自体にはデフォルトのレイアウトが必要です。これは本当に簡単に設計できます。 コンテンツ領域は、円グラフの小さなセクションの中央に配置されます。 各領域は、元の#stats div内の行コンテナー内を自由に移動します。
<pre lang="PHP" line="1">/** page structure **/ .wrap { display: block; margin: 0 auto; max-width: 800px; } #intro { display: block; margin-bottom: 25px; text-align: center; } #intro p { font-size: 1.8em; line-height: 1.35em; color: #616161; font-style: italic; margin-bottom: 25px; } #stats { display: block; width: 100%; padding: 15px 0; background: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; } #stats .row { display: block; } .circle-container { display: block; float: left; margin-right: 55px; margin-bottom: 45px; } .circle-container h3 { display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; } </pre>
各セクション内で、コンテンツは.wrap div内に保持され、中央に固定されます。 また、円要素を自由に移動するには、すべてが正しく配置されたままになるように、追加の.clearfixコンテナが必要です。
<pre lang="PHP" line="1">/** clearfix **/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } </pre>
このclearfixクラスは 、長年 、自由に移動する要素を持つコンテナソリューションとして知られ ています。 通常、それらはドキュメントのテキストから削除され、元の幅/高さの値を保持しません。 ただし、これにより、 ＃statsコンテナが一定に保たれ、より多くのコンテンツ用のスペースが残ります。コンテンツはページの下部に配置されます。
最後の仕上げ
それで、生地をこねて、パイ用のベーキングトレイを満たし、オーブンに入れて、サンプルを取る準備がほぼ整います。 すべてが十分に見える場合、最後のステップは何ですか？ このプロジェクトを装飾するには、jQueryコードが必要です。
このHTMLページの下部にある新しいタグスクリプトを開きます。 JavaScriptの小さなスニペットが含まれます。 すべてのHTML5データ属性を使用したため、jQueryオプションを呼び出す必要はありません。 スクリプトは、 divの各円でCircliful関数を実行するだけです。 .circlestatなどの重複したクラス名を使用すると、プロセスが非常に簡単になります。
<pre lang="PHP" line="1">$(function(){ $('.circlestat').circliful(); }); </pre>
jQuery構文に慣れていない人のために、簡単な説明を提供します。 ドキュメントが読み込まれた後、新しい関数を起動します。 内部目標は、 .circlestatクラスを使用してcircliful（）関数を実行するすべての要素です。 これにより、アニメーション効果を作成するCirclifulプラグインが実行され、追加のコンテンツ/色が適用されます。
これらのサークルが常に最良のソリューションになるとは言えません。 私は言葉や数字に基づいているが、そのような仕事には基づいていない多くのポートフォリオを見ました。 まれにこれらのサークルを使用することを検討し、単純なスキルを超えた他の目的のためにそれらを借りようとします。 統計をパーセンテージで測定する必要はありません-事業に携わった年数、プロジェクトの合計数、または同様の数値を表示できます。 私のガイドのコピーを無料でダウンロードして、コードを試して、プロジェクトにより適したものにすることができます。