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

web帳

記事詳細

2013.02.08

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

前回の

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

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

では今回はここまで。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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