Welcome to the Parallax Tilt Effect Widget

Add a unique tilt effect to elements on your Adobe Muse website with the Parallax Tilt Effect Widget from Muse For You.

Before you begin, drag the 'Parallax Tilt Effect - Add First' widget from the Library Panel (Window > Library) and place at the top of your Adobe Muse website.

01

How to use the widget and what's what

INSTRUCTIONS

Make sure that the graphic style name of the element and that in the widget options are same

After placing the add first widget at the top of your website, select the element you would like to tilt when hovered over. Apply a graphic style to it via built-in Adobe Muse 'Graphic Styles' panel. Then, drag and drop the 'Parallax Tilt Effect - Main Element' widget from the library panel and within the widget options, enter the graphic style name you just applied.

02

Parallax Tilt Effect - Main Element Widget

WIDGET ONE

Within widget options, in Options section, you can set the tilt amount and perspective, and enable or disable the X or Y axis. In this case, we have disabled the 'X' axis.

Enabling glare by selecting the 'Enable Glare' option gives depth to the element and a nice shining effect.

Setting the 'scale' to more than 1 will zoom the element on hover. You can set this value up to 2 decimal places. In this case, it is 1.25

In 'Enter/Exit' section, you can set the enter/exit speed and easing. You can even choose to reset the effect on exit by selecting the 'Reset on Exit' option. If this option is not selected, the element will remain in tilt position even after exiting.

03

Parallax Tilt Effect - Inner Elements Widget

WIDGET TWO

Make sure the inner elements are on top of the main element

The 'Parallax Tilt Effect - Inner Elements' widget allows you to have an element appear in 3D over the main element. In the example below, we have 1 main element and 2 inner elements. Hover over them to see the effect in action.

To apply this effect, first apply a graphic style name to the element you would like to have 3D effect. Place this over the main element. Make sure it is on top of the main element.

Now, drag the 'Parallax Tilt Effect - Inner Elements'  widget from the Library Panel (Window > Library) and place onto your website. Open widget options. Enter the graphic style name and the 'Translate Z' value. The higher the Translate Z option, the more 3D the element will appear. In this case, it is set to 40

If there is a group of inner elements, as in this case there is an image and a text box, you should group them and put them in a state button. Then apply graphic style to the state button.

04

Additional Information

MORE INFO

The lower the perspective option the more tilt the element will have.

Inner elements must be on top of main element.

The higher the “Translate Z“ option for the inner elements the more 3D the element will appear.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials