JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="div1">PLAYFUL</div>
<div id="div2">PROVOCATIVE</div>

CSS

body {
    overflow: hidden;
} 
#div1 {
    position:relative;
    float: left;
    height:100px;
    width:100px;
}
 #div2 {
    position:relative;
    float: right;   
    height:100px;
    width:200px;
}

JavaScript

var $window = $(window),
    WIDTH = windowDimensions().width,
    HEIGHT = windowDimensions().height,
    INTERVAL = 3000,
    $div1 = $('#div1'),
    $div2 = $('#div2'),
    div1W = $div1.css('width'),
    div2W = $div2.css('width'),
    trigger = false;

$div1.css({
    'margin-left' : -($div1.width()) + 'px',
    'opacity' : 0,
});
$div2.css({
    'margin-right' : (WIDTH / 3) + 'px',
    'opacity': 1
});

/* on window resize */
$window.resize(function() {
    WIDTH = windowDimensions().width,
    HEIGHT = windowDimensions().height;
});
 
/* returns window dimension */
function windowDimensions() {
    return {
        width: $window.width(),
        height: $window.height()
    };
}

/* show/hide elements */
var animate = setInterval(function() {
    if(trigger) {
        $div1.animate({
            'margin-left' : '-' + div1W,
            'opacity' : 0,
        }, INTERVAL / 2);
        
        $div2.animate({
            'margin-right' : (WIDTH / 3) + 'px',
            'opacity' : 1,
        }, INTERVAL / 2);
        
    } else {
        $div1.animate({
            'margin-left' : (WIDTH / 3) + 'px',
            'opacity' : 1,
        }, INTERVAL / 2);
        
        $div2.animate({
            'margin-right' : '-' + div2W,
            'opacity' : 0,
        }, INTERVAL / 2);
        
    }
    
    trigger = !trigger;
    
    console.log('woot');
}, INTERVAL);