Parallax Uikit only

Component with parallax.

human body is the best picture of human soul

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tempus diam, vitae accumsan elit porttitor a.

The code to generate the component is this:




<style>

.jarallax {

    min-height: 300px;

}

</style>

<div class="row mt-5 mb-5">

    <div class="col-6 p-5" style="height:300px;">

        <div class="jarallax" data-speed="0.2">

            <img class="jarallax-img" src="../../dist/img/earth.jpg" alt="">

        </div>

    </div>

    <div class="col-6 p-5" style="height:300px;">

        <div class="jarallax" data-speed="1.4">

            <img class="jarallax-img" src="../../dist/img/library.jpg" alt="">

        </div>

    </div>

</div>

<div class="row mt-5 mb-5">

    <div class="col-12 p-5" style="height:470px; position: relative;">

        <div class="jarallax" data-speed="2.1" style="min-height:470px;">

            <img class="jarallax-img" src="../../dist/img/rocket.jpg" alt="">

        </div>

        <div class="text-white position-absolute text-center w-100" style="top: 0; margin-top: 235px; left: 0;">

            <h1 style="text-shadow: 1px 1px 1px #000;">human body is the best picture of human soul</h1>

            <p style="text-shadow: 1px 1px 1px #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tempus diam, vitae accumsan elit porttitor a.</p>

        </div>

    </div>

</div>

<div class="row mt-5 mb-5">

    <div class="col-6 p-5">

        <div class="jarallax" data-video-src="https://youtu.be/mru3Q5m4lkY"></div>

    </div>

    <div class="col-6 p-5">

        <div class="jarallax" data-video-src="https://vimeo.com/235212527"></div>

    </div>

</div>