記録

コード書き初め、そろそろネタが尽きてきたよ「始め」!?

コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。

Rewind 2021 – the Love of the Code

動作はこちらから確認くださいませ。

https://zip358.com/tool/demo51/

尚、このコードは2021年の12月28日に書いたものになります。

<!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>

未来予想は当たらないけど、加速するテクノロジーは分かるかも?前のページ

映画、99.9-刑事専門弁護士-THE MOVIEを観てきましたよ。次のページ

関連記事

  1. person putting coin in a piggy bank

    記録

    国民年金の支払いシステムにはバグがある!!

    おはようございます、国民年金の支払いシステムにはバグがある事が分かり…

  2. 記録

    日本沈没みたいな南海トラフ巨大地震の威力が半端ないって。

    NHKの南海トラフ巨大地震のシュミレーションをYOUTUBEにUPし…

  3. 記録

    アクセス数が30%下がりました。30人ぐらい減った( ゚д゚ )::

    アクセス数が30%下がりました。30人ぐらい減った( ゚д゚ )7…

  4. 記録

    もうかれこれ10年ぐらいの月日が経つ。あの時からは20年か。あまり変わってないかな自分。徒然日記

    今日はまぁまぁなお天気ですね、春が待ち遠しい今日このごろです。…

  5. 記録

    東京キタ━━━━(゚∀゚)━━━━!!乗り降りた田舎者。

    出張のため、新人ふたりと高知から飛行機で東京に来たのだ。羽田空港でゆ…

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

カテゴリー

アーカイブ

PAGE TOP