やたら名前が長くなりましたが、PCパッケージ版向けのCSSのmask-imageとアニメを使ったトランジションのプラグインと、addClassによるインアウトアニメをかけるタグのプラグインです。分かれてますので必要に応じて入れてみてください。
新規タグを追加する方法としては荻原さんのプラグインを参考にさせていただきました。この場を借りてお礼申し上げます。ありがとうございました。
CSSのmask-imageはブラウザによっては動作しないため、PCパッケージ版での使用を推奨します。
そして処理の負荷が他のCSSアニメに比べて高いです。CPUとGPUをゴリゴリ使います。ハードウェアアクセラレーションを使うブラウザだとGPUが多めに使われるのですが、PC版の場合はCPUを食います。またレイヤーに処理する場合、画面サイズが大きいほど負荷が高くなります。そのためジャンジャンバリバリ使うとパフォーマンス的に厳しくなりそうです。お気を付けください。
methodの種類はreadme.txtに記載しております。このページの一番下にもあります。
timeはすべて1000です。
別ウィンドウで全画面表示＞ダウンロード（2018/02/25）
履歴：2018/02/01 CSSにも種類名を追加、ease類削除 履歴：2018/01/28 公開 ＜動作確認バージョン＞ ・ティラノスクリプトver461 ＜動作確認OS> ・Windows10 ＜動作確認ブラウザ＞ ・PCブラウザ：Chrome ※Edgeは動きません。スマホブラウザはノーチェックです。 ＜全体注意点＞ ブラウザによっては動作しないので、 PCパッケージ版での使用を推奨します。 ただスマホブラウザでも動くものはあると思います。 この辺はそれぞれテストしていただければと。 またインとアウトの方向を考えるのが面倒だったため、 左からインして右にアウトしていくアニメなど、 InLeftとOutLeftという名前にしています。 つまりインもアウトも同じ方向名です。 animate.cssと違うのでお気を付けください。すみません。 ＜導入方法＞ data>others>pluginフォルダにcss_maskフォルダを入れます。 first.ksなどから下記のようにプラグインタグで呼び出します。 [plugin name="css_mask"] ＜使い方＞ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆bgタグで使う。 [bg storage="rouka.jpg" time="2000" method="maskInUp"] ※cross指定は無意味になります。 また、timeがcross="true"時の感じになると思います。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆maskタグで使う。 [mask effect="maskInUp" time="1000"] [mask_off effect="maskOutUp" time="1000"] ※maskInCircleのみ、間にメッセージを挟むとマスクがおかしくなります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆transタグで使う。 [image storage="chara/akane/normal.png" page="back" layer="0" x="280" y="50"] [trans layer="0" time="1000" method="maskInUp"] [wt] インがやりやすいです。transの仕様上、連続してインアウトは面倒な気がします。
履歴：2018/02/17 init.ksからの呼び出しパスを思いっきり間違えていたので修正 履歴：2018/02/01 イージングをjQueryのcssで指定する形に変更 履歴：2018/01/29 イージングについての記述を追加 履歴：2018/01/28 公開 ＜動作確認バージョン＞ ・ティラノスクリプトver461 ＜動作確認OS> ・Windows10 ＜動作確認ブラウザ＞ ・PCブラウザ：Chrome ＜全体の注意＞ trans系の挙動ではないので、レイヤー指定ではpageはすべてforeにしています。 backに入れたい場合はJS改造が必要となります。ご了承ください。 ＜概要＞ ・[mask_anim] CSSのインアウト系のキーフレームアニメを jQueryのaddClass,removeClassを使って行うプラグインです。 css_maskのアニメで画像をインアウトさせる確認のために作ったので そのままmask_animタグという名をつけてしまいましたが、 bgのmethodに使われているanimate.cssのアニメも使えます。 つまりCSSアニメで要素をインさせたりアウトさせたりする時用のものです。 イージングは指定しない場合はJSと無関係に初期値easeが入ります。 CSS側でイージングを指定している場合は、空のままにしてください。 ・[mask_anim_mes] カレントメッセージレイヤーのアウターもこれでインアウトできたら楽なのでは、 と思いつきで作りました。アウターだけインさせたりアウトさせたりできます。 ついでにfixレイヤーも指定できるようにしました。でも何か違う感あります。 ＜導入方法＞ data>others>pluginフォルダにmask_animフォルダを入れます。 first.ksなどから下記のようにプラグインタグで呼び出します。 [plugin name="mask_anim"] ＜使い方＞ ◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇ ＜[mask_anim]タグについて＞ パラメータ name: "" アニメをかける対象をname指定します。こっちかレイヤーを指定します。 layer: "0" アニメをかけるレイヤーを指定します。こっちかnameを指定します。 wait: "true" アニメ終わりを待つかどうかを指定します。デフォルトtrue。 time: "1000" アニメにかかる時間です。 method: "" methodです。 easing: "ease" イージングです。ease,ease-in,ease-out,ease-in-out,linearが指定できます。デフォルトeaseです。 remove: "true" Outアニメ後に画像を削除します。デフォルトtrueです。 ＜注意点＞ アウトさせた後、画像を削除するようにしています。 レイヤー指定の場合はレイヤーの要素を空に、名前指定の場合は指定画像を削除します。 freeimageタグ、freeタグと同じ挙動です。 残したい場合は、remove="false"にしてください。 ＜使い方＞ インさせたい画像を先にimageタグで表示して、 mask_animタグをその後に置き、インさせます。 レイヤー指定にするとレイヤー全体にマスクがかかります。 名前指定にすると、その単体の画像に対してマスクがかかります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆レイヤー指定でインする [image storage="rouka.jpg" folder="bgimage" layer="0" x="0" y="0" time="0"] [image storage="chara/akane/normal.png" layer="0" x="280" y="50" time="0"] [mask_anim method="maskInUp" time="1000" layer="0"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆レイヤー指定でアウトする [mask_anim method="maskOutUp" time="1000" layer="0"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆name指定でインする [image name="akane" storage="chara/akane/normal.png" layer="0" x="280" y="50" time="0"] [mask_anim method="maskInUp" time="1000" name="akane"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆name指定でアウトする [mask_anim method="maskOutUp" time="1000" name="akane"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆animate.cssを使う（bgのデフォルトで指定できるmethodです） [image storage="rouka.jpg" folder="bgimage" layer="0" x="0" y="0" time="0"] [mask_anim method="fadeInUp" time="1000" layer="0"] [l] [mask_anim method="fadeOutUp" time="1000" layer="0"] ◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇ ＜[mask_anim_mes]タグについて＞ パラメータ layer : "message" アニメをかける対象レイヤーです。デフォルトmessage。fixも指定できます。 wait: "true" アニメ終わりを待つかどうかを指定します。デフォルトtrue。 time: "1000" アニメにかかる時間です。 method: "" methodです。 easing: "ease" イージングです。ease,ease-in,ease-out,ease-in-out,linearが指定できます。デフォルトeaseです。 ＜注意点＞ method名を判定して、イン時にレイヤーをvisible="true"状態にし、 アウト時にレイヤーをvisible="false"状態にしています。 自動で行われるのでお気をつけください。 またカレントメッセージレイヤーそのものではなく、 アウターレイヤーのみにアニメをかけます。 メッセージレイヤー本体は画面サイズで生成されるので、 アウターレイヤーにしないとアニメ処理が余分にかかっちゃうためですね。 ですのでメッセージを表示した状態でアウトさせると、 完全にアウトするまでに画面にメッセージだけ残る、ということになります。 [p]や[cm]の後、かつクリック待ちではない状態の時にお使いください。 複数メッセージレイヤーを表示している場合はカレントだけにかかります。 この辺雑ですみません。 layerをfixにすると、fixボタンにアニメがかけられます。 一つ一つ個別にかかるので、イメージと違う状態になるかもしれません。 ＜使い方＞ mask_animタグと同じような感じです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆メッセージレイヤーをインさせる [mask_anim_mes method="maskInUp" time="1000"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆メッセージレイヤーをアウトさせる [mask_anim_mes method="maskOutUp" time="1000"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆メッセージレイヤーとfixレイヤーをインさせる [mask_anim_mes method="maskInUp" time="1000" wait="false"] [mask_anim_mes method="maskInUp" time="1000" layer="fix"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆メッセージレイヤーとfixレイヤーをアウトさせる [mask_anim_mes method="maskOutDown" time="1000" wait="false"] [mask_anim_mes method="maskOutDown" time="1000" layer="fix"] ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