アニメ/ゲーム系のサイトで活用しやすいキャラクターの切り替え&パーティクルアニメーションを作った | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、フロントエンドエンジニアの雅(みやび)です。 以前、文具が美少女になって戦う完全新作スマートフォンゲーム「ステリアデイズ・ウィキッド」の公式サイト制作を弊社が担当させていただいたのですが、その際に... ゲーム内のキャラクター紹介で「文具⇔美少女の切り替え機能&エフェクトアニメーション」を付けて欲しいというご依頼をいただきました。 プラグインなどを探しても上手く当てはまるようなものがなかったので、1から作成してみたところ様々なシーンで活用できそうだったので、今回は別途作成したデモを用いながらどのように実装したのかをご紹介しようと思います。 完成デモ 今回は「卵⇔ひよこ」の切り替えでデモを作成しました。ボタンをクリックする度にパーティクルが生成され、キャラクターが相互に切り替わるというものです。 ゲームのキャラクターの切り替えには「CSS3 アニメーション」と「jQuery」を使
温泉の湯気をSVGとCSS filterでアニメーションで実装してみた | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
はじめまして、WEBコーダーのばやしです。 今回は、弊社イロコトでWebサイト制作を担当させていただきました箱根の日帰り温泉「森の湯」の公式サイトで使用したアニメーションを紹介します。 完成形 箱根の日帰り温泉「森の湯」 https://www.morino-yu.com/ 上記サイトで使用したもののうち、 ・メインビジュアルにうっすらとかかる湯気のアニメーション ・右下のバナーの表示 についてサンプルコードを提示しつつ紹介していきます。 湯気のアニメーション SVGとCSS filterを利用したアニメーションになります。メインビジュアルの写真の上に漂う湯気を再現することで、箱根温泉の雰囲気を感じていただきたいという目的があり実装しました。 湯気を形作るSVGの作成 Adobe Illustratorにて、湯気のベースとなるSVGを作成します。規則性が無いようなぐちゃぐちゃとした図形であ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
