みなさんこんにちは、山本です。
今回のお題は、「愛○会病院風にしよう」に決めました。
さて、作るにあたって一からというのもありなのですが、生憎と私はデザイナーでなければ、コーダーでもありません。
プログラマなので、既にある他所様のサイトをより愛○会病院風にするようにしようと思います。
仕様
- URLを自由入力出来る。
- 入力した対象のページを愛○会病院風にする。
を考えております。
そういえば、元ネタの某愛○会病院様のサイトが、惜しまれつつも2013年に閉鎖されてしましたね。
そして、そのサイトが最近リニューアルされました。
以前ほどの衝撃がなく、とても残念でした。。。
背景
まずは、背景を調整してみましょう。
愛○会病院風は黒一色です。
異論は認めません。
なので、背景を黒く塗り、文字を白くします。
(function($) {
$(window).load(function(){
$('*').css({background: 'none', color : '#fff'});
});
})(jQuery);
シンプルで目に優しい見映えになりました。
点滅
次に必要なものはなにか。
色々足りないものだらけですが、ひとまず文字を「点滅」させるべきなのではないでしょうか。
幸いにして、htmlにはblinkという、素晴らしいタグが用意されています。
早速使ってみましょう。
あれ？点滅しない。
えーと、困ったらドキュメントを見てみましょう。
ドキュメント
Chrome 未サポート
Firefox (Gecko) 未サポート [1]
Internet Explorer 未サポート
Opera 未サポート [2]
Safari (WebKit) 未サポート[1] バージョン 22 までサポートしていました。バージョン 23 で削除しました。
[2] バージョン 12.1 までサポートしていました。バージョン 15.0 で削除しました。
Firefoxは23から非対応になったんですね。。。。
OK、よく分かりました。
無いのならば、作ればいいんです。
動きとしては、jsで一定間隔で対象を、fadeIn、fadeOutを繰り返せば、点滅するでしょう。
はい、作りました。
いい感じに、文字が点滅していますね。
ですが、これだけでは物足りません。
そう、圧倒的に色が足りません。なので、もっと一杯色を使って目立たせようと思います。
そして強調するのであれば、ビビットな色が良いと思われますので、以下の色を採用しましょう。
- cyan
- red
- blue
- lawngreen
- magenta
- yellow
- pink
そして毎回同じ色では面白くありませんので、候補の色からランダムで出すようにしましょう。
いい感じで目立つようになりました。
これで良しと思ったのですが、ここで隣の席のデザイナーM氏にダメ出しをされました。
愛○会病院風はそんな滑らかに色が変わるイメージじゃない。
なるほど！
指摘を受けて、何が足りないかがようやく理解出来ました。
var colors = ['cyan', 'red', 'blue', 'lawngreen', 'magenta', 'yellow', 'pink'];
var randomColor = function(count){
var ret = [];
var c = colors.concat();
for (var i = 0; i < count; i++){
var key = Math.floor(Math.random() * c.length);
ret.push(c[key]);
c.splice(key, 1);
}
return count == 1 ? ret.shift() : ret;
};
$.fn.blink = function() {
$(this).each(function(){
if (!$(this).find('img').size()){
var target = ($(this).find('a').size()) ? $(this).find('a') : $(this);
target.addClass('used blink').css('color', randomColor(1));
}
setTimeout(function(self){
setInterval(function(self){
if (self.css('visibility') != 'hidden'){
self.css('visibility', 'hidden');
}
else{
self.css('visibility', 'visible');
}
}, 150, self);
}, Math.floor(Math.random() * 200), $(this));
})
};
如何でしょう、いい感じになったんじゃないかと思います。
文字サイズ
点滅は出来ました。
次は文字の大きさです。
やはり見出しが小さいと目立たないと思います。
ですが、ただ大きいだけではオサレさが足りないとも思います。
そう、大きくしたり、小さくしたりを繰り返せばよいのです！
やってみました。
方向はとても良いのですが、画面の高さが変わるのはあまり良く無い気がします。
なので、高さは変わらないように調整します。
$.fn.expansion = function() {
$(this).each(function(){
$(this).addClass('used expansion').css('color', randomColor(1)).children('*').css('color', randomColor(1));
$(this).attr('data-font-size', $(this).css('fontSize'))
.css({fontSize: parseInt($(this).css('fontSize')) * 3})
.css({width: $(this).width(), height: $(this).height()})
.css({fontSize: parseInt($(this).attr('data-font-size'))});
setTimeout(function(self){
setInterval(function(self){
if (parseInt(self.css('font-size')) <= parseInt(self.attr('data-font-size'))){
self.css('font-size', parseInt(self.attr('data-font-size')) * 3);
}
else{
self.css('font-size', self.attr('data-font-size'));
}
}, 150, self);
}, Math.floor(Math.random() * 500), $(this));
})
};
これでこの見出しを見落とす人いなくなりました。
マーキー
Blinkをやった以上、次はマーキーが書かせません。
ですが、Blinkのように廃止されている可能性がありますので、先にドキュメントを確認します。
Chrome 1
Firefox (Gecko) 1.0 (1.7 or earlier)
Internet Explorer 2
Opera 7.2
Safari 1.2
よかった、廃止されていません。
ただ見る限り、いつなくなってもおかしくなさそうです。
全く、良い物はすぐなくなってしまいますね。
さて、調べるとCSS3でマーキーが出来るようなので、それで対応します。
.marquee{
overflow:hidden;
}
.marquee div{
width:100%;
text-align:center;
display:inline-block;
white-space:nowrap;
-moz-animation-duration: 5s;
-moz-animation-name: marquee;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-duration: 5s;
-webkit-animation-name: marquee;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-ms-animation-duration: 5s;
-ms-animation-name: marquee;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-duration: 5s;
-o-animation-name: marquee;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
@-webkit-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-moz-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-ms-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-o-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
枠線
かなり良くなってきました、ですが右側が少し寂しい気がします。
なので、枠線を付けてみようと思います。
枠線も細いと物足りませんし、そして色が一色だけでもつまらないと思いますので、多彩な色を使ってみましょう。
他にも、色がいつも同じでは楽しくありませんので、色が常に変わるようにしましょう。
$.fn.frame = function() {
$(this).each(function(){
var c = randomColor(4);
if (!$(this).find('table').size()){
$(this).addClass('used frame');
$(this).css({
'border-left-color' : c[0],
'border-right-color' : c[1],
'border-top-color' : c[2],
'border-bottom-color' : c[3]
});
setInterval(function(self){
var c = [
self.css('border-left-color'),
self.css('border-right-color'),
self.css('border-top-color'),
self.css('border-bottom-color')
];
self.css({
'border-left-color' : c[3],
'border-right-color' : c[0],
'border-top-color' : c[1],
'border-bottom-color' : c[2]
});
}, 200 + Math.floor(Math.random() * 50), $(this));
}
})
};
これでようやく、右側の寂しさが改善されました。
色の移ろいで、ユーザの目を釘付けにすることでしょう。
文字色
最後に気になるのが文字色です。
なんというか、白が多すぎですね。
なので、ランダムで色をつけましょう。
ランダムだけでは、今までと同じですので、一文字だけ色を変えてみます。
そして、色が変わる文字も変化するようにしてみましょう。
文字もまた、移ろいゆくようになりました。
ですが、まだ足りません。
一文字だけ色が変わるのもいいのですが、他にもバリエーションがあっても良い気がします。
なので、四文字ごと色が変わる調整を行い、ランダムで一文字か四文字変化かが選ばれるように調整しました。
$.fn.wave = function() {
$(this).each(function(){
if (!$(this).children('*').size() && !$(this).parent('.used').size()){
var w = $(this).html().split('');
for (i in w){
if (w[i] != ''){
w[i] = '<w class="inner">'+w[i]+'</w>';
}
}
if (Math.round(Math.random()) && w.length > 5){
var c = randomColor(5);
$(this).html(w.join('')).addClass('wave used').css('color', c[0]).attr('data-color', [c[1], c[2], c[3], c[4]]);
$(this).delay(Math.floor(Math.random() * 50)).queue(function(){
setInterval(function(self){
var c = self.data('color').split(',');
var $elems = self.children('w');
var currentIndex = $elems.index($elems.filter('.active'));
nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
$elems.removeClass('active').css('color', '').eq(nextIndex).addClass('active');
for(var i = 0; i < 4; i++){
$elems.eq(nextIndex).css('color', c[i]);
nextIndex = nextIndex + 1 >= $elems.size() ? 0 : nextIndex + 1;
}
}, 50 + Math.floor(Math.random() * 50), $(this));
});
}
else{
var c = randomColor(2);
$(this).html(w.join('')).addClass('wave used').css('color', c[0]).attr('data-color', c[1]);
$(this).delay(Math.floor(Math.random() * 50)).queue(function(){
setInterval(function(self){
var currentIndex = self.children('w').index(self.children('w.active'));
var nextIndex = currentIndex < 0 ? 0 : ++currentIndex;
self.children('w').removeClass('active').css('color', '').eq(nextIndex).addClass('active').css('color', self.attr('data-color'));
}, 50 + Math.floor(Math.random() * 50), $(this));
});
}
}
});
};
かなり、本物に近づいたのではないかと思います。
使ってみる
ようやく完成したので、他のサイトも見てましょう。
yahoo見るの数年ぶりなのですが、中々いい感じで染まりますね。
h1～5タグが無い為か、少々物足りない動きですね。
下の方はいいですね。
ただ上の方は、要素が少ないせいかちょっと面白くないですね。。。
まあ、なんというか苦手なサイトもあるってことですね。
皆さんも、お好きなサイトで試してみてください。
まとめ
ここまで、作ってみての感想なのですが
- 目が痛い
- 頭がいたい
- 気持ち悪い（吐きそう）
少しオサレ過ぎたかもしれません。。。
気を取り直して、今回作ったものはjsとCSSを読み込むだけでも動くものなので、ご自身のサイトを愛○会病院風にされたい方は、組み込まれては如何でしょうか？
コメントを残す