bender parallax

by Yunus Gaziev

HTML

<img class="bender" src="https://picsum.photos/1920/400">
<img class="bender2" src="https://picsum.photos/1920/400">
    
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi eveniet quidem vel quia, qui, debitis tenetur repellat provident aliquid quos quibusdam doloremque, non! Illo expedita, consequuntur optio adipisci dolorum a dicta veniam temporibus sapiente eveniet ducimus officiis repellendus quos, ut illum corporis consequatur sed ea beatae itaque. Praesentium qui sed fugit dolor vero optio ipsa ullam recusandae similique hic accusantium, mollitia obcaecati veritatis, distinctio iste accusamus molestiae. Earum voluptas ipsa accusamus rerum quae! Mollitia neque esse earum ipsum voluptatem, nulla alias in vero accusantium. Aperiam mollitia animi, deleniti quod assumenda fuga possimus! Beatae deserunt maiores ipsam dolores ad provident. Facere voluptates perspiciatis, cupiditate quam. Consequatur illo, molestias aperiam quaerat nostrum porro ea dignissimos, assumenda nam dolor, facilis praesentium necessitatibus dolorum laborum. Adipisci, iure quo enim aut, ipsum incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi eveniet quidem vel quia, qui, debitis tenetur repellat provident aliquid quos quibusdam doloremque, non! Illo expedita, consequuntur optio adipisci dolorum a dicta veniam temporibus sapiente eveniet ducimus officiis repellendus quos, ut illum corporis consequatur sed ea beatae itaque. Praesentium qui sed fugit dolor vero optio ipsa ullam recusandae similique hic accusantium, mollitia obcaecati veritatis, distinctio iste accusamus molestiae. Earum voluptas ipsa accusamus rerum quae! Mollitia neque esse earum ipsum voluptatem, nulla alias in vero accusantium. Aperiam mollitia animi, deleniti quod assumenda fuga possimus! Beatae deserunt maiores ipsam dolores ad provident. Facere voluptates perspiciatis, cupiditate quam. Consequatur illo, molestias aperiam quaerat nostrum porro ea dignissimos,...

CSS

.bender,
.bender2 {
    width             : 100%;
    height            : auto;
    vertical-align    : top;
}

.bender {
  position: absolute;
  top: 0;
  left: 0;
   width: 100%;
  height: auto;
}

body {
  padding-top: 174px;
}

.content {
    position: relative;
    z-index: 100;
    width       : 98%;
    max-width   : 640px;
    margin      : 0 auto;
    padding     : 20px;
    font-size   : 20px;
    line-height : 24px;
    background  : #fff;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var bender = $('.bender');
var bender2 = $('.bender2');

$(window).on('scroll', function () {

		var scale = 1 - (1/100 * ((window.scrollY / 4) / (174 / 100)));

    bender.css({
      transform : 'translateY(' + window.scrollY / 1.3 + 'px) scale(' + (scale <= 0 ? 0 : scale) + ')',
    });
    
    bender2.css({
      transform : 'translateY(' + window.scrollY / 2 + 'px)'
    });

});