JS Practice 01 Text Animation

2023年11月23日 22:51

この記事で紹介すること

Webデザインの練習としてText Animationを実装した．
注：大したものではない
（アウトプットしていかないとモチベーションがあがらないため，適宜記事化していく）．

これまで，個人開発する時は，react，materialUIでフロント側を実装することが多かった．

また，仕事では，業務用アプリのUI/UXデザインを行うことが多く，Webデザインに関してあまり深入りしていなかったが，
奥さんの運営する協会のホームページを作成するする詐欺を繰り返して，
(WordPressで途中まで作っていたのだが，やりたいことがうまくできず，1年くらい放置）

さあいよいよやらないといけない，，ということになった．

というわけで，Webデザインの勉強がてら様々なWebページを見てみると，多く見られたのは，パララックススクロールといった，奥行きを感じさせるようなシームレスな体験を提供しているサイトだ．
相当勉強になるし，どうやってこれ実装したの？と感動すら覚えた．

Webデザインの取りまとめサイトもあって，純粋に楽しみながら回遊できた．

練習の第１弾として，テキストアニメーションを実装したので，紹介する．

事前準備

実装するために，簡単にFigmaで絵を作る．

表示されるタイトルは，一文字ずつ，順に文字が表示される．
タイトルは
”デザイナーのプロフェッショナル集団として"
"本質を解決するソリューションを提案"
"DXへディープダイブせよ"

この3つをリストに格納し，順に取り出していくものだ．
なお，タイトルに深い意味は全くない．

実装内容

codepenを埋め込みたかったが何故かできないため，コードを記載.

HTML

<body>
    <div class="container"></div>
    <script src="index.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content:right;
    background:url("https://images.unsplash.com/photo-1682687980976-fec0915c6177?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    
}

h1 {
    margin-top: 300px;
    margin-right: 40px;
    color: #fff ;  
    font-size: 48px;
}

const containerEl = document.querySelector(".container");

//タイトルとして表示させるテキストをリスト化
const Title = ["デザインのプロフェッショナル集団として","  ","本質を解決するソリューションを提案","  ","DXへディープダイブせよ","  "];

//タイトルリストのインデックスを取り扱う変数
let titleIndex = 0;

//タイトルリストに含まれるテキストのそれぞれの長さを示す変数
let titleChar = 0;

//関数の実行
textAnim();


//タイトルのテキストを一字ずつ順に表示させる関数
function textAnim(){
    titleChar++
    containerEl.innerHTML =`
    <h1>${Title[titleIndex].slice(0,titleChar)}</h1>
    `
    //もし，タイトルの長さの変数とタイトルテキストの長さが一緒になった場合，次のタイトルリストを０番目の文字から表示させる
    if(titleChar === Title[titleIndex].length){
        titleIndex++
        titleChar = 0
    }
    //タイトルリストが最後まで行ったら最初のテキストに戻る
    if(titleIndex===Title.length){
        titleIndex = 0
    }

    setTimeout(textAnim,200)
    

}

適宜，学んだことをアップロードしたい．
それにしても，codepenどうやったら埋め込みできるのだろうか．．

この記事が気に入ったらサポートをしてみませんか？