一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. jQueryでパスを使ったアニメーション【デモつき】
2013/11/29Web制作JavaScript

jQueryでパスを使ったアニメーション【デモつき】

自分が頑張って仕事をすると、ほかの人の仕事の邪魔をするというジレンマ

20131129

改めてjavascriptについて

先日投稿したcanvasとは?ですがサンプルで動かしたものはjavascriptを使い cssだけでもできたりします。
canvasにしてもある程度の部分まではIE8でもjavascriptのライブラリを使用することにより 動作させることは可能です。
また、スマートフォンではdraggableが動作しないのですが、
こちらもjavascriptで 動作させることが可能です。

※前回使用したのはpep.jsです。
いくつか試してみたところ、今のスマホのgoogle chromeでは動かなかったりしたのですが
このプラグインは良好に動作いたしました
(ドラッグのイベント発火にちょっとコツがいるような感じですが)

で、javascriptすごい!
ってことで今回はちょっとがんばったのにボツになった javascriptのアニメーションです。
jqueryを使用すると要素のアニメーションはかなり楽に作ることができるようになりましたが
さらに複雑な動きをベジェ曲線をつかって動作させることができるというものです。

パラメータがちょっとだけややこしいです
x,yはそのまま座標です。
angleは2点(start,end)のそれぞれを向いた角度から右回りです。
lengthはそのままの距離を1とした値になります。

大まかな値はこちらで確認しつつ、細かい調整をすると早く作ることができると思います。

[get_20131129]

実際に動かしてみると

実際にみるとが簡単に作れるということです。

スタート

ちょっと楽しい動きをつけたい!スマホでも!というような案件にはピッタリかと思います。

参考サイト

https://github.com/weepy/jquery.path

この記事を書いた人:wada

エンジニア担当の和田です。 漆を塗ったりしていましたが最終的にプログラマーへと転職してしまいました。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-211-9898 / FAX.052-211-9899

お問い合わせ