<div class="container">
  <section class="section section--1">
    <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod deleniti quidem neque pariatur aspernatur eaque quis aliquam alias modi eos expedita, facilis placeat consequuntur in deserunt nulla voluptatum excepturi quos?</div>
    <img src="https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="" class="image">
  </section>

  <section class="section section--2">
    <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut fuga at id iure eaque laboriosam. Omnis inventore obcaecati fugit ducimus. Veritatis dolorum consequuntur, nulla, voluptas sequi molestias dolor quam ad alias, enim repellat recusandae adipisci dicta ea. Nobis dicta animi quia provident molestias magnam nulla vero aperiam non repudiandae. Quisquam.</div>
    <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="" class="image">
  </section>

  <section class="section section--3">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro autem dolore odit, quo culpa tempora, quam magnam, architecto animi in voluptatum. Iusto a sapiente perspiciatis ea minus ex aliquam tempore. Sint, ipsam explicabo quae esse aperiam recusandae vitae expedita nemo itaque assumenda ut, dolorum quod soluta ipsum a praesentium iusto illo nulla. Modi exercitationem neque magni laborum eaque officiis quod.</div>
    <img src="https://images.unsplash.com/photo-1489084917528-a57e68a79a1e?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" class="image">
  </section>

  <section class="section section--4">
    <div class="text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil dolores natus pariatur debitis velit similique in, modi dicta quas explicabo facere ipsa ipsam. Corrupti doloribus tempore consequuntur voluptatem esse? Magnam non neque a fugit, error tempore modi ipsum aliquam ipsa?</div>
    <img src="https://images.unsplash.com/photo-1484329685472-7be8fb281ce2?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" class="image">
  </section>

  <section class="section section--5">
    <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod deleniti quidem neque pariatur aspernatur eaque quis aliquam alias modi eos expedita, facilis placeat consequuntur in deserunt nulla voluptatum excepturi quos?</div>
    <img src="https://images.unsplash.com/photo-1501474466180-4704b8607ba5?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="" class="image">
  </section>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 25vh 0;
  background-color: #9e9e9e;
}

.container {
  width: 85%;
  margin: 0 auto;
}

.section {
  min-height: 50vh;
  background-color: #4caf50;
  color: #fff;
  padding: 25px;
  display: flex;
  align-items: center;
}

.section:nth-child(odd) {
  background-color: #3f51b5;
  flex-direction: row-reverse;
}

.section:nth-child(odd) .text {
  padding-left: 15px;
}

.text {
  width: 50%;
  padding-right: 15px;
}

.image {
  width: 50%;
}
const controller = new ScrollMagic.Controller();
const sections = [...document.querySelectorAll(".section")];

const smap = new Map();

sections.forEach((section) => {
  smap.set(section, section.querySelector(".image"));

  const scene = new ScrollMagic.Scene({
    triggerElement: section,
    duration: () => section.offsetHeight
  })
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);

  scene.on("progress", update);
  scene.progress(0);
});

function update(e) {
  const t = -(e.progress - 0.5) * 2;
  const section = e.target.triggerElement();
  const image = smap.get(section);

  if (image) {
    image.style.transform = `translateY(${100 * t}px)`;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js