使用引人入胜的最新项目列表是让您的页面脱颖而出的一种绝佳方式。精心制作的索引不仅仅是一个简单的列表；它可以是一种交互式体验，给您的受众留下深刻印象。通过结合本教程中演示的独特且视觉吸引力的组件，您可以使您的作品更令人难忘，并增加与您的 Framer 页面的互动。

图像放大悬停交互

在此示例中，我使用悬停交互，当您将鼠标悬停在项目上时，图像会出现。图像在初始状态下透明度设置为 0%，它们很小且居中。在悬停状态下，我使图像可见，放大它们，并将它们移出边缘，以使它们看起来更具动态感。我还使用“差值”混合模式为我的文本元素创建这种半透明效果。我为每个项目制作了单独的变体，因为每个效果都是定制的。

大图填充

在此示例中，一旦您将鼠标悬停在列表项上，图像将填充页面的大小。您可以通过创建一个在初始状态下隐藏的大图像，然后在悬停状态下将其设置为可见来实现此目的。我还使用一个简单的箭头，它从组件的左侧出现。溢出设置为隐藏，因此箭头在初始状态下是不可见的。

我利用图像的绝对定位来独立于堆栈设置调整和对齐它们，因为组件是一个堆栈，旨在保持元素井然有序。您可以通过在属性面板中添加标题、图像和年份来自定义此组件的版本。

带有强调背景的卡片

在此示例中，一张带有背景强调的卡片会显示在悬停项目的左侧或右侧。我为图像添加了一个小旋转，并将其从底部移动以与文本垂直对齐，从而创建出微妙的运动效果。您可以在属性面板中自定义对齐方式（左或右）、标题、图像和背景强调。

滑动视频缩略图

在此示例中，当您将鼠标悬停在项目上时，小的视频缩略图会从左侧滑出。为了实现这一点，我将视频在主状态下的不透明度设置为 0%，并使其略小，因此在悬停状态下它会给人一种正在增长并将整个内容向右移动的印象。您可以在属性面板中添加您的视频并自定义标题和年份。

背景视频

在此示例中，我创建了一个包含多个项目的长列表。当您将鼠标悬停在其中一个项目上时，您将在列表项目的背景中看到一个视频。我将视频在主状态下的可见性设置为“否”，然后在悬停状态下将其可见性设置为“是”。由于整个组件是一个堆栈，为了使所有元素组织良好，我使用视频的绝对定位来自由调整其大小和对齐，独立于堆栈设置。您可以在属性面板中添加您的视频并自定义标题和年份以及标签的可见性。

带模糊背景图片的文本遮罩

在最后一个示例中，一旦您将鼠标悬停在列表项上，一张模糊的图像将填充页面大小，并且文本使用该图片的遮罩。您可以通过创建一个在主状态下隐藏的大型模糊图像，然后在悬停状态下将其设置为可见来实现。注意模糊图像的大小很重要，因为它可能会影响页面的性能。使用来自 https://framer.supply/ 的文本遮罩组件，您可以轻松地为文本添加遮罩，并调整文本遮罩中图像的 Y 偏移量以获得完美的外观。

留下深刻印象

总之，为您的最新项目创建一个交互式索引可以增强您的 Framer 页面，为您的受众提供难忘且引人入胜的体验。通过实施本教程中强调的技术，您可以创建视觉上吸引人的索引，以独特的方式展示您的作品，并给您的访问者留下深刻印象。