jQuery parallax scrolling effect plugin. Works fine on mobile devices.

McParallax is a jQuery plugin to take parallax scrolling effects run in a website.

• Demo

Getting Started

Include mcparallax.min.js in your document after including jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/mcparallax.min.js"></script>

To add parallax effect to a container add an element like this:

<div class="mcparallax" data-image-src="/path/to/image.jpg"></div>

Example:

<section>
    <div class="mcparallax" data-image-src="/assets/images/image-par-03.jpg" data-speed="2"></div>

    <div class="container container-below-navbar text-white">
        <h1 class="display-3 text-center font-title font-bold pb-2">Text title</h1>
        <h3 class="text-center font-title font-light">Text description</h3>
        <h2 class="display-4 text-center font-title font-bold pb-2">Text subtitle</h2>
    </div>
</section>

Features

Speed

Use data-speed attribute to set the speed of a .mcparallax element. The values of this parameter vary between 2 and 10 with a default value of 2.