POPSブログ

ブログ記事一覧: slice

jQuery CSS3 transit.js使用のボタン式画像分割アニメーション

jQueryプラグイン、jquery.transit.js、で簡単にCSS3 transitionの記述が出来ますので画像分割アニメーションに応用、回転も簡単に出来て便利、通常のjQueryアニメーションより軽快に動作。ボタンとHOVERサムネール表示形式にしてみました。

≫ 続きを読む

jquery 2015/08/15 pops
タグ:slice , Transition , jquery

jQuery CSS3 transit.js使用の画像分割アニメーション

jQueryプラグイン、jquery.transit.js、で簡単にCSS3 transitionの記述が出来ますので画像分割アニメーションに応用してみました。回転も簡単に出来て便利、通常のjQueryアニメーションより軽快に動作します。ほとんどflash AS3などと同様な処理がJSのみで可能です。

≫ 続きを読む

jquery 2015/07/27 pops
タグ:slice , css3 , Transition , jquery

CreateJS 大型画像分割(スライス) 2重DOORタイプ MENU

DOORタイプのエフェクトの下に中間層を置き、DOORと同じ大きさの角形を少し時間差を付けてスライドさせた。スライド方向を「対角 左右 上下」の 4DOOR 2DOOR のみに限定する。少し前であるが、TVのCMに有ったと思う。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/26 pops

CreateJS 大型画像スライス DOORタイプ MENU

大型画像の画像分割、DOOR 形式の画像エフェクトと「MENU」の組み合わせです。原則、2x2、x2x1、1x2分割の 4DOOR 2DOOR になります。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/18 pops

CreateJS 大型画像スライス(画像分割)、スライドMENU

大型画像の スライス(画像分割) and スライド MENUです。四角形スライスが主で、スライド、クロスフェードなどと組み合わせてみました。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。
TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/12 pops

CreateJS 画像分割アニメーション、一括画像読み込み、toDataURL()を使用しない方式 (easeljs-0.7用)

CreateJSを利用して、HTML5のCanvasで画像を分割してアニメーションさせます。drawImage()で画像を分割するのは変わりませんが、Bitmap()に変換するのにtoDataURL()を使用しない方式に改めましたので、若干処理が早くなります。また、不具合も多少減るようです。
easeljs-0.7(easeljs-0.7.0使用)。

≫ 続きを読む

javascript 2013/10/02 pops

CreateJS 画像を分割(複数)してBitmap処理、Tweenさせる処理を考える

画像を分割するには、Canvas処理の drawImage() を使用して画像を複数回トリミング、Bitmap化処理すれば良い事に成ります。Tweenさせるには少々の問題も出ますが意外と簡単に出来ます。他の記事でも扱っていますが今回は、簡単な「デモ」と共にまとめてみます。
easeljs-0.7 (easeljs-0.7.0)でのテストです。

≫ 続きを読む

javascript 2013/09/19 pops

CreateJS 画像分割アニメと、スイッチ風Circleボタン、サムネール表示の組み合わせ

CreateJSを利用してキャンバスに、角丸吹き出し形式サムネール、スイッチ風のCircleボタンを表示します。ボタンを「クリック」すれば「画像分割アニメ」表示します。従来のものと余り変化は有りませんが、多少規則化されたアニメーションを実行します。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/06/26 pops

CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ B

CreateJSを利用して、キャンバスにサムネールをwicks方式で表示します。サムネールを「クリック」すれば「画像分割アニメ」表示します。大変重く成りますので問題が発生し易い様です。画像分割アニメと、wicks方式サムネールのは、stage2 を作ると動かすのに便利ですが不具合が出る確率が大きいので「stage」1つにマトメました。デザインなど従来と少々違いがでます。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/06/17 pops

CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ

CreateJSを利用して、キャンバスにサムネールをwicks方式で表示します。サムネールを「クリック」すれば「画像分割アニメ」表示します。大変重く成りますので問題が発生し易い様です。画像分割アニメと、wicks方式サムネールの組み合わせな訳ですが、原因と対策を考えます。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/06/14 pops

ブログ記事一覧



[1]