Interactive Horizontal Boxes

Interactive Horizontal Boxes has 2 part, one wrapper and child components. Too understand how this component will be useful, please see “See it in action” section which could be found bottom of this page. This component can handle video backgrounds too.


Wrapper

Height : Height of the box in pixels.

Relative Input : Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only.

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.

Calibrate X : Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialization.

Calibrate Y : Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialization.

Invert X : true moves layers in opposition to the device motion, false slides them away.

Invert Y : true moves layers in opposition to the device motion, false slides them away.

Limit X : A numeric value limits the total range of motion in x, false allows layers to move with complete freedom.

Limit Y : A numeric value limits the total range of motion in y, false allows layers to move with complete freedom.

Scalar X : Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.

Scalar Y : Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.

Friction X : The amount of friction the layers experience. This essentially adds some easing to the layer motion.

Friction Y : The amount of friction the layers experience. This essentially adds some easing to the layer motion.


Interactive Box

Size : Column size. 1/2, 2/3, 1/3 and 1/4 options are available.

Title Size : H1 to H6 element options available to use as box’s title size.

Background Image : Select a background image, if you wish.

Background Color : Select a background image, if you wish.

Title : Title of the box.

Excerpt : Some short text to describe event.

Title Color : Font color of the title.

Excerpt Color : Font color of the description text.

Hover : If “on” selected, you can set background, title and excerpt color for hover mode.

Title : Title of the box. Will be shown on hover only.

Excerpt : Some short text to describe event. Will be shown on hover only.

Hover Title Color : Some short text to describe event.

Hover Excerpt Color : Some short text to describe event.

Minimum Height : Set minimum height of your row in pixels. Not required

Video Background : If “on” selected, you can set background, title and excerpt color for hover mode.

MP4 file : Path to your MP4 file

WEBM file : Path to your WEBM file

OGV File : Path to your OGV file

Icon : Once you select an Icon, title will not be shown on overlay.

Link : URL which will be called on click.

Link Target : Target window for your link.


See it in action : See it in action