コード書き初め、そろそろネタが尽きてきたよ「始め」！？
2022.01.03
コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。
動作はこちらから確認くださいませ。
https://zip358.com/tool/demo51/
尚、このコードは２０２１年の１２月２８日に書いたものになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Happy New Year 2022</title>
<style>
body{
background-color: black;
}
#HNY{
font-weight: bold;
font-size: 222px;
}
</style>
</head>
<body>
<h1 id='HNY'>Happy New Year 2022</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
let color1 =["40","E0","D0"];
let color2 =["FF","8C","00"];
let color3 =["FF","00","80"];
let postion =[2,0,1];
setInterval(() => {
if((parseInt(color1[postion[0]],16) + 1)<255){
color1[postion[0]] = (parseInt(color1[postion[0]],16) + 1).toString(16);
}else{
color1[postion[0]] = (100).toString(16);
postion[0]--;
}
if((parseInt(color2[postion[1]],16) + 1)<255){
color2[postion[1]] = (parseInt(color2[postion[1]],16) + 1).toString(16);
}else{
color2[postion[1]] = (50).toString(16);
postion[1]--;
}
if((parseInt(color3[postion[2]],16) + 1)<255){
color3[postion[2]] = (parseInt(color3[postion[2]],16) + 1).toString(16);
}else{
color3[postion[2]] = (80).toString(16);
postion[2]--;
}
for(key in postion){
if(postion[key]<=-1){
postion[key] = 2;
}
}
//console.log(`#${color1.join("")}, #${color2.join("")}, #${color3.join("")}`);
document.getElementById('HNY').style = `
color: #FF8C00;
background: -webkit-linear-gradient(0deg, #${color1.join("")}, #${color2.join("")}, #${color3.join("")});
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
`;
}, 70);
</script>
</body>
</html>タグ
12, 2021, 28, 8, cGLonkCQ, charset, Chrome, com, D-, DOCTYPE, Firefox, gt, head, html, https, IE, ja, lang, lt, meta, name, quot, UTF-, viewport, watch, www, youtube, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,
情熱大陸LITEというYOUTUBEチャンネル。
2020.05.16
あの情熱大陸がYOUTUBEチャンネル、情熱大陸LITEというチャンネルを開設していた。今年の4月28日にチャンネル登録されていますが、まだ登録者数は少ない感じですね。高視聴率の番組でもないのだけど深夜帯にしてはまぁまぁの視聴率が取れていると思います。
自分はどちらかと言うと好きな人や興味がある人が取り上げられたら見るという感じかなと、自分の場合リアルタイムで見ることはないですね。ほぼ録画で見るという形をとっています。ちなみに全部見るわけではないですけどね。
いろいろな人を話を聞くことは大事かなと思います、特にトップで活躍されている人の話なんて日常生活で聴くことはないのだから、そんな人達がどういう考えや生き方をしているという事を垣間見える番組は自分は好きです。
ちなみに自分はお笑い番組ほぼ見ないで、こういう番組を見ている方が心弾むのでちょっと変わっているのだろうと思います・・・。
最後にチャンネル登録はこちら
https://www.youtube.com/channel/UChrwWDsptJWqbV_oPKdHk1Q
タグ
28, 4, LITE, youtube, いろいろ, お笑い, こと, チャンネル, どちらか, ドップ, リアルタイム, わけ, 事, 人, 今年, 垣間, 場合, 大事, 帯, 形, 心, 情熱大陸, 感じ, 方, 日常, 活躍, 深夜, 生き方, 生活, 番組, 登録, 登録者, 自分, 興味, 視聴率, 話, 録画, 開設, 高視聴率,