スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

prefix

without prefix


div.css-testbox {
    margin: 10px auto;
    width: 300px;
    height: 300px;
    border: solid 1px #cdcdcd;
}
div.box-prefix {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -o-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -ms-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
}
div.box-without-prefix {
    border-radius: 10px;
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}
@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg)
    }
}
@-o-keyframes rotate {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg)
    }
}
@-ms-keyframes rotate {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg)
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg)
    }
}
/*
    animation-name: ;keyframeの名前
    animation-duration: ;実行時間(1000sm>1s>1秒)
    animation-timing-function: ;easing
    animation-delay: ;開始時間(1000sm>1s>1秒)
    animation-iteration-count: ;実行回数(infinite>無限)
    aniamation-direction: ;反転再生(normal,alternate)
*/
.animation-prefix {
    -webkit-animation: rotate 5s ease-in-out infinite;
    -moz-aniamation: rotate 5s ease-in-out infinite;
    -o-animation: rotate 5s ease-in-out infinite;
    -ms-animation: rotate 5s ease-in-out infinite;
}
.animation-without-prefix {
    animation: rotate 5s ease-in-out infinite;
}
/*
    transition-property: ;cssプロパティ名(all,none,プロパティ名)
    transition-duration: ;実行時間(1000sm>1s>1秒)
    transition-timing-function: ;easing
    transition-delay: ;開始時間(1000sm>1s>1秒)
*/
.transition-prefix {
    width: 100%;
    height: 100%;
    -webkit-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -moz-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -o-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -ms-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
}
.transition-without-prefix {
    transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
}
.transition-prefix:hover { width: 80%; height: 80%; } .transition-without-prefix:hover { width: 80%; height: 80%; }
いつも思い出せないcss3 animationとtransitionとプレフィックスのメモ。

マウスオーバーかタッチでtransitionを実行。

プレフィックスがあると適用されないプロパティもある。

当然ないと適用されないプロパティが沢山

やっぱし併記が必要。

早くプレフィックス無しで動いて欲しいな。


 最近音楽系アプリが楽しくてしょうがない。

とりあえずielectribeとnanostudioを入れてみんだけど、

すごすぎる!昔一生懸命お金貯めて買った機材の 2割 2%くらいの値段で

同じようなことが、、、

そんでせっかくだからHTML5でBGM再生しようと思ったんだけど

どーにもループがうまく出来ない。なぜ?

途切れるんですよ、繋ぎ目で。

なんかいろいろ試したけどsetTimeoutで交互に繋げるのが

一番スムーズになったみたい。

でもiOSではまだ1音しか鳴らせないし。

なんかもっとスムーズに繋げる方法どなたかご存知ないでしょうか??


そんで全然関係ございませんが、なんとなく今更jQtouchって

どんな感じかしらと思って使ってみました。

なにを作ろうかと考えてまたもやHTML5、CANVASにてスクラッチカードもどきを作成。




safariかChromeじゃないとうまく表示できません!

4 / 6同じ絵柄です。2箇所まで削れて、絵柄が合えば貯まっていきます。

3箇所以上削る、絵柄が揃わないと消えます。

scratch card

cake_scratch
デフォルト
とりあえず普通に画像がシャッフルされます

default_scratch
カスタム
cakeがかわいい

probability
確率変動??
1箇所スクラッチで画像ごとに50%、30%、10%、8%、2%と出現確率を設定しました
社内SEにょえのブログ参考に
させていただきました。

コード

scratch.js
default_scratch.js
scratch.css
<div id="scratchBox">
        <div id="cover">
            <span id="back" class="btn">&lt;&lt;back</span>
            <span id="next" class="btn">Loading....</span>
        </div>
        <canvas id="can"></canvas>
        <canvas id="can_bg"></canvas>
        <canvas id="can_is"></canvas>
    </div>
scratch.js、scratch.cssがまぁベースになりまして、

default_scratch.jsにて各種設定を指定して実行しています。

default_scratch.jsとscratch.cssを少しいじりまして上のスクラッチを作成してみました。

引数の説明はdefault_script.jsファイルに記載してあります。

canvasを3枚重ね、1枚目にスクラッチ部分を描き、2枚目に画像を配置、3枚目にパスを描き

そこでisPointInPathにてどこが削られたか判定しています。

案の定retinaディスプレイに少々躓きました、、が大分なれてきました!

画像を倍で作成し、半分で表示ってやつですが、同じようにcanvasもscale(2,2)にて

半分表示を行っているのですが、タッチ座標を取得する3枚目もscale2倍にして

悩んでしまいました。。

勉強がてら無理してクラスを使って作ったまとまりのないコードになり、

大分前に中途半端に作成したものを、再度作り直したりしたので、

かなり無茶な部分も多いと思いますがよかったら使ってみてください。

ちょっとずるもできちゃいますし、コードに関しても責任は持てませんが、、、。

canvasとコールバックで出てくるページに背景画像を

指定して、スクラッチ分のお好きな画像を用意し、指定すれば結構簡単にカードがつくれます!

色々素材も作ろうと思ったんですが時間がなくてできませんでした!!

とりあえず作ったドットのパターン素材だけ

ドット

さみしい。いずれもっと増やしたい。

チェックのパターン素材は

Tartan Designer

この素晴らしいサイトで作成できます。

かわいいケーキのイラストは素材庭園さんよりお借りしました。

jQtouch

そんでそれをアプリの一部的な使い方ができるかなぁとか思い、jQtouchに組み込んでみました。

icon

iPhone,iPadの方はこちらからどうぞ。

一応iPhoneのフル画面に最適かしていますので

下のツールバー分ちょっと狭い感じですが、、、、。

以前jQueryMobileを使ってみたのですが、正直自分的にはjQueryMobileの方が良かったです。

いろいろカスタムもしやすそうだったし、情報も多かった。

jQtouchはあまり活発ではないようですね。

がしかし、一瞬でiPhoneサイトが完成します!

すばらしい!

スマフォ最適化の勉強中ですがアンドロイドを触ったことがない!!

うーんほしい。いろいろ試してみたい。

けどこれからはデータベースの勉強に没頭しよう。

1

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< June 2012 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others