CSSアニメの記事修正と「1文字ずつ表示」

CSSアニメの記事修正

現在作成中のスマホアプリ(後述)が実機テスト段階でアニメが再生されない問題に
ぶつかりました。先週追加したCSSアニメのテクニックを利用したのに何故?
 
原因はCSSアニメのtransitionはiOS6ではベンダープリフィックス-webkit-が
必要なためでした。CSSアニメの記事2ページ目では動画で動作していることが
確認できますが、これはiOS7のシミュレーションのため-webkit-が無くても
機能したようです。私の実機はiOS6のためアニメしなかったので問題が発覚。
 
ということでCSSアニメの記事とサンプルで、transitionの部分にすべて
-webkit-を追加しました。これだけでは記事が寂しいので、以下の記事を追加。
 
 

フェードを使わない1文字ずつ表示

今作成しているアプリで長文を表示する箇所があり、読みやすくするために
1文字ずつ表示数仕組みを作成しました。
googleで検索するとプラグインやサンプルが結構見つかるのですが、
スマートフォン用なのでフェードは使わない方向で自作することにしました。
→サンプル:1文字ずつ表示する
 
startボタンをクリックすると表示がはじまります。即興で作成したので
説明ページは作成していません(この先作成するかも分かりません…)。
しかし、ソース内に説明を書いておきました。
 
仕組みとしては「typeRoutine」内で文字を追加、このときテキストをグレー
に設定するクラス(spanタグ)を付けることで、最初は半透明っぽく表示します。
 
その後「spanRemoveFunc」でspanタグを削除してグレーを解除します。
つまりグレー→黒の2段階だけなのですが、実際に確認するとフェードっぽく
なっているのではないでしょうか?
 
スクリプトも初心者には難しい正規表現は使っていないので解読しやすいと思います。
文字中の「@」で「改行と待ち」、「$」だけだと「待ち」だけをするようになっています。
 
 

七並べ占い

でもって、これを利用するのが以下のアプリ。「七並べ占い」です。実は10年ほど前に
趣味で作成したコンテンツの焼き回しです。占いの結果に上記の仕組みを利用します。
今、こんな感じになっています。↓(クリックで拡大)
nana
 
上図左で出すことのできるカードをcss3のドロップシャドーで光らせているのですが、
PCのブラウザだと問題ないのにシミュレータ/実機だとカード全体がぼやけてしまいます。
さらに動作がとても重くなってしまい実用的でありません…。
光らすのはやめよう…。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


3 × = 三


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>