使用Tailwind CSS和Framer Motion创建活动链接动画

Back to Tutorials & Guides

返回教程和指南

Preview of the sliding active link effect we are going to build

When designing a one-page website, it’s often helpful to provide users with a visual indicator of their current location on the page. One elegant way to achieve this is by implementing an animated active link in your navigation menu.

在设计单页网站时,为用户提供当前位置的视觉指示通常是很有帮助的。一种优雅的实现方式是在导航菜单中实现动画活动链接

This tutorial will guide you through creating a sliding active link animation using Next.js, Tailwind CSS, and Framer Motion. We’ll develop a navigation menu where the active link is highlighted with a sliding background.

本教程将指导您使用Next.jsTailwind CSSFramer Motion创建一个滑动的活动链接动画。我们将开发一个导航菜单,其中活动链接将以滑动背景的形式突出显示。

Let’s get started!

让我们开始吧!

Setting up the project

设置项目

We’ll use Next.js with the App Router for this project. Here’s how we’ll structure our main components:

我们将在这个项目中使用Next.js和App Router。这是我们如何构建我们的主要组件结构:

  • A page component to hold everything together
  • 一个页面组件来将所有内容组合在一起
  • A navigation provider to manage the active link state
  • 一个导航提供者来管理活动链接状态
  • A navigation menu component
  • 一个导航菜单组件
  • A section component for each part of the page
  • 每个页面部分都有一个部分组件

Let’s break down each part.

让我们逐个解释每个部分。

The page component

页面组件

In the page.tsx file, we’ll define our page sections:

page.tsx文件中,我们将定义我们的页面部分:

const sections = [ { title: "Home", slug: "home" }, { title: "Customers", slug: "customers" }, { title: "Partners", slug: "partners" }, { title: "Team", slug: "team" }
];

Then, we’ll set up our main page component:

然后,我们将设置我们的主页面组件:

export default function SlidingActiveLinkPage() { return ( <main className="relative flex min-h-screen flex-col overflow-hidden bg-slate-50"> <NavProvider> <NavigationMenu links={sections} /> <div className="w-full max-w-5xl mx-auto px-4 md:px-6"> {sections.map((section) => ( <Section key={section.slug} section={section} /> ))} </div> </NavProvider> </main> );
}

This component serves as the main structure for our one-page website. It includes the NavigationMenu and Section client components, both wrapped in a NavProvider, that allows us to manage the state of the active section across di...

开通本站会员,查看完整译文。

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-05 23:19
浙ICP备14020137号-1 $bản đồ khách truy cập$