2

Hi guys I am working on image animation effect based on appropriate content to its right. I have a two column layout where the left column holds an images and the right have its copy. Each image has its own copy on its right. When user scrolls the document and reaches every section of the copy the image in the left has to change accordingly. Below is my code. Any help would be appreciated.

Demo

Markup

<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>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 belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,</p>
</div>
<div class="parallax__copy--solution" id="solution">
  <h2>The solution </h2>
  <p><strong>We will propose a digital solution.</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--implementation" id="implementation">
  <h2>The implementation </h2>
  <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>
</section>
</article>

Script

$(window).scroll(function() {
  var sliderCopy = $('.parallax__copy > *');
  sliderCopy.each(function() {
    var windowTop = $(window).scrollTop();
    var idValue = $(this).attr('id');
    var sectionOffset = $(this).offset();
    var sectionTop = sectionOffset.top;
    if (windowTop >= sectionTop) {
      $(".parallax__illustration .slide-in").removeClass('slide-in');
      $(".parallax__illustration div[data-slide='" + idValue + "']").addClass('slide-in');
    }
  });
});
Benjamin
  • 2,452
  • 2
  • 15
  • 30

1 Answers1

2

Based on this answer you can check if some element is visible in the screen... and change the image..

JSFiddle

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
$(window).scroll(function(){
     if (isInView($('#problem')))
   {
      $('.parallax__image').removeClass('slide-in');
      $('.problem').addClass('slide-in');
   }
   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');
   }
});

UPDATE You can use the same conditional with your updated fiddle... https://jsfiddle.net/RACCH/ckxwt8zr/

Renzo Calla
  • 6,670
  • 2
  • 18
  • 35