この募集は2015年05月01日に終了しました。

【予算3-6万円】短編映画祭のサイトに曲線グラフを取り入れたいの仕事

【予算3-6万円】短編映画祭のサイトに曲線グラフを取り入れたいに関する仕事・募集案件ページです。クラウドソーシングのランサーズで、HTML・CSSコーディングに関する最適な外注/発注先をお探しの方、副業案件・求人をお探しのフリーランスの方はまず会員登録がおすすめです。

募集期間

5日間

提案数

5件

当選人数

0 件

(募集人数1人)

依頼の目的・背景: 【現状】
サイトはまだ未完成ですが、管理はWordpress4.2、X2サーバーで行っています。

【導入背景】
5分程度の映像を毎回1作品紹介していくのですが、作中の「見どころ」を曲線グラフで直感的に表現したいと思っています。

【依頼内容】
・1記事毎に1つ曲線グラフを表示したいと思っているので、元となるダミーグラフの実装をお願いします。
・またページパフォーマンスや管理のしやすさを考慮し、直に記述するより外部ファイルで読み込んだ方が良いのかなど、相談させていただければ幸いです。

【ブラウザ環境】
モダンブラウザおよびiOS、Androidを想定し、IEは非対応でもOKです。

【グラフの主な設定】※各部名称は補足のリンクより参照
・X軸は作品の尺の長さ（10秒ずつ位）、Y軸は見どころ度（0〜100％）
・X軸の目盛ラベルは表示、Y軸の目盛ラベルとプロットエリアの目盛線は非表示予定
・見どころとなる値にのみ「ポイントマーカー（丸ぽち）」をつけたい
・ポイントマーカーには波紋のアニメーションをつけたい（※1参考サイト）

———————————————————————————
↓補足の参照お願いします。

補足説明: 【相談の上、グラフに持たせたい機能】
・グラフがユーザーの目にふれた時点で、始点から終点に向けて線がたどるようなアニメーションを開始させたい（※2参考サイト）
・もしくは、下から浮き上がる曲線アニメーション（※3参考サイト）
・曲線の色と、曲線より下の塗りつぶし部分の色をCSSでグラデーションさせたい（※添付画像内参照）
・ポイントマーカーはクリックを可能にし、画像や解説を表示するためのモーダルウィンドウを開くようにしたい

※モーダルウィンドウまでの実装を含めるか否かは個別に相談させてください。ウインドウの動作は下記サイトのようなものをイメージしています。
http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

【グラフのアニメーション】
※1 波紋アニメーショングラフの参考（http://gionkunz.github.io/chartist-js/index.html）
※2 曲線グラフのアニメーション参考（http://www.amcharts.com/demos/css-animations/）
※3 曲線グラフのアニメーション参考（http://ascii.jp/elem/000/000/906/906795/index-3.html）

【その他参照】
・グラフの各部名称は下記サイトを参考にしています。
http://ms-excel.jp/excel-20.php

添付ファイル