CSS_html/css_WEB-ITnose を使用して Netflix ロゴ アニメーションを実装する

この記事は次から翻訳されています: Netflix Logo In CSS

このブログは、Gregor Adams が CSS を使用して Netflix のロゴ効果を再現する方法について話しています。 Gregor は CSS の新星です。ここで彼のケースを分析できることも大変光栄です。

Netflix (翻訳者注: オンライン ビデオ レンタル プロバイダー) を試してみたところ、すぐに夢中になりました。他の場所で見なければならなかった番組をいくつか見ました。テレビシリーズや映画のすべてのエピソードは、Netflix アニメーションから始まります。

TVシリーズを数話見た後、CSSを使ってNetflixのロゴをアニメーションさせられないかと思い、いくつかの作品を見た後、CodePenを使ってロゴを再現してみました。

最初のコンセプト

いくつかの技術的な解決策を試したかったので、最初の実装は少し面倒でした。

例: 純粋な CSS テクノロジーを使用して実装したいのですが、ボタンをクリックしたときにこのアニメーションを再度実行したいので、いくつかの素晴らしいテクニックを使用する必要があります。幸いなことに、CSS コードを書いているときに頭に浮かぶトリックがいくつかあります。

実際のアニメーションについて話しましょう。

このアニメーションを録画し、Quicktime でループさせて、詳細に調べることができました。私は特定のフレームで停止して何が起こっているのかを把握できるようにするためにこれを行うことが多いです。

このロゴ:

1. 白い画面から始まります。
2. 白い 3D 文字がポップアップします。
3. 影を落とします。
4. が消えます。
5. フォントの色を赤に変更します。

これは、再現する必要があるアニメーション ステップです。ただし、このロゴについてはもう 1 つ注意すべき点があります。文字はマークの中央で斜めになっています。

人々は私にどうやってこれをやっているのかと尋ね続けます。 すべては積み重ねから生まれます:)

私は多くの 3D 症例を行ってきたので、これは私にとって難しいことではありません。

文字を斜体にします

「Netflix」という単語の基本的なマークアップから始めます。

<div class="logo">  <span>N</span>  <span>E</span>  <span>T</span>  <span>F</span>  <span>L</span>  <span>I</span>  <span>X</span></div>

クラスロゴ入りのラッパーを作り、各文字をspanタグで包みました。

次に、元の幅を維持するために Y 軸で文字を回転し、X 軸で文字を拡大縮小しました。重要な部分は、 class="logo" ラッパーにパースペクティブを設定し、そのパースペクティブ原点を定義することです。

/* 基础的字母样式 */span {    font-size: 8em;    font-family: impact;    display: block;}/* 开启三维效果 */.logo {    perspective: 1000px;    perspective-origin: 50% 0;}/* 给字母变换 */.logo span {    transform-origin: 0 0;    transform: scaleX(80) rotateY(89.5deg);}

これらのテクニックを実装するには、別の視点 (500 ピクセルなど)、回転角度 (9 度など)、スケーリング (0.5 など) を使用するなど、他にもいくつかの方法があります。 ）、しかし、これらの値は私のニーズに最も適しています。

以下は CodePen で実装された小さな例です: (翻訳者注: オリジナルのデモはページに埋め込まれた iframe で CodePen で実装されていますが、マークダウンには iframe を埋め込むメソッドがないため、CodePen が使用されますこれを表示します。元のデモは次のとおりです。jade と scss の記述メソッドは、これら 2 つのテクノロジを使用したことのない読者が読みやすいように html と css に変換されます)

• デモは、jade と scss を使用して完成しました
• HTML と CSS のデモに変換

実際の効果

次に、このスタイルを中央を残してすべての文字に適用したいと思います文字は変わらず。右側の文字は逆方向に傾き、文字の高さが変わります。

これを実現するには、いくつかの新しいロジックを追加する必要があります。これを実現するには、Sass の標準構文を使用します。

Sass コード:

