weather_appの背景をデザインした話

はじめに

今回はweather-appの背景に変更を加えたのでそのお話を記述していきます。

参考文献

1. CSS3でつくれちゃうアニメーション！ループして流れる雲
2. CSSアニメーションと背景画像で空に雲を流す
3. ★スタイルシートリファレンス background-repeat
4. Rails で背景に画像を表示したいのですが取り込み方を教えてください。

背景デザインをつくった

2のCSSアニメーションと背景画像で空に雲を流すにて記載されているプログラムを元に背景を設定した。

assets/stylesheets/weather.scssにて以下のデザインを組み込んだ。

/*背景デザイン*/
.sky{
  animation: cloud 25s linear infinite;
  background: image-url("clouds.png")
  ,linear-gradient(#bbe4fa, hsl(171, 40%, 91%));
  background-position-x: 0%;
  background-position-y: 35%;
  background-repeat: repeat-x;
  background-size: 800px auto;
  height: 100%px;
}

@keyframes cloud {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 800px;
  }
}

/*雨の背景*/
.rain{
  animation: rain 5s linear infinite;
  background: image-url("rain.png"), #C0C0C0;
  background-position-x: 35%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-size: 800px auto;
  width: 100%;
}

@keyframes rain {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 800px;
  }
}

雨とその他で背景の動きを調整する

雨の時とその他の天気の時でview側で読み込むcssを判断できるようにした。

<% if @weather.include?("雨")==true || @weather.include?("rain")==true%>
  <div class="rain">
<% else %>
  <div class="sky">
<% end %>

~コンテンツは省略~

</div>

最後に

今回の変更で雨の日は背景で雨が流れて、雨以外の日は雲が流れる設計になり前よりも直感的に使えるようになったので良い感じに改修できたかなと思っている。