このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

HTML5 Webストレージでデータを保存 その3(クエスト進行CSS3アニメーション)

HTML5

2013.02.08

この記事は最終更新日から1年以上が経過しています。

前回の

HTML5 Webストレージでデータを保存 その2(なんちゃってソーシャルゲーム作成)

続きになります。

今回は、画面仕様である「 背景が変化する。(進んでいる感のアニメ)」の作成を行いたいと思います。

CSS3を使うことによって色々な表現ができるようになりました。

そのなかでも多彩な表現が可能となるkeyframe アニメーションを使ってクエスト進行の作成を行いたいと思います。

keyframe アニメーション

.elm { -webkit-animation: 'anime' 1s ease-in 1; } 
@-webkit-keyframes 'anime' { 
  0% { opacity:0; } 
  100% { opacity:1; } 
}

このようにアニメを行いたい対象の要素に対して-webkit-animationの指定を行い、

@-webkit-keyframes ‘任意の名前’で行うアニメーションの指定をすることによって

様々なアニメーションを行うことができます。

上記の例では1秒間の間に透過度100%から0%に変化させるアニメーションの指定を行っております。

今回はクエスト進行なので、人気のソーシャルゲームにあやかることにして、

「ミリオンアーサー風」な感じで、歩いている感じのアニメーションを作成いたします。

拡散性ミリオンアーサー

販売元: SQUARE ENIX Co., Ltd.

© 2012 SQUARE ENIX CO., LTD. All Rights Reserved. Developed by Mighty Craft Co.

では、まず背景のズームを行います。

@-webkit-keyframes questMove {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

-webkit-transformを使い、zoomさせ、opacityで透過させていきます。

さらに歩いている感じを出すために、positionで操作しましょう。 (transformで操作しても良いのですが、すでにscaleの設定しており細かい調整が必要となってき複雑化してしまうので別個に設定いたします。)

.questImg img {
  position: absolute;
  -webkit-animation: questMove 1s ease-in;
  z-index: 1;
}
@-webkit-keyframes questMove {
  0% {
    -webkit-transform: scale(1);
    top: -10px;
    opacity: 1;
  }
  20% {
    top: 10px;
  }
  40% {
    top: -15px;
  }
  60% {
    top: 15px;
  }
  80% {
    top: -20px;
    opacity: 0.1;
  }
  100% {
    top: 0px;
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

positionの指定をすることによって、zoomしてくる画像がいろんな要素にかぶさってしまうため、h1、.statusView、.btnにz-index:10;を指定します。

また、.mainViewにはposition: relative;の指定を行い、基準点を作ります。

そんな感じで作ったのが以下のデモになります。

デモページ

http://webcyou.com/demo/js/webstorage/index002.html

な、なんとなくそれっぽいですよね。。。

続いて、ボタンを押すとCSS3アニメーションが動くようにしましょう。

クエスト進行CSS3アニメーション

背景画像は「通常は固定」「ボタンを押すと動く」という流れを作ります。

先ほど作ったCSSも一部修正します。

CSS3

.questImg img {
  position: absolute;
  z-index: 1;
}
.questImg.move img { -webkit-animation: questMove 1s ease-in; }

このように、.questImgに.moveが付与されるとアニメーションが始まるように修正します。

それでは、ボタンが押されるとアニメーションが始まるように、JavaScriptで設定を行います。

JavaScript

function game(){
  var btn = document.querySelector('.btn'),
      questImg = document.querySelector('.questImg'),
      img = questImg.querySelector('img');
  
 img.addEventListener('webkitAnimationEnd', function(){
      questImg.classList.remove('move');
  }, false);
 
 btn.addEventListener("click", function(){
    questImg.classList.add('move');  
  }, false);
}
window.addEventListener("DOMContentLoaded", game, false);

とりあえず、必要最低限に記述してみました。

DOMContentLoadedでDOMが読み込み完了したら、game関数を実行させます。

querySelectorを使いbtn と p要素であるquestImgと背景画像であるimgを取得し、変数に格納。

(querySelectorに関してはこちらを参照に)

Javascript querySelector、querySelectorAll

imgに対してaddEventListener 、webkitAnimationEnd でimg(背景画像)のアニメーションが終了すると、親要素のpであるquestImgに付与されているclass”move”を削除するように記述しております。

(webkitAnimationEndに関してはこちらを参照に)

css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd

また、btnに対してaddEventListener、clickでbtnがクリックされるとp要素であるquestImgにclass”move”を付与するように記述しております。

で、作成したデモは以下になります。

デモページ

http://webcyou.com/demo/js/webstorage/index003.html

なんとなく雰囲気が出てきましたね!

では今回はここまで。

Comment

Related Article

iPhone5s,5c 発表!! という訳でAppleサイトの仕様とかについて

2013.09.15

HTML5 History APIについて

2013.02.26

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。その2

2013.02.11

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。

2013.02.11

HTML5 Webストレージでデータを保存 その6 複数保存(なんちゃってソーシャルゲーム・quest進捗、ex調整)

2013.02.10

HTML5 Webストレージでデータを保存 その5(なんちゃってソーシャルゲーム・Lv、Gold編)

2013.02.09

HTML5 Webストレージでデータを保存 その4(なんちゃってソーシャルゲーム・ゲージ)

2013.02.09

HTML5 Webストレージでデータを保存 その3(クエスト進行CSS3アニメーション)

2013.02.08

HTML5 Webストレージでデータを保存 その2(なんちゃってソーシャルゲーム作成)

2013.01.22

HTML5 Webストレージでデータを保存

2013.01.20

CATEGORY LIST

LATEST NEWS

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

iPhone

2021.09.05

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

tool

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

tool

2021.08.18

【2021】ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(月)まで。で購入したもの。

Game

2021.08.08

M1 Macで始める「ゼロからのOS自作入門」- 第1章

自作OS

2021.07.24

2021年6月 Amazonプライムデーで購入したもの。(今更)

イベント

2021.06.30

Go言語開発者、Unity開発者必見!! 【Golang】「クソコードをシンプルにする」,【Unity】「Singletonを使わないUnityを用いたApplication開発」

イベント

2021.05.23

TypeScriptでStateMachine

AI・Bot・algorithm

2021.05.16

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

M1 (Appleシリコン)Macで Widowsアプリを起動

mac

2021.03.27

M1(Appleシリコン)Macで、ファミコンソフトプログラミング。 サクッと開発環境準備編

Game

2021.03.21

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US