JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div id="mainwrapper">

  <header>Lorem ipsum</header>

  <section>
    <div class="content">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum expedita dicta, minus ullam, ipsam nihil voluptatibus eius doloremque modi odio voluptatem autem alias explicabo debitis et ducimus sequi. Voluptatem, doloribus.</p>
    </div>
    <div class="plate plate1"></div>
    <div class="plate plate2"></div>
  </section>

  <section>
    <div class="content">
      <h2>Section 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum expedita dicta, minus ullam, ipsam nihil voluptatibus eius doloremque modi odio voluptatem autem alias explicabo debitis et ducimus sequi. Voluptatem, doloribus.</p>
    </div>
    <div class="plate plate1"></div>
    <div class="plate plate2"></div>
  </section>

  <footer>Lorem ipsum</footer>
  
</div>

CSS

body { margin: 0; background: #fff;}
#mainwrapper { position:relative; overflow:hidden; width:100%; background:#fff;}

header, footer, section { margin: 0 auto; width: 250px; text-align: center;}
header, footer { min-height: 600px;}
section { position: relative; margin-bottom: 40px; border: 1px solid #ddd;}
section .content { position: relative; z-index: 2; min-height: 300px;}

.plate { position: absolute; background: no-repeat center center; background-size: contain; border-radius: 50%;}

.plate1 { left: -1000px; top: 30%; margin-top: -70px; width: 140px; height: 140px;}
.plate2 { right: -1000px; top: 55%; margin-top: -55px; width: 110px; height: 110px;}

.plate1 { background-image: url(http://us.imenu4u.com/RestoWeb/FileRendererServlet?fileName=43_Chicken%20Kabob%20Plate.jpg);}
.plate2 { background-image: url(http://static.wixstatic.com/media/8ad92d_de60578272d54bf4ad82050852125868~mv2.jpg_256);}

/* ========================================= */
body:before { content: ''; position: fixed; left: 0; top: 50%; z-index:5; width: 100%; height: 2px; border: 1px solid red; opacity: 0.3;}
.plate:before { content: ''; position: absolute; left: -50px; right: -50px; top: 50%; height: 4px; background: green;}
/* ========================================= */
section .content {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.8) 90%, transparent 100%);
}

JavaScript

var $plates = $('.plate1, .plate2');
var top, scroll, x, style;
$(window).on('scroll', function(){
  $plates.each(function(){
  	top = elementCenter($(this));
    scroll = scrollCenter();
    x = scroll <= top ? top - scroll : scroll - top;
    x = (x / top * 1000) + 50;
    style = $(this).is('.plate1') ? 'left' : 'right';
  	$(this).css(style, -x + 'px'); 
  });
});

function elementCenter($e){
	return $e.offset().top + $e.outerHeight() / 2;
}
function scrollCenter(){
	return $(window).scrollTop() + $(window).innerHeight() / 2;
}