このサイトは、只今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

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US