Create a Horizontal parallax Scroll Effect

 

Parallax effect has become very popular in web design. With this technique you can create different visual effects where the background of the website moves at a different speed than the rest of the element of the page. With Parallax scrolling effects you can guide your visitors through a story and catch their attention.

In Adobe Muse you can also achieve this effects using the scroll effect tab. In this tutorial you will learn how to create a horizontal parallax scrolling effect. Get your graphics, prepare your story and let’s get started!

  1. Choose your browser fill (in this tutorial we are using a solid color). Place your graphics in your Muse page. Make sure there is enough space among them, you will later make adjustments.horozontal-parallax-scroll-effect1
  2. Open the Scroll Tab in Muse. Click on each element and set the motion. Repeat this step with all the elements of your page. Preview the page and make the necessary adjustments. You will need to move up or down the elements and the motion point until you get the desired effect.
    Initial motion indicates the speed and direction before scrolling hits a certain point in your page (23px in this example)
    Final motion indicates the speed and direction after scrolling hits a certain point (23px in this example)horozontal-parallax-scroll-effect2
  3. We have also added anchor links. Create as many circles as elements in your page with the elipse tool. Place them on the left of your website and pin it, so it will always be visible when you scroll. Place the anchor links near the elements and link them to the circles, so whenever you click on them it will take you to the desired point.horozontal-parallax-scroll-effect4

 

You can download the graphics used from Freepik here.

Watch the video for more detailed information.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top