HPリニューアル中

最近、HPの外観に不満が溜まってきたので、春休みということもあって作りなおしています。

jsやらHTMLやらCSSやら、書くのは別段苦手じゃないのですが、作りなおすたびに1から勉強している感じになってしまってううむ。

Webはブラウザのバージョンや仕様が頻繁に変わるので、2年くらいたって作りなおそうと思うと、やりたいことを実現するための手段が変わってたりするので厄介なんですよね。

記述のスタイルも推奨されるものが変わっていたりして、やはり作り直すなら最新の書き方で……とか思うといままでの知識(しかも半分くらい忘れてる)が通用しないことが多く、面倒くさいです(。>‿‿<。 )

 

さて、新しいサイトは、
・今までよりさらにわかりやすく、シンプルに
・動的に、ダイナミックに

というテーマで作っています。

いまのサイトを作った頃は丁度スマホが普及してきた頃とかで、まだユーザー数も少なく、プロセッサや回線も非力だったのでできるだけ静的にページを作った記憶がありますが、今回は趣向をかえて、ダイナミックな動きがあるサイトにしたいなーと思っています。ただ扱いがちょっと難しい。試行錯誤しています。

 

前置きが長くなりましたが詰まったところや忘れてたTipsをメモしておきます。割りと自分用ですが

 

canvasを背景として使い、上にボタンをのせる

canvasで描画している領域の上にリンクボタンを設置したい場合、canvasの機能で(canvas内で)ボタンを描画し、js側でマウスイベントを拾って飛ばす方法が一般的です。
ただ、条件を限定すれば、普通のリンクボタンをcanvas上に表示させることができるみたいです。

canvasに

を追加して、リンクボタンに

を追加すればOK。

canvasとボタンの透過を重ねたままで、表示&クリックさせることが出来ます。うまくやらないとボタンでcanvasの表示領域が隠れてしまったり、ボタンがクリックできなくなるのですが、上のようにして一応動きます。

 

canvasでアニメーションを書く

ゲームとかを作るときと同じように、

①clearRectで領域をリフレッシュ

②シーンを描画

③繰り返し

でOK。

繰り返しは、whileループとかで回すと制御を奪ってしまって問題になるので、手っ取り早く、jQueryのanimeteのstepオプションで描画関数を呼んでもらうのが楽ちんでした。

ループさせたい場合はsetTimeoutを使う。

 

canvasのサイズはHTML側にハードコードしないとダメ

html側のwidth,height指定で描画サイズのバッファを作っているみたいです。css側のwidth,height操作ではスケール変更を行うだけなので意図した表示にならない

 

background-colorのeasingにはjquery.cookie.jsが必要

インクルード忘れててあれ? って暫く悩んでました。

rbgaも使える。

 

.hoverでアニメーション中はマウスオンを反応させない

stop()を使う。忘れそうなので

$(this).stop().~

 

Sassを使おうと思ってたんだった

次つくりなおすときはSassかless使おうと思っていたんだった。CSSの拡張メタ言語ですね。

とりあえず秀丸の強調定義ファイルがあるSassを使います。

コンパイラはRuby入れる必要のないPreprosを。オートコンパイルしてくれるので楽ちん。

0 Comments

Leave a Reply

Your email address will not be published.