()

咲-Saki-のブログです。

推奨ブラウザ:Google Chrome / Firefox
非推奨:Internet Explorer / Edge(表示の不具合に対応中です)
Edgeで閲覧の際に画面の一部がぼやける問題は解消しました。
当サイトで使用している画像その他著作物の著作権は、すべて各著作権者様に帰属します。


アラサーだよ!#

scoyan_card5.png


弊ブログのお客様にはおなじみ?すこやんカードです。

これは一枚の画像ではなく、動く背景画像の上に、一部が透過している前景画像を載せています。
動くJavascriptというサイト様の記事を参考に、はじめJavascriptで背景を動かしていましたが、onloadというイベントハンドラを使っていて、これは同時に別のonloadを使ったプログラムがあると、どちらかが止まってしまうという難点がありました。
jQueryを使えば何とかなるという情報も得ましたが、jQueryはちょうど昨日勉強を始めたばかりで、当然その時は何の知識もありませんでした。
そこで、CSSで背景を動かすことにしました。
CSS3のanimationプロパティを使うやり方なら、わりと簡単そうに思えたので。
まずテストとして、ブログの背景画像を動かしてみました。
動きました。
次にすこやんカードに応用しました。これもあっさりとできました。
上のやつが一応の完成品です。

ただ問題として、
  1. CSS3に未対応の古いブラウザでは動かない。モダンブラウザでも、Chromeで動かない()。InternetExplorerではどういうわけかサイトの動作が重くなり、GIFアニメ画像(まとめアンテナ様のバナーなど)までがカクカクになる。
  2. スマホやケータイでは背景画像そのものが表示されない(これはJavascriptでも同じことですが)。

うーん残念。
というわけで、今回の牌テクノロジーは(も)大事なところには使えないようです。

でも、せっかくなのでソースコードを
(見やすくするために主要でないプロパティやベンダープレフィックスを省略しています)

スタイルシート

div.scoyan_card_css{
  display: table-cell;
  background: url(背景画像のURL) repeat;
  animation: bg_scoyan_card 400s linear infinite;
}
@keyframes bg_scoyan_card {
  0% {background-position:4000px 0;}
  25% {background-position:0 -4000px;}
  50% {background-position:-4000px 0;}
  75% {background-position:0 4000px;}
  100% {background-position:4000px 0;}
}

HTML

<div class="scoyan_card_css">
  <img src="前景画像のURL" border="0" width="auto" />
</div>

keyframesの中でアニメーションを具体的に定義し、セレクタ内のanimationプロパティでスピードなどを制禦しています。
セレクタをID指定のdiv#ではなくクラス指定のdiv.にすることで、同じページ内に何箇所でも同じアニメを表示できます。
上の例は野球のダイヤモンドを回るような単純な動きですが、工夫次第でもっと面白い変化が表現できると思います。
前景画像をGIFアニメにしても面白そうですね。

あ、この背景画像は阿知賀編のあの映像をキャプチャしたものがもとになっています。コードに4000pxとか書いてあってぎょっとされた方もいるかもしれませんが、小さい画像をCSSでタイル状に並べているだけです。
(よく見ると継ぎ目がくっきりはっきりしてましてよ!)

ぼちぼち頑張ります。
ではまた。


【4月10日追記】
Chromeでも動くようになりました。
たまたま@-webkit-keyframesの{}の後ろにカーソルを合わせたら、たぶんコメントアウトで使った全角スペースが残っているのが見つかり、うわキモいとこれを削除したら解決していました。
…くっだらねー。バグなんて大抵こんなもんじゃね(ニワカ談)

先週末、弊ブログへの訪問者が一万人を突破しました。

チラッとでも覗いて下さる方、コメントを残して下さる方、記事の誤りを指摘して下さる方、…
皆様の訪問がいちばんの励みになっています。
本当にありがとうございます!

一万UUの内訳としては、やはりネタバレの時が圧倒的に多いです。
リンク元ページの統計を見ると、普段はまとめアンテナ様から来て下さる人がほとんどですが、YGとBGの発売日には検索エンジン経由の方が増えます。咲 142とか、そんな感じで。

今回はブログタイトル繫がりで何か企画したかったのですが、何も思いつきませんでした…

それで、ネタになるかもと思ってつい今し方、咲-Saki-キャラソート様を、二度ほど寝落ちしながらやらせて頂きました。
一位はすこやんでした。

ここで168位まで発表して誰得かわからないことに気づいた(遅)ので、やめます。
面白可笑しくいじるスキルもないし。


ブログのデザインを少し変えています。
背景を動くようにしてみたのですが、IEとFirefoxでは動作確認しましたが、Chromeでは動きません他のブラウザはわかりませんすみません。


あと、どうでもいいことですが前の記事に書いた高浜行きは雨天中止になりました。


