Component Library

Parallax wrapper 

<div class="parallax-wrapper ">
    <div data-depth="0.2">
        <article class="icon-box ">
            <div class="icon-box__inner">
                <div class="icon-box__content">
                    <div class="icon-box__icon">
                        <svg class="svg-icon  ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-checkbox"></use>
                    </svg> </div>
                    <h2 class="heading heading--column ">Icon Box header</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
                <a href="url" title="Link title" target="" class="link   " property="url">Link text</a>
            </div>
        </article>

    </div>
</div>
 
<div class="parallax-wrapper {{ modifier }}" {{#if data-selector-events}} data-pointer-events="{{data-pointer-events}}" {{/if}} {{#if data-selector}} data-selector="{{data-selector}}" {{/if}} {{#if data-origin-y}} data-origin-y="{{data-origin-y}}" {{/if}} {{#if data-origin-x}} data-origin-x="{{data-origin-x}}" {{/if}} {{#if data-scalar-y}} data-scalar-y="{{data-scalar-y}}" {{/if}} {{#if data-scalar-x}} data-scalar-x="{{data-scalar-x}}" {{/if}} {{#if data-limit-y}}  data-limit-y="{{data-limit-y}}" {{/if}} {{#if data-limit-x}} data-limit-x="{{data-limit-x}}" {{/if}} {{#if data-invert-y}}  data-invert-y="{{data-invert-y}}" {{/if}} {{#if data-invert-x}} data-invert-x="{{data-invert-x}}" {{/if}} {{#if data-calibrate-y}} data-calibrate-y="{{data-calibrate-y}}" {{/if}} {{#if data-calibrate-x}} data-calibrate-x="{{data-calibrate-x}}" {{/if}} {{#if data-input-element}} data-input-element="{{data-input-element}}" {{/if}} {{#if data-hover-only}} data-hover-only="{{data-hover-only}}" {{/if}} {{#if data-clip-relative-input}} data-clip-relative-input="{{data-clip-relative-input}}" {{/if}} {{#if data-friction-x }} data-friction-x="{{ data-friction-x }}" {{/if}} {{#if data-friction-y}} data-friction-y="{{ data-friction-y }}" {{/if}} {{#if data-relative-input}} data-relative-input="{{ data-relative-input }}" {{/if}} >
      <div {{#if data-depth}} data-depth="{{ data-depth }}" {{else}} data-depth="0.2" {{/if}}>
         {{#block "parallax-wrapper-content" }}
            {{render "@icon-box"}}
         {{/block}}
      </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    "use strict";
var novicell = novicell || {};
novicell.parallaxWrapper =
    novicell.parallaxWrapper ||
    new function () {
        this.init = function () {
            let scenes = [];
            let parallaxWrappers = document.getElementsByClassName("parallax-wrapper");
            if (!parallaxWrappers) {
                return;
            }
            for (let i = 0; i < parallaxWrappers.length; i++) {
                scenes[i] = new Parallax(parallaxWrappers[i]);
            }
        };
    }();
  • URL: /components/raw/parallax-wrapper/parallax-wrapper.js
  • Filesystem Path: src/02-molecules/parallax-wrapper/parallax-wrapper.js
  • Size: 513 Bytes

Place any element inside of this element to apply parallax effect to it. List of available data-attributes can be found at https://github.com/wagerfield/parallax