.logo {  perspective: 1000px;  perspective-origin: 50% 0;  font-size: 8em;  display: inline-flex;  span {    font-family: impact;    display: block;    $letters: 7;    @for $i from 1 through $letters {      $offset: $i - ceil($letters / 2);      $trans: if($offset > 0, -89.5deg, 89.5deg);      &:nth-child(#{$i}) {        // trans/de-form the letters        transform-origin: 50% + 50%/$offset 200%;        font-size: if($offset == 0,          0.85em,          0.9em + 0.015*pow(abs($offset),2));        transform:            if($offset == 0, scale(1, 1), scale(95.9 - abs($offset) * 10, 1))            if($offset == 0, translatey(0%), rotatey($trans));      }    }  }}

SCSS を理解していない学生の便宜のために、これは私がコンパイルした CSS コードです:

.logo {   perspective: 1000px;   perspective-origin: 50% 0;   font-size: 8em;   display: inline-flex;}.logo span {   font-family: impact;   display: block;}.logo span:nth-child(1) {   transform-origin: 33.33333333% 200%;   font-size: 1.035em;   transform: scale(65.9, 1) rotatey(89.5deg);}.logo span:nth-child(2) {   transform-origin: 25% 200%;   font-size: 0.96em;   transform: scale(75.9, 1) rotatey(89.5deg);}.logo span:nth-child(3) {   transform-origin: 0% 200%;   font-size: 0.915em;  transform: scale(85.9, 1) rotatey(89.5deg);}.logo span:nth-child(4) {   transform-origin: Infinity% 200%;   font-size: 0.85em;   transform: scale(1, 1) translatey(0%);}.logo span:nth-child(5) {   transform-origin: 100% 200%;   font-size: 0.915em;   transform: scale(85.9, 1) rotatey(-89.5deg);}.logo span:nth-child(6) {   transform-origin: 75% 200%;   font-size: 0.96em;   transform: scale(75.9, 1) rotatey(-89.5deg);}.logo span:nth-child(7) {   transform-origin: 66.66666667% 200%;   font-size: 1.035em;   transform: scale(65.9, 1) rotatey(-89.5deg);}

以下は CodePen で実装された小さな例です: (翻訳者注: 元のデモはページに埋め込まれた iframe で CodePen で実装されていますが、マークダウンには iframe を埋め込むメソッドがないため、Codepen表示には が使用されており、元のデモは次のとおりです。jade および scss の記述メソッドは、これら 2 つのテクノロジを使用していない読者が読みやすくするために html および css に変換されます。

• Jade と scss を使用して完成したデモ
• HTML と CSS に変換されたデモ

実際の効果:

影の関数

3D効果と影を実装する関数を書きます。あるフレームでビデオを止めて、細部を注意深く観察してみました。

ご覧のとおり、この影が右下隅に到達すると、3D 効果の消失点は中央にあります。これで、関数が何をする必要があるかがわかりました。

この関数はキーフレームで呼び出すため、次のようないくつかの値を処理できるようにします。

• color
• x
• y
• ぼかし
• ミックス

影や 3D 効果の深さを定義するパラメータも必要です。

これらの要件を処理するために次の関数が使用されます:

/// 在特定方向创创建三维阴影/// @author Gregor Adams/// @param {Number} $depth - 阴影长度/// @param {Unit} $color - 阴影颜色/// @param {Unit} $x - 在x轴上到下一个阴影的距离/// @param {Unit} $y - 在y轴上到下一个阴影的距离/// @param {Unit} $blur - text-shadow的模糊距离/// @param {Color|false} $mix - 添加一个可选的颜色来混合/// @return {List} - 返回text-shadow列表@function d3($depth, $color, $x: 1px, $y: 1px, $blur: 0, $mix: false) {  $shadow: ();  @for $i from 1 through $depth {    // append to the existing shadow    @if type-of($mix) != 'color' {      $shadow: append($shadow, round($i * $x) round($i * $y) $blur $color, comma);    } @else {      $shadow: append($shadow, round($i * $x) round($i * $y) $blur mix($mix, $color, 0.3%*$i), comma);    }  }  @return $shadow;}

この関数は、Sass の初心者または基本的な機能しか使用しない開発者に適しています。言語の機能については、読者やデザイナーにとっては少しわかりにくいかもしれないので、詳しく説明します。

我以一个 $shadow 的变量开始， list 是一个空的列表。

$shadow: ();

我是从1开始循环到 $depth 。在 Sass 中会使迭代器迭代到 through 这个值。

• from 0 to 5 返回 0, 1, 2, 3, 4
• from 0 through 5 返回 0, 1, 2, 3, 4, 5

每一次迭代我都添加一个 text-shadow 到这个列表。所以最后这个列表看起来就是下面这个样子：

$shadow: (0 1px 0 red, 1px 2px 0 red, 2px 3px 0 red, ...);

使用的时候就像下面这样：

text-shadow: d3(5, red, [$x], [$y], [$blur], [$mix]);

$x,$y,$blur 和 $mix 都是可选的参数。我已经提到我将会在 keyframes 中调用这个函数，所以我需要可选择性地改变他们。 $mix 允许添加第二个颜色，实现这个阴影从一种颜色淡出成另外一种颜色。

下面是在 CodePen 实现的小例子：（译者注：原 demo 是页面中嵌入的 iframe 实现嵌入 CodePen ，但是 markdown 没有嵌入 iframe 的方法，所以采用 CodePen 来展示，并且把原 demo 的 jade 和 scss 写法转换成 html 和 css 方便没有使用过两种技术的读者阅读）

• 使用 jade 和 scss 完成的  demo
• 转成 html 和 css 的  demo

实际效果：

组装在一起

因为我已经创造了许多我需要的部分，现在可以建立动画了。

1. 组装在一起

我使用两个上面已经定义的变量 $offset 和 $trans ，动画有三个阶段，我需要仔细地决定何时到达某帧。

@keyframes pop-out {  0% {    transform:      if($offset == 0, scale(1, 1), scale(95.9 - abs($offset) * 10, 1))      if($offset == 0, translatey(0%), rotatey($trans));    text-shadow:      d3(15, rgba($c_3d, 0), 0, 0),      d3(50, rgba($c_shadow, 0), 0, 0);  }  50% {    transform:      if($offset == 0, scale(1.2, 1.2), scale(126.2 - abs($offset) * 10, 1.2))      if($offset == 0, translatey(-16%), rotatey($trans));    text-shadow:      d3(15, $c_3d, if($offset == 0, 0, -0.25px * $offset), 1px),      d3(50, $c_shadow, 1px, 3px, 3px, $c_shadow-mix);  }  100% {    transform:      if($offset == 0, scale(1.1, 1.1), scale(116.2 - abs($offset) * 10, 1.1))      if($offset == 0, translatey(-12%), rotatey($trans));    text-shadow:      d3(15, $c_3d, if($offset == 0, 0, -0.25px * $offset), 1px),      d3(50, $c_shadow, 1px, 3px, 3px, $c_shadow-mix);  }}

2. 淡出（动画结尾）同样的步骤实现淡出的效果。

@keyframes fade-back {  0% {    transform:      if($offset == 0, scale(1.1, 1.1), scale(116.2 - abs($offset) * 10, 1.1))      if($offset == 0, translatey(-12%), rotatey($trans));    text-shadow:      d3(15, $c_3d, if($offset == 0, 0, -0.25px * $offset), 1px),      d3(50, $c_shadow, 1px, 3px, 3px, $c_shadow-mix);  }  20% {    transform:      if($offset == 0, scale(1.05, 1.05), scale(105.9 - abs($offset) * 10, 1.05))      if($offset == 0, translatey(-7%), rotatey($trans));    text-shadow:      d3(15, rgba($c_3d, 0), 0, 0),      d3(50, rgba($c_shadow, 0), 0, 0);  }  100% {    transform:      if($offset == 0, scale(1, 1), scale(95.9 - abs($offset) * 10, 1))      if($offset == 0, translatey(0%), rotatey($trans));    text-shadow:      d3(15, rgba($c_3d, 0), 0, 0),      d3(50, rgba($c_shadow, 0), 0, 0);  }}

3. 改变字体颜色

还需要提供一个动画改变字体颜色。

@keyframes change-color {  0% {    color: $c_bg;  }  100% {    color: $c_fg;  }}

4. 触发这个动画

现在我们可以像下面这样把动画连接在一起。

animation-name: pop-out, fade-back, change-color;animation-duration: 4s, 2s, 0.1s;animation-delay: 0s, 2s, 3.2s

上面的代码只是一个近似的实现，每个字母有不同的动画延迟和间隔，可以点击 这里 查看最终的实现效果。

最后注意一下，我使用了一些不可思议的技巧来实现在纯 CSS 中再次触发动画，我将会在接下来的文章中解释。

写案例的时候并不是十分满意，因为写文章的时候我又想到了其它几个提高效果的方法。

为了写这篇文章我重新写了整个 Sass 代码，但是我仍然觉得我能提升一些。这就是我不间断做案例的主要原因。让我变得更加聪明，和在一些以前没有涉足过的方向有新的突破。

我几乎没有在实际的项目中用到这样的技术，但是我经常使用函数来提升效果。不论如何希望你喜欢这篇文章。

Gregor Adams 是一位来自 Hamburg 的前端开发者，他对 CSS 和 Sass 有极大的热情。从他的 CodePen 中可以看出他强大的 CSS 技术。

欢迎关注

• 新浪微博：前端外刊评论
• 博客：前端外刊评论
• 个人博客
• 如果有疏漏的地方欢迎批评指正：[email protected]