Parallax.js Widget - For Adobe Muse CC

Parallax.js for your Adobe Muse Website

• created: 04/04/2016
• latest update: 04/10/2016
• by: John Ramos - Muse For You
• email: john@museforyoushop.com

Welcome to the Parallax.js Widget by Muse For You.

The Parallax.js widget allows you to easily add parallax motion to elements on your Adobe Muse website. When on a desktop or laptop the parallax movement occurs when you hover your mouse over the scene. On a mobile or touch device the parallax movement occurs when you tilt the screen. The widget works by assigning graphic style names to elements and matching them with the graphic style names in the widget. Afterwards you can change the parallax motion of each element and how much you would like the elements to move in the parallax scene. A scene is the area that all of the elements are placed on. 

This widget comes with 3 widgets. They are:

Parallax.js Widget - Add for the first instance to the desktop version of your website. Also use for each layout when using Adaptive Design.

Parallax.js Widget - Breakpoints - Add to any additional breakpoints if you would like to inherit the elements from the main breakpoint. The additional breakpoint must have a different instance number and scene graphic style name. Each new Parallax.js widget must be hidden on other breakpoints.

Parallax.js Widget - Additional - Add to any additional breakpoints if you would like a completely new parallax scene for that breakpoint. The additional breakpoint must have a different instance number and scene graphic style name. Each new Parallax.js widget must be hidden on other breakpoints.

Each breakpoint requires a unique scene. A scene is the rectangle you place behind the elements in the parallax motion. As an example - if the desktop version has a scene with the graphic style name "scene1" then you would create a new rectangle on another breakpoint and give it the graphic style name "scene2." If you would like to inherit the elements and the graphic style names from the main breakpoint then simply add the Parallax.js - Breakpoints widget to that breakpoint and change the instance number and scene graphic style name for the scene. You'll have to create a new rectangle on that breakpoint and apply the new "Scene Graphic Style Name" to that rectangle.

To Apply a scene to the elements simply draw a rectangle over all of the elements and send the rectangle to the back. You can right click on the rectangle and then go to Arrange-->Send to Back. You can also move the rectangle all the way to the bottom in the layers panel. Then make the scene rectangle 100% width to cover the width of the entire browser. To set it to 100% width click on the rectangle then go to "Resize" in the upper toolbar and click on "Stretch to Browser Width."

After the rectangle is behind all of the elements and is at 100% width you can assign the "Scene Graphic Style Name" to the rectangle. Add a new scene to each breakpoint. So if you have a breakpoint at 960 and it has a scene with the graphic style name "scene1" and then afterwards you create a breakpoint at 320 you'll want to create a new rectangle and apply a different graphic style name to it. For example "scene2."

You can add up to 12 layers/elements to the parallax scene. Simply apply the graphic style names that are in the widget to the elements on your Adobe Muse website using the Graphic Styles panel. If you do not see the graphic styles panel simply go to Library-->Graphic Styles.

You can apply a movement from 0 to 1 to each layer. 0 will be no movement and 1 will cause the layer to move by the total effect of the calculated motion that you set in the scene options. You can go up to two decimal places for the movement. The movement number corresponds to the layer number. On a desktop or laptop the movement will occur on mouse over. On a touch device or mobile device the movement will occur when tilting the device.

The scene options sets the amount of parallax motion for the scene, and how the elements will move on mouse over or on tilting the screen.

Relative Input - Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only. Check to enable, and uncheck to disable.

Clip Relative Input -  Specifies whether or not to clip the mouse input to the bounds of the element passed to the parallax constructor. Mouse input only. Check to enable, and uncheck to disable.

Calibrate X - Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialisation. Check to enable, and uncheck to disable.

Calibrate Y - Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialisation. Check to enable, and uncheck to disable.

Invert X - When checked this option moves layers in opposition to the device motion on the x-axis.

Invert Y -  When checked this option moves layers in opposition to the device motion on the y-axis.

Limit X - A numeric value limits the total range of motion on the x-axis, false allows layers to move with complete freedom. This options accepts a numeric value or the word false.

Limit Y - A numeric value limits the total range of motion on the y-axis, false allows layers to move with complete freedom. This options accepts a numeric value or the word false.

Scalar X -  Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion on the x-axis.

Scalar Y -  Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion on the y-axis.

Friction X -  The amount of friction the layers experience on the x-axis. This essentially adds some easing to the layer motion. Choose a number between 0 and 1.

Friction Y -  The amount of friction the layers experience on the y-axis. This essentially adds some easing to the layer motion. Choose a number between 0 and 1.

Origin X -  The x origin of the mouse input. Defaults to 0.5 (the center). 0 moves the origin to the left edge, 1 to the right edge. Mouse input only.

Origin Y -  The y origin of the mouse input. Defaults to 0.5 (the center). 0 moves the origin to the top edge, 1 to the bottom edge. Mouse input only.

• You can use the Parallax.js widget along with the Muse Motion 2 widget to add animation and parallax movement to your elements.

• For Adaptive Design use the Parallax.js Widget for each layout if you would like a parallax scene on the different layouts.

• When using breakpoints each new Parallax.js widget must be hidden on other breakpoints.

• For responsive design (fluid-width) you can inherit all of the elements from the main breakpoint and simply add the Parallax.js Widget - Breakpoints to the new breakpoint. You'll also want to create a new rectangle for the scene and make sure the instance number and scene graphic style name are different for the breakpoint. (See video for a demonstration).

• For a completely new scene on a breakpoint use the Parallax.js Widget - Additional widget and create a new scene with a new instance number and new scene graphic style name.

I've used the following images, icons or other files as listed.

• Parallax.js by Matthew Wagerfield and Claudio Guglieri: http://matthew.wagerfield.com/parallax/

Once again, thank you so much for purchasing this widget. I'd be glad to help you if you have any questions relating to this widget. If you have a more general question relating to this widget, you might consider visiting the forums and asking your question in the "Item Discussion" section.

-John Ramos

Muse For You