Posted on

ページを更新する度に背景の色が変わるキャッチコピー領域を作成してみました

ページのキャッチコピーの背景をどうしようかなと考えていた時に、ランダムで生成される四角形にしてみたらかわいいんじゃないかなと思ったので、作ってみました。モダンブラウザ用です。

サンプル

※表示を見たい場合は Result をクリック

四角形は可変なのでウインドウ幅を伸ばしたり、縮めたりすると動きがあります。

HTML

Walk on.

You have to learn to walk before you run.

四角形はli要素をJavaScriptで生成して、list_containerのul要素内に並べます。

CSS(抜粋)

// 外枠
#mosaic {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

// ul要素
#mosaic #list_container {
  position: absolute;
  width: 120%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -moz-align-content: stretch;
  -ms-align-content: stretch;
  -o-align-content: stretch;
  align-content: stretch;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  padding: 0;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

// li要素(四角形)
#mosaic #list_container li {
  -webkit-flex: 0 0 100px;
  -moz-flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  -o-flex: 0 0 100px;
  flex: 0 0 100px;
  list-style: none;
  height: 100px;
}

外枠の高さをli要素の3つ分を設定し、li要素の生成数が多くてはみ出るものはoverflow:hiddenで隠して見えないようにしています。

ul要素は、親要素のサイズピッタリにしてるとウインドウ幅を伸縮していると右端で段落ちが発生して四角形がなくなってしまいますので、幅を120%程度に広げておいて空白を防ぐようにしています。

JavaScript

    //ランダムな数を生成する関数式
    var randFnc = function(min, max) {
      return Math.floor(Math.random() * max + 1 - min) + min;
    };
    //出力先の指定
    var target = document.getElementById("list_container");

    //ブロック生成
    for (var i = 0; i < 200; i += 1) {

      var li = document.createElement("li");
      //ランダム色を生成 hslは色相, 明度, 彩度で指定する
      li.style.backgroundColor = 'hsl(' + randFnc(20, 186) + ', 100%, 86%)';
      //生成したリストを追加
      target.appendChild(li);
    }

    //背景を動かす
    setInterval(function(){
    	//はじめのli要素を変数に入れる
    	var changeItem = target.childNodes[1];
    	//要素の削除
    	target.removeChild(changeItem);
    	//要素の追加
    	target.appendChild(changeItem);

    },400);

色は生成時に全自動で作成しています。RGB指定だと色の彩度や明度もバラバラになってしまうので、HSL指定で明度と彩度は固定して極力黒が強い色を出さないように調整して、あとは色相の好きな範囲をランダムな値で出るようにして表示することにしました。

ブロックの生成数は 画面幅 / 100px * 3列でフルHDでだいたい60個くらいあれば大丈夫ですが、高解像度が進んでいるので、200個くらいにしておきました。多めにしていても溢れないので大丈夫です。

背景を動かすは遊びで入れてみました。無くても可愛いですよ。

Posted on

便利に使えるdate関数

「10日後の日付を求めたい」「来月の最後の日付を求めたい」「日付の曜日を求めたい」・・
PHPを実務で使い始めて1年の間、date関数に馴染んでなかった僕としては、こんなことですごく困ったものでした。
今日の日付の取得はさすがにわかったのですが、そこから10日後を求めようとすると、月によって次月になる日が変わる。結構書かないといけないな。。と思っていたら先輩から「date使ったら一発ですよ」と言われ、そんな簡単にできてしまうのか、、とびっくりしました。
今回はそんなときに使った便利なdate関数について、忘備録としてまとめておきたいと思います。

date('Y-m-d H:i:s') //現在時刻
date('Y-m-d', strtotime("tomorrow")) // 明日
date('Y-m-d', strtotime("+ 10 day")) // 10日後
date('Y-m-d', strtotime("+ 2 weeks")) // 2週間後
date('Y-m-d', strtotime("- 1 month")) // 一ヶ月前
date('Y-m-d', strtotime("first day of - 1 month")) // 先月の最初の日
date('Y-m-d', strtotime("last day of next month")) // 来月の最後の日
date('Y-m-d H:i:s', strtotime("yesterday 15:00:00")) //昨日の15時0分0秒
date("Y-m-d",strtotime("last Sunday")) // 一番最近の日曜日

ここで勉強になったことを2点書いておきます。
last day of の指定は非常に便利で、strtotime(“2013-08-31 +1 month”)だと、2013/10/01になってしまうが、strtotime( “last day of 2013-08 +1 month” )と書くと2013/09/30と次の月の最終日になるみたいです。

date('Y-m-d', strtotime("2013-08-31 +1 month")) // 結果⇒2013/10/01
date('Y-m-d', strtotime("last day of 2013-08 +1 month")) // 結果⇒2013/09/30

strtotimeに「tomorrow」をしてした場合は明日の0時0分0秒に、「+ 1 day」を指定した場合は、明日のちょうど24時間後の時間になるみたいです。strtotime(“tomorrow”)=strtotime(“+ 1 day”)ではないので注意とのことでした。

date('Y-m-d H:i:s', strtotime("tomorrow")) // 明日の0時0分0秒
date('Y-m-d H:i:s', strtotime("+ 1 day")) // 24時間後の日時

(参考) http://kihon-no-ki.com/php-use-date-and-strtotime