JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<div class="title-project">
  — Interface Design at Prototypo
</div>
<div class="illu-project">
  <img src="http://leodurand.fr/digital/Freelance%20WEBSITE/img/prototypo/illu-prototypo.png">
</div>
<div class="content-wrapper">
  <img src="http://leodurand.fr/digital/Freelance%20WEBSITE/img/prototypo/website1.png">
  <img src="http://leodurand.fr/digital/Freelance%20WEBSITE/img/prototypo/website2.png">
</div>

CSS

body {
  height: 400vh;
  background-color:lightgrey;
}

.title-project {
  width: 100vw;
  font-family: "Maison Neue Book";
  font-size: 42pt;
  font-weight: 100;
  text-align: center;
   top: 160px;
  position: absolute;
}

.illu-project {
  width: 350px;
  top: 160px;
  right: -50px;
  position: absolute;
  z-index: 30;
}

.illu-project img {
  width: 100%;
}

.content-wrapper {
  width: calc(100% - 250px);
  margin-top: 300px;
  z-index: 40;
  position: relative;
}

.content-wrapper img {
  width: 100%;
  margin-top: 6vw;
}

.content-wrapper img:nth-child(1) {
  margin-top: 0;
}

.content-wrapper img:last-child {
  margin-top: 6vw;
  margin-bottom: 7vw;
}

JavaScript

$(window).scroll(function() {
    $('.illu-project').css({
      'top': +($(this).scrollTop() / 2 + 160) + "px"
    });
    $('.title-project').css({
      'top': +($(this).scrollTop() / 2 + 160) + "px"
    });
  });