JSFiddle - React, Tailwind, and code Playground

by Renzo Calla

HTML

<article class="parallax">
  <section class="parallax__illustration">
    <div class="parallax__image problem slide-in" data-slide="problem"></div>
    <div class="parallax__image context" data-slide="context"></div>
    <div class="parallax__image customer" data-slide="customer"></div>
    <div class="parallax__image vision" data-slide="vision"></div>
    <div class="parallax__image solution" data-slide="solution"></div>
    <div class="parallax__image implementation" data-slide="implementation"></div>
  </section>
  <section class="parallax__copy">
    <div class="parallax__copy--problem" id="problem">
      <h2>The problem</h2>
      <p><strong>What problem are you trying to solve? It’s not always obvious! </strong></p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
    </div>
    <div class="parallax__copy--context" id="context">
      <h2>The context </h2>
      <p><strong>What is the full impact of the problem? Who does it impact and how?</strong></p>
      <p> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
    <div class="parallax__copy--customer" id="customer">
      <h2>The customer </h2>
      <p><strong>User Centred Design is at the heart of everything we do. We need to understand your customers needs as well as you do.</strong></p>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="parallax__copy--vision" id="vision">
      <h2>The vision</h2>
      <p><strong>We will understand your business's goals and ambitions.</strong></p>
      <p>Contrary to popular...

SCSS

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}

@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

.parallax {
  display: flex;
  @include e(illustration) {
    flex-basis: 40%;
    height: calc(100vh - 66px);
    border-radius: 0 rem(5) rem(5) 0;
    overflow: hidden;
    position: sticky;
    top: 66px;
  }
  @include e(image) {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    opacity: 0;
    transform: translateY(100%);
    &.slide-in {
      opacity: 1;
      transform: translateY(0);
    }
    &.problem {
      background-image: url('https://picsum.photos/id/237/200/300')
    }
    &.context {
      background-image: url('https://picsum.photos/id/239/200/300')
    }
    &.customer {
      background-image: url('https://picsum.photos/id/250/200/300')
    }
    &.vision {
      background-image: url('https://picsum.photos/id/300/200/300')
    }
    &.solution {
      background-image: url('https://picsum.photos/id/280/200/300')
    }
    &.implementation {
      background-image: url('https://picsum.photos/id/270/200/300')
    }
  }
  @include e(copy) {
    flex-basis: 60%;
    max-width: 600px;
    margin: {
      left: auto;
      right: auto;
    }
    >div {
      height: calc(100vh - 66px);
      bottom: 50%;
      transform: translateY(50%);
    }
    h2 {
      margin-bottom: rem(30);
    }
    p {
      margin-bottom: rem(10);
      line-height: line-height(34, 18);
    }
  }
}

JavaScript 1.7

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
$(window).scroll(function(){
   if (isInView($('#context')))
   {
      $('.parallax__image').removeClass('slide-in');
      $('.context').addClass('slide-in');
   }
   if (isInView($('#customer')))
   {
   		$('.parallax__image').removeClass('slide-in');
      $('.customer').addClass('slide-in');
   }
   if (isInView($('#vision')))
   {
   		$('.parallax__image').removeClass('slide-in');
      $('.vision').addClass('slide-in');
   }
   if (isInView($('#solution')))
   {
   		$('.parallax__image').removeClass('slide-in');
      $('.solution').addClass('slide-in');
   }
   if (isInView($('#implementation')))
   {
   		$('.parallax__image').removeClass('slide-in');
      $('.implementation').addClass('slide-in');
   }
});