JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class='skew'>
    <div style="background: url(http://placekitten.com/400/600);" class='bg'>1st</div>
</div>
<div class='skew'>
    <div style="background: url(http://placekitten.com/401/600);" class='bg'>2nd</div>
</div>
<div class='skew'>
    <div style="background: url(http://placekitten.com/402/600);" class='bg'>3rd</div>
</div>
<div class='skew'>
    <div style="background: url(http://placekitten.com/403/600);" class='bg'>4th</div>
</div>
<div class='skew'>
    <div style="background: url(http://placekitten.com/404/600);" class='bg'>5th</div>
</div>
<div class='skew'>
    <div style="background: url(http://placekitten.com/405/600);" class='bg'>6th</div>
</div>
<br>
<br>
<br>
<br>

CSS

body {
    margin: -35px 0 0 0;
}
.skew {
    height: 400px;
    width: 400px;
    overflow: hidden;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}
.bg {
    height: 500px;
    width: 400px;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    padding-top: 35px;
}

JavaScript

$(document).on('ready scroll', function (e) {
    $('.bg').each(function (num) {
        $(this).css('margin-top', (-(num * 405) + $(window).scrollTop()) + 'px');
    });
});