Parallax Box 2

Parallax Box 2 component kinda extended version of generic Parallax Box, will help you to generate awesome parallax effects which will interact with mouse movements within minutes.

This component has 2 part, one wrapper and child(layer) components.

---

 

Wrapper

Height : Height of the box in pixels.

Mouse Port : Identifies DOM node to track the mouse in. If yes, parallax only works whenever mouse over this box.

---

Layer (Parallax Box 2 Layer)

Image : Select images that you want to build parallax layers. Each image will be count as one layer.

X-Parallax : Set it yes to make your parallax move on X axis.

Y-Parallax : Set it yes to make your parallax move on Y axis.

X-Origin : Initial X position of the parallax layers.

Y-Origin : Initial X position of the parallax layers.

Decay : Between 0-1 only. Sets the rate at which the layers ‘catch up’ with the mouse position. 0 is instantly, 1 is forever.

Frame Duration : Int milliseconds. Length of time between animation frames. With a lot of big layers, you may want to increase the frame duration to save CPU. About 50 is acceptable (20 frames/second), but I like it zippy. Modern browsers like Google Chrome have really accurate timing, but many older browsers choke below about 15ms.

---

See it in action : This simple version is not used within the demo.