JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/6251489/jquery.smooth-scroll.js"></script>
<div class="post">
	<div id="borders">
	<ul>
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
        <li><a href="#four">four</a></li>
        <li><a href="#five">five</a></li>
        <li><a href="#six">six</a></li>
    </ul>
    </div>
</div>

<article class="item" id="one">
    <div class="item__img">
        <div class="img-map">
            <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
        </div>
    </div>
    <div class="item__info">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
            vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
            rutrum ornare.</p>
    </div>
    
</article>


<article class="item" id="two">
    <div class="item__img">
        <div class="img-map">
            <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
        </div>
    </div>
    <div class="item__info">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
            vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed...

CSS

body {
  padding: 5rem 1.25rem;
  /* 80 20 */
}
* {
  padding: 0; 
  margin: 0;
  box-sizing: border-box;
}

.item { 
    width: 100%;
    overflow: hidden;
    margin-bottom: 5rem;
    transition: opacity 0.4s; }

.item--blurred { opacity: 0.5; }

.item__img,
 .item__info {
       width: 50%;
       float: right;
 }

.item__img {} .item__img .img-map
            {
                width: 95%;
                height: 18.750rem; /* 300 */
            }

JavaScript

var isBlurred = false;

$('#borders a').on('click', function(e) { 
    var el = $( e.target.getAttribute('href') );
    var elOffset = el.offset().top;
    var elHeight = el.height();
    var windowHeight = $(window).height();
    var offset;
    
    if (elHeight < windowHeight) {
        offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
    }
    else {
        offset = elOffset;
    }
    
    $.smoothScroll({
        speed: 700,
        offset: offset,
        
        // 'blur' elements after scrolling
        afterScroll: function() {
            // blur elements
            $('.item').not(el).addClass('item--blurred');
            
            // remember that it's blurred
            isBlurred = true;
        }
    });
    
    return false;
});

$(window).on('scroll', function() {
    // don't do anything if we're not in a blurred state
    if(!isBlurred) return;
    
    // reset everything to a non-blurry state
    $('.item').removeClass('item--blurred');
    isBlurred = false;
});