پی اچ پی

Reproduce Popular Web Components

Reproduce Popular Web Components

This series is all about recreating the look and feel of popular or compelling web components that you might find around the web. From cool menu transitions, subtle UI interactions, or more complex animations, we'll break it all down and recreate it from scratch.

This should give you a solid understanding of how these effects and interactions work under the hood. Ready to get started?

سطح متوسط 5 جلسه آموزشی 01:54:00 ساعت
01
قسمت 1

Setup the Menu and Transitions

To get started, we'll take a look at recreating the Stripe menu effect with its slick follow-along effect. We'll begin by building a standard menu with transitions in vanilla HTML, CSS and JS.

02
قسمت 2

Implement the Follow-Along Effect

Let’s continue on and implement the follow-along effect. We'll begin with width and height transitions, but later in the video, we'll refactor to exclusively make use of transforms.

03
قسمت 3

Image Pin While Scrolling

In this next chapter, we'll take a look at a simple image pin effect while scrolling. We make use of position fixed as well as intersection observer to re-create this effect.

04
قسمت 4

Reproduce the Event Table Layout

Let's now figure out how to re-create the event list that is similar to the one found on the Quakecon website. Their table layout is very easy to scan which enables the user to quickly find the events they are interested in. We'll use both Vue and Tailwind to accomplish this effect.

05
قسمت 5

Modals and Tabs

To finish up, we'll next extract our events to their own components. Then we'll leverage Headless UI to implement the modals and tabs and give them their own unique style.

دوره در حال اجرا

این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.