技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > jQueryでパスを使ったアニメーション【デモつき】
2013/11/29ホームページ制作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

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと
紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

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

お問い合わせ