bbin电竞赛事外围手机版

Fade.

1. Select your header

2. Open the Inspector panel

3. Set Position Type to Pinned

4. Toggle on Transition

5. Select Fade

Result:

In preview, the header will fade as you scroll (about 250px down the page), and appear again as you scroll back.

Note:

Play with the Duration from the Inspector panel to fine-tune the effect.

See live result →

Color change.

1. Select your header

2. Open the Inspector panel

3. Set Position Type to Pinned

4. Check Overlap Next Section

5. Check Fill Color > Select secondary color

Result:

In preview, the secondary background color will appear as you start scrolling and you will see the default only when you get back to the top of the page.

See live result →

Move.

Layout :

1. Select your header

2. Apply a 1x2 grid (1 column, 2 rows)

3. Select Adjust Grid then Edit Grid

4. Set the top row Min to 80px

5. Set the bottom row Min to 40px

6. Select your header

7. Open the Inspector panel

8. Change the Min Height to None

9. Add a container to your header

10. Stretch the container to cover the 2nd row of the grid

11. Select the container in the 2nd row

12. From the Inspector panel, choose the Design tab

13. Change the background color

14. Select the top row of the grid

15. Choose a different background color

Transition:

1. Select your header

2. Open the Inspector panel

3. Set Position Type to Pinned

4. Check Overlap Next Section

5. Choose Transition > Toggle on

6. Set the Distance to 80px (height of the first row in the header)

Result : In preview, as you scroll, the header will move down the page (about 400px) and then, as you continue to scroll, the top row of the grid will disappear to leave only the bottom row visible.

Notes :

a. Make sure you have enough page to scroll down—one section isn’t enough.

b. Play with Duration & Ease in the Inspector panel for fine tuning of the animation.

See live result →

Watch Yanay recreate this effect →