有一天，我在浏览Apple.com，想知道怎么看电视，但很显然，按下“观看”键会把你带到另一个地方。
就在那时，也只有在那时，我才看到了旗帜的全部美丽。我用苹果卡不仅可以得到3%的每日返现。哦,不。我可以在24个月内无息支付我的新苹果手表。
但最让我印象深刻的是这条横幅。与其他横幅不同的是，它干净、优雅，动画也非常流畅。
所以。我想谈谈如何在Webflow Designer中重建这样的横幅。我们在这里使用的概念是完全相同的如果你用自定义代码构建它或者你使用像Webflow这样的可视化开发平台。
所以我们将把它分解为三件事:结构(基本上是横幅的结构和样式)，然后是交互和动画本身，最后，我们将弄清楚如何在Apple.com上看电视。
结构。有很多不同的方法可以做到这一点。我们用的Div比苹果少三个，结构看起来是这样的:
我们将有我们的文本，它将被放置在一个文本包装器中。然后所有这些都被放在一个横幅里，它坐落在一个横幅包装里面。
两个问题:(1)为什么要这样布局?(2)它不是“嵌套的”而不是“依偎的”吗?
其神奇之处在于文本受到文本包装器的限制(它使内容变得狭窄)。旗帜本身就包含了这一切。但横幅包装是作为秘密窗口。它会在动画中剪掉横幅。
所以。让我们开始吧。我们将以相反的顺序构建这个结构:我们将从最父元素开始。让我们添加一个Div(我们将把它放在页面的任何地方，但我将把它放在导航栏下)。让我们创建一个类来保持它的组织性:我将称之为banner wrapper。这只是开始。
当然，在横幅包装器内部，我们将添加另一个Div。为什么?因为这个(我们会再添加一个类)是我们的横幅。我们在这里设置背景色。请记住:我们还没有添加任何维度，我们不这样做的原因是，很多内容将由文本本身调整大小。
好的。横幅内部是我们的文本包装器。哦，看，另一个Div，这是文本包装器(所以我们差不多完成了-我们要确保在这里添加一个具有该名称的类)。这个不一样，因为就像我们刚才说的，我们用它来保持物体整齐地朝向中心。让我们设置最大值(苹果是980，你可以任意设置)让我们将两边的空白设置为自动(这将保持内容居中)。
好的。最后，让我们添加文本。苹果在这里用了一段话。这可能是我们最好的选择，但你真的可以添加任何东西-一个图像，一个链接，一个按钮。我们可以用我们想要的样式来设计段落，让它看起来像我们想要的样子。
现在。在我们进入交互之前还有一件事。这看起来不错，但默认情况下段落可以有一些底部空白。所以我们把它归零。而且，两边的文字非常紧凑。让我们选择我们的文本包装器，并添加一些填充，以在所有的四个面创造一些喘息空间(只需按住shift键，同时调整所有的四个面)。
此外，因为我们将在这里创建一个动画，我们想要确保横幅是隐藏的(在苹果上，注意横幅在动画进入之前是不可见的)。因此，为了确保我们的设计中有相同的内容，选择横幅包装器，让我们过去并隐藏溢出。(这将剪辑边界之外的内容。)
朋友们，就是这样。我们可以更进一步吗?当然，我只是粘贴了比苹果更有竞争力的新文本。
好的。交互。这个非常简单。我们有一个初始状态(横幅在某种程度上隐藏在视图之外)，然后我们有一个完全加载状态(这样在页面加载后，我们可以将横幅滑到视图中)。
让我们来构建它。让我们确保我们的横幅被选中(而不是包装器)，然后让我们进入并添加一个交互。我们希望这是一个页面触发器(因此当页面加载时，我们希望发生某种动画)。我们可以在这里定义它我们可以让它开始一个动画，这可以是我们自己创建的一个新动画。我们称之为“我们自己创建的新动画”。“不过，不，我们不会，那是个糟糕的名字。我们把它改名为"横幅滑入"
好的。总结一下:两点。起点，终点。让我们点击添加一个起点。我们要移动这个，我们选择移动。演示一下，我们在y轴上上下移动。但我们真正想做的是确保它100%(这是横幅的全部高度)-我们想确保它100%向上，所以我们不能通过横幅包装看到它。我们设它为- 100%
和现在。它去哪里来的?它就在视线之外。
为了确保这是它在默认情况下所做的(事实上，如果我按下播放按钮，当页面加载时，它实际上在做我们想要的相反的事情)但为了确保这是初始状态(所以它被隐藏在页面加载中，我们将设置这个动作为初始状态。
好的。这是第一部分:起点。第二。我们将再添加一个动作。(这也是一个移动动作)在这一点上，我们想把它归零(换句话说，我们想让它回到原点)这有什么用?让我们来看看。
播放按钮。
我们可以看到，它从起点(初始状态)到原点(我们希望它在的位置)
现在。我们可以在这里做一些其他的事情。例如，我们可以改变缓动(我们可以控制缓动曲线的类型来决定y位置的速度)，让我们在动画开始之前在这里添加0.2秒的延迟。
我们能做的另一件事(如果我们真的想要像苹果那样)是，我们可以在加载后改变颜色。所以让我们再补充两点:
第一。让我们改变一下背景色。我们会在动画进入后添加另一个动作。这个动作会改变背景颜色。我们将把颜色改为灰色(我们可以在这里选择任何颜色)。我们不希望这个过程立即发生。让我们确保这个动作在2秒内开始(我们可以在这里添加延迟)。
我们也可以改变文字的颜色。为此，让我们选择段落。一旦我们这样做了，我们会特别点击以确保我们添加了一个并发动作。你会注意到它是如何分组的(我们选择文本颜色)当我们分组时这个动画会和背景颜色同时发生。我们把颜色换成黑色或者深灰色。
如果我们进入预览模式。会发生什么呢?好吧，我没按按钮。但是当我这样做的时候呢?繁荣。的。颜色改变。魔法。
所以。我们可以用这样的东西做很多事情。让我们回顾一下在进入第3步之前我们做了什么。
我们添加了四个元素:一个横幅包装器，其中一个横幅，一个文本包装器，以及其中的一些文本。我们用一种叫做css的秘密语言对它做了很多事情。这样我们就能得到我们想要的布局位置。
然后我们添加了一个交互。在页面加载时，我们遵循自定义动画，动画遵循我们的动作:从初始位置移动到原点。然后改变背景的颜色还有另一个与"背景"相反的东西
最后，第三步，我将尝试找出如何观看Apple TV+ -特别是Ted Lasso，在苹果的网站上。
苹果电视……这是如何运作的?是苹果。com吗?我,还是……不，等等，我找到了。苹果电视+。好了。好的。流了。好的,现在流。 Open TV. Welcome to TV. Start watching. Alright, Ted Lasso I'm coming for you. Wait. Okay. Start free trial. Apple ID. Okay. Password. I'm in.
[泰德·拉索在背景中演奏]
(格里默)会很好的。
