記事一本にまとめるつもりだったんですが、あんまり長くても…と思い、やっぱり分載というか短期集中連載にします。

背景スイッチを作ってみた

えーブログの背景を動かしてみたものの、延々と動いているのも辛いので、動かしたり止めたりができるようにしたい！
ということで、あれこれ調べてやってみました。

$(function(){
  $('#btn_takahama').click(function(){
    if($('#takahama').css('animation-play-state') == 'paused')
      {$('#takahama').css('animation-play-state','running')};
    else
      {$('#takahama').css('animation-play-state','paused')};
  });
});
生まれて初めて、コピペではなく自分で書いた jQuery です。
まあ出来上がってみれば非常に単純なコードですけど…
"takahama"は高浜の背景画像が貼ってある body のID、"btn_takahama"は右下の茶色のボタン領域 div のIDです。
ここでやっていることを、むりやり日本語で書いてみます。
次の関数を実行せよ{
  "右下のボタン"がクリックされた時には次のようにせよ{
   "背景画像"の"アニメの状態"を示すCSS属性の値を取得し、それが"一時停止"なら
      {"背景画像"の"アニメの状態"を示すCSS属性に"再生"という値を設置}。
   そうでないなら
      {"背景画像"の"アニメの状態"を示すCSS属性に"一時停止"という値を設置}。
   }。
}。
要約:背景のPLAY/STOPをボタンで切り替えやがりなさいですわ！

実は、最初はボタンを作る予定はありませんでした。
もっとシンプルに、背景画像のクリックで切り替えたかったんです。
$(function(){
  $('#takahama').click(function(){
    if($(this).css('animation-play-state') == 'paused')
      {$(this).css('animation-play-state','running')};
    else
      {$(this).css('animation-play-state','paused')};
  });
});
これがどうしてもうまくいかなかった。
背景クリックでの切り替え自体はできるんですが、背景ではない部分をクリックしても切り替わってしまうんです。
おそらく"takahama"が body要素であるからではないかと推測しています。
body要素はこのページを表示しているウィンドウ全体なので、どこをクリックしても body#takahama がクリックされたと認識されてしまうらしいんです。
どうすれば上に子要素孫要素のある領域を除外できるのか、思いつけませんでした。
というわけでボタンを設置することにしたのデス。逃げたんだな　そうデス

これがボタンのデザイン。
/*固定ボタン(背景用)
----------------------------------------------- */
div#btn_takahama{
  position: fixed; right: 10px; bottom: 10px; /*画面上の位置*/
  border-radius: 4px 4px; border: 2px ridge White; /*枠線*/
  padding: 4px; /*内側の余白*/
  background-color: #755;  /*ボタンの色*/
  font-size: 0.9em; color: #ddd; /*文字の大きさ・色*/
  text-align: center; /*文字の横位置*/
  transition: ease 0.3s; /*切り替えのタイミング・速さ*/
}
#btn_takahama::before{ /*ボタンに表示する文字*/
  content: "Click Me"; /*画像も表示可*/
}
#btn_takahama:active{ /*クリックした時のデザイン*/
  position: fixed; right: 8px; bottom: 8px;
  border-radius: 4px 4px; border: 2px ridge White;
  padding: 4px;
  background-color: #a88;
  color: White;
  text-shadow: 1px 1px 1px Black; /*文字の影*/
}
ボタンの位置があっちへ飛んだりこっちへ飛んだり、画面全体を覆いつくしたり…
こんな小さいボタン一つに大童でした。
慣れたら2～3分でできそうなんだけど、慣れない。

タグ ：
#CSS
#jQuery