WebMD Ignite DX Engine

Parallax 

<section class="hgm-parallax" data-bg-opacity="70" data-desktop-height="65vh">

    <section class="hgm-parallax__panel scroll" data-bg-image="https://images.unsplash.com/photo-1581388847562-d5a56eec1cfb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h2>Scrolling One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static" data-bg-hex="D4DEFE">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static One</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel scroll" data-bg-image="https://images.unsplash.com/photo-1541028114007-e33143a0a955?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h2>Scrolling Two</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static Two</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel scroll" data-bg-image="https://images.unsplash.com/photo-1470016342826-876ea880d0be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2100&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h2>Scrolling Three</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static" data-bg-hex="edf1f5">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static Three</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

</section><!-- hgm-parallax -->
 
<section class="hgm-parallax" data-bg-opacity="70" data-desktop-height="65vh">

    <section class="hgm-parallax__panel scroll"
             data-bg-image="https://images.unsplash.com/photo-1581388847562-d5a56eec1cfb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col"><h2>Scrolling One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p></div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static" data-bg-hex="D4DEFE">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static One</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel scroll"
             data-bg-image="https://images.unsplash.com/photo-1541028114007-e33143a0a955?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col"><h2>Scrolling Two</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p></div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static Two</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel scroll"
             data-bg-image="https://images.unsplash.com/photo-1470016342826-876ea880d0be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2100&q=80">
        <div class="hgm-parallax__background"></div>
        <div class="hgm-parallax__content">
            <div class="container">
                <div class="row">
                    <div class="col"><h2>Scrolling Three</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut
                            vitae lectus
                            sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium.
                            Vestibulum nunc
                            odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                            maximus
                            nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p></div>
                </div>
            </div>
        </div>
    </section><!-- &__panel -->

    <section class="hgm-parallax__panel static" data-bg-hex="edf1f5">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Static Three</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum massa odio. Ut vitae
                        lectus
                        sit amet libero suscipit pretium at egestas ex. Ut mattis tortor id mollis pretium. Vestibulum
                        nunc
                        odio, rutrum vel nisi ac, ultricies egestas erat. Suspendisse vitae semper nibh. Ut placerat
                        maximus
                        nulla. Sed quis metus sit amet est tristique vestibulum id vitae est.</p>
                </div>
            </div>

        </div>
    </section><!-- &__panel -->

</section><!-- hgm-parallax -->
 
/* No context defined. */
  • Handle: @parallax
  • Preview:
  • Filesystem Path: assets/hg-mercury-theme-engine/styleguide/02-blocks/parallax/parallax.hbs

Customizaton via Data Attributes

Use data attributes directly on the parallax component to change the visual behavior; the following data attributes are currently in use:

  • data-bg-opacity set alpha transparancy for one or more scrolling sections
  • data-bg-hex set the background hex color individually for each section
  • data-bg-image set the background image for each scrolling section
  • data-desktop-height set the desktop height for the parallax scrolling component