Parallax : how to keep absolute positioned images inside the relative div?

Question

I have this block:

I would like to create a parallax effect on the pictures while keeping them within (or at least close) to their parent div.

This in my code:

<div class="head-block">
    <div class="image-block-left">
      = image_tag('home/specialite-1-compressor.jpg', id: 'block-left-specialite1')
      = image_tag('home/specialite-2-compressor.jpg', id: 'block-left-specialite2')
    </div>

    <div class="content-block">
      span.badge.badge-warning.homepage-badge
        | Expertise
      .homepage-title
        h2
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      p
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis feugiat libero quis mollis. Praesent risus purus, pellentesque in risus at, posuere laoreet eros. Ut non congue erat. Pellentesque tincidunt ultrices leo vel porttitor. Fusce a ligula ut libero aliquet feugiat. Nulla facilisi. Curabitur consectetur eu quam vel blandit. In non enim quis justo malesuada volutpat.
    </div>

    <div class="image-block-right">
      = image_tag('home/specialite-3-compressor.jpg', id: 'block-left-specialite3')
      = image_tag('home/specialite-4-compressor.jpg', id: 'block-left-specialite4')
    </div>
</div>

  .head-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .image-block-left {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        width: 150px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      img:nth-child(2) {
        height: 180px;
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 1;
      }
    }
    .content-block {
      width: 65%;
      text-align: center;
    }
    .image-block-right {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
      }
      img:nth-child(2) {
        width: 130px;
        position: absolute;
        top: 155px;
        left: 0;
      }
    }
  }

I tried this code:

  function parallaxEffect() {
    let scrolled = $(window).scrollTop();
    $('#block-left-specialite1').css('top', (0 - (scrolled * .5)) + 'px');
    $('#block-left-specialite2').css('top', (100 - (scrolled * .65)) + 'px');
    $('#block-left-specialite3').css('top', (0 - (scrolled * .52)) + 'px');
    $('#block-left-specialite4').css('top', (155 - (scrolled * .67)) + 'px');
  }

but it doesn't work because the head-block div isn't at the top of the page. How can I keep the images within their parent div?

Answer 1

Finally, I achieved this by this way:

  function parallaxEffect() {
    let windowScrolled      = $(window).scrollTop();
    let sliderBlockScrolled = $('.homepage-sliderblock').offset().top;

    $('.top-block-right').css('top', (0 - (windowScrolled * .25)) + 'px');
    $('#block-left-specialite1, #block-left-specialite3').css('top', (0 - ((windowScrolled - sliderBlockScrolled) * .25)) + 'px');
    $('#block-left-specialite2, #block-left-specialite4').css('top', (100 - ((windowScrolled - sliderBlockScrolled) * .35)) + 'px');
  }

thus, when the parent div is visible, the elements are at the same level with the parallax effect.