タイトル文字を動かしてみた

このブログタイトル文字のアニメーションはCODEPENというサイトからパクりお借りしました。

もとはイタリアのDiego Pardoさん(写真)という方が作り、その後多くのデザイナーが改変・応用している有名なモチーフのようです。

#blog-title {
  text-align: center;
  font-size: 4.125em;
  color: Transparent;
  letter-spacing: 0.01em;
  padding-bottom: 24px;
}
#blog-title a:hover{color: RosyBrown;}

まずは普通にタイトル文字のデザイン設定をします。ポイントは4行目で文字の初期色を透明に指定していること、文字が重ならないようにほんの少し(1%)の隙間を空けていることです。
文字の大きさはなぜかどのデザイナーさんもオリジナルの4.6875emという値を変えていませんでしたが、不肖NSが世界で初めて4.125emに設定しました。

#blog-title span {
  text-shadow:
    0 0 2px rgba(204, 208, 212,0.9),
    0 15px 25px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 255, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.3), /*追加*/
    0 0 20px rgba(255, 255, 255, 0.45);

    animation: humo 2.25s ease-in-out infinite alternate;
}

@keyframes humo {
	to {text-shadow:
    0 0 2px rgba(204, 208, 212, 0.2),
    0 0 3px rgba(0, 0, 0, 0.02),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0);} /*追加*/
}

…なんかすごいのが出てきました。
最初よく意味がわからなかったんですが、だんだん理解できるようになりました。
それぞれのコードのカタマリは、8行の似た感じの記述から成っています。
実はこれ、オリジナルでは「LOADING」の七文字を動かすアニメーションとして作られていたものです。
ウェブページを読み込むときのロード画面てありますよね。あれです。
だから、本コードの animation-name である humo は、もと loading という名前でした。
文字数を増やすなど若干改変したことと、ロード画面で使うわけではないので、こんな名前にしてみました。ふんふも

さて、それぞれの行は、各文字の影(text-shadow)の表示方法を定義しています。
文字そのものは上で透明に設定してあるので、文字の代りにこの影を見せているわけです。
一番上の行(一文字目担当)の記述だけ取り出してみましょう。

#blog-title span {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.9); /* ① */
    animation: humo 2.25s ease-in-out infinite alternate; /*★*/
}
@keyframes humo {
    to text-shadow: 0 0 2px rgba(204, 208, 212, 0.2); /* ② */
}

桃という字にこのスタイルを適用してやると、
①は桃、②は桃となります。
②は影の不透明度0.2が指定されているので、ほとんど見えなくなっていますね(マウスを乗せると文字本体がはっきり見えるので、確認してみて下さい)。
CSS3の animation プロパティには、「数値で表現できるものは何でも連続的に変化させる｣機能があります。
①から②への変化を、1回あたり2.25秒かけて、永遠に(infinite)往復(alternate)させなさい、動きは最初と最後は遅く途中では速く(ease-in-out)しなさい、というのが★の意味です。
これが文字数分定義されているわけです。文字によって変化の仕方が微妙に異なっており、機械的ではない動きに仕上がっています。

しかし、Pardoさんのアイデアはこれにとどまりません。

#blog-title span:nth-child(1) {animation-delay: 0s;}
/* ↑実質的に何も指定していないので、この行は記述しなくて良い↑ */
#blog-title span:nth-child(2) {animation-delay: 0.15s;}
#blog-title span:nth-child(3) {animation-delay: 0.3s;}
#blog-title span:nth-child(4) {animation-delay: 0.45s;}
#blog-title span:nth-child(5) {animation-delay: 0.6s;}
#blog-title span:nth-child(6) {animation-delay: 0.75s;}
#blog-title span:nth-child(7) {animation-delay: 0.9s;}
/* ↓追加↓ */
#blog-title span:nth-child(8) {animation-delay: 1.05s;}

せっかく一文字ごとに<span></span>で括っているわけですから、さらにもう一工夫。
アニメーション効果の発動に時間差をつけることで、波打つような動きを表現しているのです。
なお、上の span:nth-child(数字) という書き方はこのコードで初めて見たんですが、疑似的なID定義のようなものと理解しています。
これだとHTMLの方に<span id="xxx">とID名を書き込む手間が省けるので便利ですし、他にもすばらな利点があることも分かったのですが、それはまたの機会に。

では最後にHTMLで締めたいと思います。

<h1 id="blog-title">
  <a href="http://humotomiti.blog.jp/">
    <span>一</span>
    <span>萬</span>
    <span>人</span>
    <span>の</span>
    <span>麓</span>
    <span>路</span>
    <span>(</span>
    <span>)</span>
  </a>
</h1>

ここまで読んで下さった方にお礼申し上げます。