では、今日はこのへんで失礼致します。

日曜、車の定期点検に行くNSです。
ディーラーさんが土浦市の北の外れにあるんですよ。
高浜まで15分ぐらいで行けるんですよ。
また行っちゃおうかな~

以下、ネタバレ注意でお願いします。
続きを読む


ちょっとちょっと、聞きました?奥さん!

愛宕の奥さん、41歳なんですってー(公式発表あり)

airmaster-25-116(194)a.png



23歳の誕生日の四日後に洋榎を産んでることになるので、今のインハイ世代の保護者たちの中でもかなり若い方と思われます。
まじめな話、綺麗なアラフォーですよね。

あ、世の中には可愛いアラフォーもいますけどね!

atiga-5-123-01a(16).png




優希ちゃん、今日の本題は何でしたっけ?

saki-141-06-04.png


そうそうこういうやつ。
saki-141-06-03.png

これとかも。
nakinoryuu.png


不要牌を切り出すとき、その牌を浮かせて表現するんですよね。
たったそれだけのことなのに、ブログの記事で画像タグを並べるやり方だと、なかなか調節が難しいわけです。
「浮いた牌」を別画像として登録すればいいんですけど、別途約40枚の画像ファイルを用意するのは大変。

そこで先日も紹介したスプライトさんに、再びお出で願おうと、こういうわけですよ。

SP_ancoro_blue2.png

スプライトさん(初代)です。
今回はわかりやすいように、透明な部分はグリーンで表示しています。
作るときに浮かせる場合があると考慮してればよかったんですが、今更言っても仕方ない。
なので、これをベースにver.2を作ることにしました。


saki-141-06-03a.pngまず、ハイテクノロジーによって表示されている上のダヴァンさんの手牌の画像をお手本に、AとBの長さを測ります。ここはもちろん目測でもいいんですけど。
次に同じ比率の隙間が何ピクセルになるか計算し、スプライト画像の上半分の40牌を、列ごとにずらします。
今回は書き出しサイトのお世話にはならず、画像編集ソフトでパパッと済ませました。

SP_ancoro_blue2.png


この画像をアップロードしたら、最後ににスタイルシートを書き変えます。
縦にすらしただけなのでx座標の値はそのまま。
y座標も、二列目以降にずらした分を足し算して(値はマイナスですが)オフラインのテキストエディタで置換すればすぐに終わります。
そして、今回の目玉、浮かせる牌用のクラスを新たに定義しなければなりません。
これは浮かせない牌の高さに隙間のピクセル数を足すだけなので、結局
  1. 浮かせない牌のクラスをコピペ
  2. 浮かせる牌のクラス名を適当に置換( { _k{ など)
  3. 浮かせる牌のheightの値を書き変え
の3ステップで終わりです。
あ、2,3では範囲指定を忘れないようにします。

以上で必要な作業は終わりです。
いじったのは画像とスタイルシートの関連づけだけですから、過去記事のHTMLのコードはそのまま使えます。

では最後に、この新しいスプライトで牌画を表示してみましょう。

メグの手牌
  

竜の手牌
     

   

   

   


ていうか竜さんのツモすごいっすね。
NS所蔵の哭きの竜1巻がどこかの地層に埋もれ中で発見できなかったので、上の画像は急遽ネットで拾ってきたやつです。


しかしその後いろいろ調べてみると、今はSVG画像というフォーマットが主流になりつつあり、ラスタ画像のCSSスプライトはもう古い技術らしいです。
うーん、もっと勉強しなくては…

saki-008-186-01(fksk).png

NSハユ―the dawn of aged―


やっと高浜再訪が叶いました。

行ける日に限って雨が降ったりすることが重なり、その度にまたこの次でいいやと先延ばしにしてたんです。
そこそこ近いからいつでも行けるという甘えもありました。

ククク…ッ貴様のすこやん愛はそんなものか?という内なる声をかき消すために、サイドバーのすこやんカード(第2弾スターカードver.)をちまちま改造したりして無聊を託つ日々…乏しいな。闕望したよ。

ともあれ!前の記事すこやんの通学路探索を書いてからもうすぐひと月になるわけで、そろそろ行っておかないとこのまま一生行けないかも…!?と不安になり、さっさと出掛けることにしました。朝の四時半のことです。

しかしこの日は放射冷却?とかでfog大発生、道路はスモークだばだば状態。
まるで…闇ん中におるような…
狭い道では対向車が来ないことを祈りつつ、安全運転に努めましたワハハー
幸い石岡市に入ったころには濃霧も晴れ、40分ほどで無事、高浜に到着しました。
続きを読む

阿知賀編BDBox精進明けのNSです。

では、以下ネタバレ注意でお願いします。
続きを読む

このページのトップヘ