さ、三局目…(疲労困憊)
今局は上のもにょもにょしたタイトル文字(PC版のみ)の仕組みを解説したいと思います。
もとはイタリアのDiego Pardoさん(写真)という方が作り、その後多くのデザイナーが改変・応用している有名なモチーフのようです。
文字の大きさはなぜかどのデザイナーさんもオリジナルの4.6875emという値を変えていませんでしたが、不肖NSが世界で初めて4.125emに設定しました。
最初よく意味がわからなかったんですが、だんだん理解できるようになりました。
それぞれのコードのカタマリは、8行の似た感じの記述から成っています。
実はこれ、オリジナルでは「LOADING」の七文字を動かすアニメーションとして作られていたものです。
ウェブページを読み込むときのロード画面てありますよね。あれです。
だから、本コードの animation-name である humo は、もと loading という名前でした。
文字数を増やすなど若干改変したことと、ロード画面で使うわけではないので、こんな名前にしてみました。ふんふも
さて、それぞれの行は、各文字の影(text-shadow)の表示方法を定義しています。
文字そのものは上で透明に設定してあるので、文字の代りにこの影を見せているわけです。
一番上の行(一文字目担当)の記述だけ取り出してみましょう。
①は桃、②は桃となります。
②は影の不透明度0.2が指定されているので、ほとんど見えなくなっていますね(マウスを乗せると文字本体がはっきり見えるので、確認してみて下さい)。
CSS3の animation プロパティには、「数値で表現できるものは何でも連続的に変化させる」機能があります。
①から②への変化を、1回あたり2.25秒かけて、永遠に(infinite)往復(alternate)させなさい、動きは最初と最後は遅く途中では速く(ease-in-out)しなさい、というのが★の意味です。
これが文字数分定義されているわけです。文字によって変化の仕方が微妙に異なっており、機械的ではない動きに仕上がっています。
しかし、Pardoさんのアイデアはこれにとどまりません。
アニメーション効果の発動に時間差をつけることで、波打つような動きを表現しているのです。
なお、上の span:nth-child(数字) という書き方はこのコードで初めて見たんですが、疑似的なID定義のようなものと理解しています。
これだとHTMLの方に<span id="xxx">とID名を書き込む手間が省けるので便利ですし、他にもすばらな利点があることも分かったのですが、それはまたの機会に。
では最後にHTMLで締めたいと思います。
今局は上のもにょもにょしたタイトル文字(PC版のみ)の仕組みを解説したいと思います。
タイトル文字を動かしてみた
このブログタイトル文字のアニメーションはCODEPENというサイトからパクりお借りしました。

#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>ここまで読んで下さった方にお礼申し上げます。
コメント