色の変わるバナーの作成 - 考え、感じる、Web制作。

光るバナーを作る

PhotoshopとCSS3を使い、時間経過で色が変わるバナーを作る。
f:id:ys_nim_9:20141215030042p:plain f:id:ys_nim_9:20141215030048p:plain f:id:ys_nim_9:20141215030055p:plain f:id:ys_nim_9:20141215030100p:plain

Photoshop

Photoshopで色を変化させたい箇所を透過させた.pngを作成する。
文字等を配置し、レイヤーのアイコンをctrl+クリック後、そのレイヤーでbackspaceすると文字が選択される。選択範囲を反転し、クリッピングマスクで文字だけが透過した素材ができるので、.pngで保存する。
f:id:ys_nim_9:20141215110613p:plain

html

Photoshopで作った画像を、htmlで配置する。

<body>
<div id="box"><img src="letter_shine.png" alt="#"></div>
</body>

css

animationのbg-colorで背景色を変化させる。10sは10秒かけて変化させることを意味し、infiniteは繰り返し変化させる指定となる。0%と100%の色を同じにしないと、急に色が切り替わったように見えてしまう点に注意。

#box{
  width:300px;
  height:250px;
  animation:bg-color 10s infinite;
  -webkit-animation:bg-color 10s infinite;
  -moz-animation:bg-color 10s infinite;
}
@-webkit-keyframes bg-color{
  0%{background:#AA3939;}
  25%{background:#226666;}
  50%{background:#AA6C39;}
  75%{background:#2D882D;}
  100%{background:#AA3939;}
}
@keyframes bg-color{
  0%{background:#AA3939;}
  25%{background:#226666;}
  50%{background:#AA6C39;}
  75%{background:#2D882D;}
  100%{background:#AA3939;}
}

感想

バナーは集客に直接影響を与える、Webの重要な武器である。可読性と訴求力に優れたバナー制作は、Webサイト制作の中でも重要度が高い。また、バナーがどんな場所に貼られても目立つような配慮が必要となり、今回のような工夫は効果的といえる。閲覧者のクリックを向上させ、クライアントに利するバナー制作の知識を身に着けていきたい。