記事の詳細

昔、個人ブログでカーソルをキラキラさせたりマウスストーカー?を設置したりするのが流行りましたが、アレをスマホでも実現できないものかと遊びで作ってみたものをご紹介。
タップした箇所がキラキラする仕様を想定。

動作サンプル http://aimers.jp/kirakira/
ダウンロードはこちら
touch関数を使っているのでスマホの実機で見てください。

今回は有名なスライドショープラグインBXsliderの上で動作するようになっておりますが、jqueryで動作するので特定の要素(DOM)に指定できます。

キラキラの作り方

HTMLやjava scriptは上記サンプルを見てもらうとして、一番キモとなるのはやはりキラキラのアニメーションです。

今回はAPNGという透過アニメーションPNGを使用しました。
APNGとはGIFアニメーションの上位互換です。
ただ注意点が1つあって、スマートフォンのブラウザ及びPC版FIREFOXでしか動作しません。

まずはadobe FLASHでキラキラアニメーションを作成します。
(作り方わかねーよって方は最新のphotoshopであれば簡単なアニメーションが作成できるのでお試しあれ)

そして1コマづつPNGで出力した物を合成ツールでアニメーション化します。

合成ツールの紹介記事はコチラ
http://matome.naver.jp/odai/2141225961613637001

以上です。
応用でキラキラのやり方は色々あると思いますが
似たようなモノを作りたいと考えてる人のヒントになればいいかと思います。

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AIMERS CREATEとは

AIMERS CREATEは、東京都と福岡県うきは市を中心にホームページ制作・Webデザインを行っております。 お見積もりや運営などご不明な点がありましたら、お気軽にお問い合わせメールフォームからお申込下さい。迅速に対応します。 お問い合わせをいただきましたら、電話かメールにてご連絡を致します。 AIMERS CREATEをもっと詳しく

おすすめ記事

登録されている記事はございません。

ページ上部へ戻る