bbin电竞直播app视频

Let’s explore how to use hover interactions on bbin电竞 .

There’s a lot to cover so let’s dive in.

Hover interactions let you control exactly how and when elements appear on your site. In this tutorial, we’ll be adding multiple hover interactions to two different sections of this music festival site.

You can also create different interactions for every breakpoint.

On tablet and mobile devices, hover interactions will automatically convert to on tap interactions .

So let’s get into the feature capabilities.

To add an interaction to an element, you need to apply it to its parent container . So we’ll use the Layers panel to select the container we need.

We’ll open the Inspector panel on the right, select the interactions tab and add a hover interaction.

You’ll find this dropdown menu with a selection of preset transitions like grow, shrink, float and much more.

For our design, we want to set up a custom interaction instead.

You’ll notice this floating action bar appear on your canvas.

When setting up a hover interaction, you can define what your element looks like in its Initial and Hover state. The Initial state is what you see immediately after the site loads. The Hover state is what you see when you mouse over the element.

From here, you can also access the timing panel to set the Duration and Ease type , and you can play your interaction while you’re still designing it.

Over on the right is where we’ll adjust the transforms and edit the design of our interaction. We can control the opacity, rotation, scale, skew and translation of the element we’re working with.

Under design, we can set the background color...adjust the opacity...create a border... contour the corners, and add a shadow effect.

To get really intricate with your design, you can set up a custom interaction for each individual element within the same container.

Ok, let’s start setting up our own hover interactions. The first thing we want to do is make the stage name and show times only appear on hover .

To do that we need to make them disappear from the initial state . Notice that the design options are missing here. That’s because elements in their initial state will automatically appear as they’re designed on the canvas.

We could just set the opacity to 0%, but let’s make things a bit more interesting and add some movement.

Adjusting the translation will reposition elements in horizontal and/or vertical directions. To move the stage name to the left of the frame, we’ll set the X-axis to -600px.

From the timing panel, we’ll set the duration of the transition to 0.3 seconds...and set the Easing to Ease in and out for a gradual flow. To see what we’ve got so far, pay attention to the textbox on the left when we click play.

That’s looking good, so let’s do the same thing for the show times on the right.

Making sure we’re still in the initial state , let’s set the translation on the X-axis to 600px this time.

We’ll head back to the timing panel to set the duration to 0.3 seconds and keep the Easing type the same.

Now while this bright pink gradient behind every item is beautifully designed, it can be a bit overwhelming to look at all at once. So let’s reveal it only on hover as well.

The gradient image is just another child element in the same parent container , so we’ll use the Layers panel to select it.

Again, we need to make it disappear on the Initial state...so this time we’ll set the opacity to 0%.

Remember how we set the interaction duration for those two text boxes to 0.3 seconds? We want the gradient image to appear before then, so let’s set the duration of this interaction to 0.1 seconds.

Let’s take a look...great!

We could go even one step further and change the text color on hover to really make it pop.

So let’s select the main text, and this time we gotta make sure we’re customizing the interaction in the Hover state .

Under design , we’ll change the text color to white and make it italic for that extra touch. This will give it a nice contrast against the bold background.

In terms of timing, we want this interaction to appear immediately, so let’s set the duration to 0 seconds.

Let’s preview our interactions one last time to see the final result.

They also look great as on tap interactions on tablet and mobile breakpoints.

We mentioned earlier that you can design different interactions for every breakpoint. In this next section, we’ll customize our interaction for every screen size, and create a fun way to show off the locations of our past music festivals.

Let’s begin with Sao Paulo and select the parent container.

Unlike our last section, we’re not going to be moving the text out of the frame completely. So first, let’s use the Inspector panel to set the overflow content to Hide so that you don’t see the text spilling over the container.

Now let’s get right back into our hover interaction flow.

To clean up the design a little, we’ll make the location text only appear on hover . Similar to our last section, this means we’ll need to make the text disappear in the Initial state.

This time we’ll make the text pop up from the bottom, so let's set it to translate 100px on the Y-axis.

Next, we’ll use the timing panel to set the duration to 0.2 seconds and keep the Easing type as Ease in and out.

Now we’ll select the year, and staying in the Initial state, we’ll set it to translate a bit lower at 200px on the Y-axis and set the duration to 0.3 seconds.

Now that we’ve hidden the text on the initial state, it doesn’t make sense to have this hyperlinked arrow here anymore. So let’s select it, and making sure we’re in the Initial state, we’ll set the opacity to 0%.

We could add some more movement to this arrow on hover, so let’s select the hover state and set the rotation to 360 degrees. We’ll set the duration to 0.3 seconds too so that it appears at the same time as the year.

There’s one more element here we need to add an interaction to. We’ll use the blue breadcrumbs to select the parent container of this vector art with a pink background.

To make the pink background disappear on Hover , we’ll use the design menu to set the background color opacity to 0%.

Note that we’re adjusting the design rather than the opacity for the entire container since we still want that star to appear.

We’ll just set this duration to 0 seconds so it appears immediately.

It’s time to add some movement to the star itself so we’ll select it from the Layers panel to get started.

Let’s add a bit of dimension and make the star a bit smaller on the initial state.

We’ll scale the X and Y to 60% of its original size.

We’ll set the duration for this interaction to 0.2 seconds and keep the same Ease type.

Excellent.

We’ll repeat the same actions for all the other locations.

Some of you may have noticed that the Miami location doesn’t have a hyperlinked arrow next to it—that’s because it’s our current festival and we’re already on the relevant site. Good eye!

Let’s preview our design on tablet. Remember, our interactions will automatically convert to on tap , but the design is still looking great.

On mobile, you can see our design has adapted to the smaller viewport but it seems like there’s a lot going on. Let’s tweak our interaction design on this breakpoint.

Luckily, the edits we make to our interactions follow the cascading rule , meaning changes we make on the mobile breakpoint will  not be reflected on larger breakpoints.

Let’s start with Sao Paulo again, and select the parent container from the breadcrumbs. Now we’ll go back to the Inspector panel and access the interactions tab.

So we basically need to reverse the interactions we previously added to each of these elements. In the Initial state , let’s reset the translation to 0.

We’ll do the same thing for the year.

For the arrow, we need to edit the interaction on both the initial and hover state. Let’s start with the initial state and reset opacity to 100%.

Now on Hover , we just need to reset the rotation.

We’ll repeat the same actions for the rest of the locations.

Let’s preview our final design. See how the changes we made on mobile don’t appear on tablet and desktop?

And just like that, with a little bit of creativity and hover interactions, we were able to create a dynamic web experience for every breakpoint.

bbin电竞 is an advanced creation platform. To master it, continue watching this series of video tutorials.