JSFiddle - React, Tailwind, and code Playground

by samselikoff

HTML

<section class="product" id="first" data-speed="10">
    <div>
         <h1>Miaooooooowww</h1>

    </div>
</section>
<section class="product" id="second" data-speed="10">
    <div>
         <h1>Anotherrrr</h1>

    </div>
</section>

CSS

.wrapper {
    position: relative;
}
.product {
    width: 100%;
    height: 400px;
    -webkit-transform: skewY(5deg);
    background-attachment: fixed !important;
    background-position: 50% 0;
    background-size: auto 150%;
    background-repeat: no-repeat;
    padding-bottom: 16em;
    text-align: left;
    position: relative;
    z-index: 0;
}
.product div {
    -webkit-transform: skewY(-5deg);
}
h1 {
    color: white;
}

#first {
        background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg');
}

#second {
            background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg');
}

JavaScript

$(document).ready(function () {

    var $window = $(window);
    $window.scroll(function () {

        $('section').each(function () {
            var $this = $(this),
                yPos = -(($window.scrollTop() - $this.offset().top) / $this.data('speed')),
                coords = '50% ' + yPos + 'px';
            $this.css({
                backgroundPosition: coords
            });
        });
    });

});