JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="inner">
    <p>Phasellus nec sem in justo pellentesque facilisis. Vestibulum fringilla pede sit amet augue. Phasellus tempus. Sed fringilla mauris sit amet nibh. Pellentesque ut neque.</p>
    <p>Ut non enim eleifend felis pretium feugiat. Praesent nec nisl a purus blandit viverra. Cras id dui. Fusce commodo aliquam arcu. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo.</p>
    <p>Curabitur at lacus ac velit ornare lobortis. Morbi ac felis. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Fusce a quam. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.</p>
    <p>Cras varius. Donec sodales sagittis magna. Morbi ac felis. Pellentesque posuere. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.</p>
    <p>Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Integer tincidunt. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Quisque id mi. Cras non dolor.</p>
</div>
<div id="t1" class="transition-overlay"><span></span>

</div>

SCSS

/* CORE */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
    box-sizing: border-box;
}

html, body {
    background: #353535;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
}

p {
    margin: 0 auto 1em;
    &:last-child {
        margin-bottom: 0;
    }
}

.inner{
    max-width: 640px;
    margin: 0 auto;
    padding: 25px;
}

/* STYLES */
.transition-overlay{
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    transition: visibility 500ms, background-color 50ms;
    transition-delay: 300ms;
    background-color: rgba(255, 255, 255, 0);
    &:before,
    &:after{
        content: '';
        display: block;
        position: absolute;
        height: 100vmax;
        left: -33vmax;
        right: -33vmax;
        bottom: 0%;
        border-top: 0px solid #fff;
        border-bottom: 0px solid #fff;
        transition: transform 500ms, height 500ms, border 500ms, top 500ms, bottom 500ms;
        transition-timing-function: ease-in-out;
        transition-delay: 300ms;
        transform: rotate(-45deg);
        transform-origin: bottom center;
        z-index: 1;
    }
    &:after{
        top: 0%;
        bottom: auto;
        transform-origin: top center;
    }
    span{
        display: block;
        position: absolute;
        top: 45%;
        left: 50%;
        width: 400px;
        max-width: 90%;
        padding-top: 24.37%;
        transform: translateX(-50%) translateY(-50%);
        background-image: url(http://i.imgur.com/7OnxZ9F.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 2;
        opacity: 0;
        transition: top 300ms, opacity 300ms;
        transition-delay: 0ms;
    }
    &.active{
        visibility: visible;
        background-color: rgba(255, 255, 255, 1);
        transition: background-color 50ms;
   ...

JavaScript

/**
 * Shutter Page Transition
 */
setTimeout(function () {
    document.getElementById('t1').className += ' active';
    setTimeout(function () {
        document.getElementById('t1').className = document.getElementById('t1').className.replace(/\s?\bactive\b/g, '');
    }, 3000);
}, 1000);
setInterval(function () {
    document.getElementById('t1').className += ' active';
    setTimeout(function () {
        document.getElementById('t1').className = document.getElementById('t1').className.replace(/\s?\bactive\b/g, '');
    }, 3000);
}, 8000);