色コードを入力すると、色が反映されて、その色コードをRGBに変換させてみました。
以下がコードサンプルになります。
▼JavaScript
window.onload=function(){
var convert = document.getElementById('convert');
var color = document.getElementById('color');
var before = document.getElementById('before');
var beforecode = document.getElementById('before-c');
var after = document.getElementById('after');
var aftercode = document.getElementById('after-c');
convert.addEventListener('click', function() {
var colorcode = color.value;
var rgbArr = convert_colorcode_to_rgb(colorcode);
if(!rgbArr) {
alert('変換に失敗しました');
return false;
}
if(colorcode.split('')[0] !== '#') {
colorcode = '#' + colorcode;
}
var rgb = 'rgb(' + rgbArr[0] + ', ' + rgbArr[1] + ', ' + rgbArr[2] + ')';
before.style.backgroundColor = colorcode;
beforecode.innerHTML = colorcode;
after.style.backgroundColor = rgb;
aftercode.innerHTML = rgb;
}, false);
function convert_colorcode_to_rgb(colorcode) {
if(colorcode.split('')[0] === '#') {
colorcode = colorcode.substring(1);
}
if(colorcode.length === 3) {
var codeArr = colorcode.split('');
colorcode = codeArr[0] + codeArr[0] + codeArr[1] + codeArr[1] + codeArr[2] + codeArr[2];
}
if(colorcode.length !== 6) {
return false;
}
var r = parseInt(colorcode.substring(0, 2), 16);
var g = parseInt(colorcode.substring(2, 4), 16);
var b = parseInt(colorcode.substring(4, 6), 16);
return [r, g, b];
}
};
▼HTML
色コードを入力すると、色が表示されます。
#変換前:
変換後:
質問です。
javascriptを実際にwebデザインのアニメーションなどに活用したいのですが、そのやり方がいまいち分かりません。デザインに生かす上で根本的にどういうことを考えて記述を考えないといけないのでしょうか？
＞ふみ さん
そうですね、私どもではまず取り入れるアニメーションが、せっかく見やすく伝えやすいデザイン作ったのに、アニメーションが邪魔していないか。などを考えますね。
本当に、そのアニメーションは伝えるデザインの上で、必要な処理なのか。
WEBページへの活用方法ですが、制作中のWEBページに組み込む前に、一度、それだけの簡易なページを作って（このブログでもあるようなデモページ）、動くことを確かめてから、制作中のWEBページに組み込んでおります。
いきなり、制作中のWEBページに入れると、様々な原因で動かないことが多々ありますので。