Layout - Shortcodes: Parallax Scene

Shortcodes

[intense_parallax_scene]

Description

Add a parallax scene to your page. Parallax scenes are useful and fun. They offer you the ability to include multiple layers at different depths. Each layer moves depending on the position of the cursor and the depth of the layer, which makes for a rather interesting effect. The parallax scene's image background can even be parallax, which will add to the effect. One thing to note, the current version works best with images that do not have a hard edge, meaning that the image is a floating image with a transparent background. This is a current deficiency that we are working through.

Screenshots

Dialog

Attributes

intense_parallax_scene

intense_parallax_scene_layer

Compatibility

Theme Compatibility

The parallax scene has three different sizing options:

• fullboxed (default) - 100% Full Width with Boxed Content
• full - 100% Full Width
• partial - Partial Width with Boxed Content

Fullboxed will make the parallax scene the entire width of its container with boxed content inside. Full will make the parallax scene the entire width of its container without a box around the content. Partial will put a box around the parallax scene itself making the parallax scene the size of the box.

In the HTML markup created by the [intense_parallax_scene] shortcode, there are two different HTML elements at play when it comes to the width of the parallax scene. The content section itself is an HTML section tag with at least two CSS classes (.intense and .content-section). Depending on the size option, there may also be an additional div used for boxing the content. The boxed div will have two CSS classes as well (.intense and .container).

The key to getting the box to look correctly within a theme is to make sure the .container class has the correct width for your theme. This class is standard for Twitter Bootstrap and may already be styled if the theme uses Bootstrap.

Another possibility is that your theme uses a different CSS class for this same purpose. If this is the case, you can set the CSS class name under the shortcodes options.

If the theme doesn't use Twitter Bootstrap and it doesn't define a similar class for the boxed content, you can manually set the width of the .container CSS class under the CSS code options.

Example:

.intense.container {
    width: 940px;
}

@media (min-width: 1200px) {
    .intense.container { 
        width: 1170px; 
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .intense.container {
         width: 724px;
    }
}

@media (max-width: 767px) {
    .intense.container { 
         width: auto; 
    }
}

Examples

[intense_parallax_scene size="full" background_type="image" image="2718" imagemode="parallax" height="300"]
    [intense_parallax_scene_layer layer_depth="0.30"]
        [intense_image image="368" size="Full" title="asteroid-belt"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.20"]
        [intense_image image="2727" size="Full" title="Spaceshuttle"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.80"]
        [intense_image image="2711" size="Full" title="asteroid-belt"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.10"]
        <div style="padding-left:40px;">[intense_image image="2726" size="Full" title="astronaut"]</div>
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.00"]
        [intense_content_section]
            [intense_row padding_top="0"]
                [intense_column size="8" medium_size="8"][/intense_column]
                [intense_column size="4" medium_size="4"]
                    [intense_promo_box shadow="8" background_color="#ffffff" background_opacity="70"]
                        This parallax scene has 5 layers over a background parallax image. Most of these layers are images, but you can enter other content in the layers if you like. This promo box is inside of a layer.
                    [/intense_promo_box]
                [/intense_column]
            [/intense_row]
        [/intense_content_section]
    [/intense_parallax_scene_layer]
[/intense_parallax_scene]

[intense_parallax_scene size="full" background_type="color" background_color="#c7bda3" height="500" advance_arrow_background_color="#ffffff"]
    [intense_parallax_scene_layer layer_depth="0.20"]
        [intense_image image="2734" size="large1600" title="layer 4"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.30"]
        [intense_image image="2733" size="large1600" title="layer 3"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.50"]
        [intense_image image="2732" size="large1600" title="layer 2"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.60"]
        [intense_image image="2731" size="large1600" title="layer 1"]
    [/intense_parallax_scene_layer]
    [intense_parallax_scene_layer layer_depth="0.10"]
        <center>[intense_heading font_size="80" line_height="90" font_color="#000000" align="center" font_weight="700" margin_top="0"]Example Photos[/intense_heading]</center>
    [/intense_parallax_scene_layer]
[/intense_parallax_scene]