記録

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

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

Rewind 2021 – the Love of the Code

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

https://www.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. 記録

    映画、記者たち 衝撃と畏怖(いふ)の真実を観ました。

    畏怖(いふ)とは恐れおののくことを指す。映画、『記者たち 衝撃と畏怖…

  2. 記録

    映画、HEROを観てきましたので感想なんかを。#HERO #映画レビュー

    HERO(ヒーロー)を観てきましたので感想なんかを残しときます。まず…

  3. 記録

    大局を見よかぁ。

    西野亮廣さんが言っているYOUTUBEの今後は当たると思います…

  4. 記録

    週末ですがなにか?

    週末の朝が来た。昨日はブログを更新することが出来ず、今日、更新記事を…

  5. 記録

    javascriptでテキストファイルやCSVファイルを読み込む方法。

    javascriptでテキストファイルやCSVファイルを読み込む方法…

  6. 記録

    この映画は見逃せない。なので観に行きます!その名は!?

    この映画は見逃せない。なので観に行きます!その名は!?「オデッセイ…

PAGE TOP