BLOG

Happy New Year

あけましておめでとうございます。

元旦の本日も変わらず更新に励んでおりますどうもハヤトワンです。

今年も毎日更新を細く長く精神で続けていこうと思います。

皆様どうぞ今年もよろしくお願い致します。

ということで、今日の日課のコーディングはこちら。

https://github.com/HayatoMoromasa/sample/tree/main/wavyTextAnimation

これはcssのみで表現しております。

htmlにstyleで下記のように割り当て、

    <div class="wavy">
        <span style="--i:1;">H</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">p</span>
        <span style="--i:4;">p</span>
        <span style="--i:5;">y</span>
    </div>
    <div class="wavy">
        <span style="--i:6;">N</span>
        <span style="--i:7;">e</span>
        <span style="--i:8;">w</span>
    </div>
    <div class="wavy">
        <span style="--i:9;">Y</span>
        <span style="--i:10;">e</span>
        <span style="--i:11;">a</span>
        <span style="--i:12;">r</span>
    </div>

cssでは下記のように記述

.wavy span {
    position: relative;
    display: inline-block;
    color: #000;
    font-size: 2em;
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
    0% {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(-20px);
    }
    40%, 100% {
        transform: translateY(0px);
    }
}

animation-delayでcalc(0.1s * var(–i));を指定することで、波のような表現ができてる感じですね。

はい、

今日はこんな感じでございますが、

せっかくなので、今年の抱負でもサクッと書き綴ろうと思います。

今年はフロントエンドエンジニアとしてできる仕事の幅を増やしていきます。

具体的に言えば、会社での案件を自分一人でスムーズに回せるようになることは早々におさえ、なるべく早く自立して、会社の利益増進に貢献すること。

収入源を会社の給料以外でも確立させること。

あとはモダンフロントエンドのスキルセットの幅を増やすこと。

例えばreact,typescriptを案件で使うだとか。

ダンスも今のエンジニアの仕事メインの生活に最適化したスタイルにアップデートする必要があると考えているので、これまでの踊り方、ネタ構成をガラッと進化させようと思っています。

バトルもたまには出ようかな。

こんな感じです。

今年も頑張っていきましょう!

それでは良い一日を!