記録

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

コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。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>



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

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

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

関連記事

  1. 記録

    大阪の観光地へ行ってきた!!

    先日、大阪の観光地を巡ってきました。どこもコミコミなので人混みに酔う…

  2. 記録

    映画、鳩の撃退法を観ましたよ。今頃…ネットフリックスで。

    おはようございます、井上陽水の氷の世界の曲は何時も聞いても凄いな。い…

  3. 記録

    WPの記事を検索し一括カテゴリ変更する方法。

    WPの記事を検索し一括カテゴリ変更する方法は下記になります。ワードプ…

  4. 記録

    某検索サイトの電卓もどきの作り方!!

    某検索サイトの電卓の作り方!!某検索サイトのウェブ電卓は・・・全角…

  5. 記録

    この頃、自己啓発本みたいなブログが増えているけど。

    この頃、自己啓発本みたいなブログが増えているけどあまり読むのは、オ…

  6. long exposure photography white dome building interior

    記録

    あるアプリをja>>enに対応したお話。 #translation

    おはようございます、運用資産が爆上がってほしいこの頃です🫠(まぁ上が…

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

カテゴリー

PAGE TOP