【じゃがりこ文字の作り方】1文字ずつ文字色を変える

じゃがりこの文字が作りたかった

お菓子の虜のAPIを使って、いろんなじゃがりこを画面に表示するものを作った。
https://sysbird.jp/toriko/webapi/

サラダ味感を出す！！

①文字を１文字ずつ分割する（JS）

JavaScriptで文字を１文字ずつ
<span></span>
で区切る。

jaga

    // 分割
    $(".jaga_name").children().addBack().contents().each(function() {
      if (this.nodeType == 3) {
        let $this = $(this);
        $this.replaceWith($this.text().replace(/(\S)/g, "<span>$&</span>"));
      }
    });

②１文字ずつ色を指定する（CSS）

span要素の登場順に異なる文字色を指定する。

• 2n+1は奇数
• 2nは偶数

番目に適用。

（nの数を変えればいろんなスタイルに活用できる）

jaga

.jaga_name span:nth-child(2n+1) {
  color: #03A66A;
}
.jaga_name span:nth-child(2n) {
  color: #D92332;
}

③あらゆる方向に影つける（CSS）

jaga

.jaga_name {
  text-shadow: #F2BA52 2px 0px,
    #F2BA52 -2px 0px,
    #F2BA52 0px -2px,
    #F2BA52 0px 2px,
    #F2BA52 2px 2px,
    #F2BA52 -2px 2px,
    #F2BA52 2px -2px,
    #F2BA52 -2px -2px,
    #F2BA52 1px 2px,
    #F2BA52 -1px 2px,
    #F2BA52 1px -2px,
    #F2BA52 -1px -2px,
    #F2BA52 2px 1px,
    #F2BA52 -2px 1px,
    #F2BA52 2px -1px,
    #F2BA52 -2px -1px;
}

完成

配列使えば

もっと楽にできそう