JSFiddle - React, Tailwind, and code Playground
HTML
<div id="clipped-contents">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/SF_From_Marin_Highlands3.jpg/800px-SF_From_Marin_Highlands3.jpg" id="pic"/>
<div id="sub-container">
<div class="text" id="text1">
Virgin America Flight
</div>
<div class="text" id="text2">
Confirmation #GF312341
</div>
</div>
<div class="blind" id="left-blind"></div>
<div class="blind" id="right-blind"></div>
<div class="blind" id="top-blind"></div>
<div class="blind" id="bottom-blind"></div>
</div>
<button id="button">toggle</button>
CSS
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
* {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.3, 0.6, 0.1, 1.0);
-webkit-backface-visibility: hidden;
}
.text {
font-family: Roboto;
margin: 5px;
color: white;
-webkit-transition: -webkit-transform 350ms cubic-bezier(0.3, 0.6, 0.1, 1.0), opacity 200ms linear;
-webkit-transition-duration: 350ms;
}
#clipped-contents {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
z-index: 0;
}
#pic {
width: 320px;
height: 320px;
position: absolute;
top: -10px;
left: -10px;
-webkit-transition-delay: 60ms;
-webkit-transition-duration: 500ms;
}
#sub-container {
background-color: #6699FF;
width: 300px;
height: 150px;
position: absolute;
top: 150px;
padding: 10px;
-webkit-transition-delay: 20ms;
}
.blind {
width: 300px;
height: 300px;
position: absolute;
background-color: white;
z-index: 1;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.3, 0.6, 0.7, 1.0), opacity 200ms linear;
}
#left-blind{
left: -300px;
top: 0px;
}
#right-blind{
left: 300px;
top: 0px;
}
#top-blind{
left: 0px;
top: -300px;
}
#bottom-blind{
left: 0px;
top: 300px;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.3, 0.6, 0.1, 1.0), opacity 200ms linear;
}
#clipped-contents {
position: absolute;
left: 100px;
top: 20px;
}
button {
position: absolute;
top: 350px;
}
JavaScript
var clippedContents = document.getElementById("clipped-contents");
var button = document.getElementById("button");
var leftBlind = document.getElementById("left-blind");
var rightBlind = document.getElementById("right-blind");
var topBlind = document.getElementById("top-blind");
var bottomBlind = document.getElementById("bottom-blind");
var subContainer = document.getElementById("sub-container");
var pic = document.getElementById("pic");
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var isMaximized = true;
function toggle() {
if (isMaximized) {
leftBlind.style.webkitTransform = "translateX(10px)";
rightBlind.style.webkitTransform = "translateX(-10px)";
topBlind.style.webkitTransform = "translateY(10px)";
bottomBlind.style.webkitTransform = "translateY(-170px)";
subContainer.style.webkitTransform = "";
pic.style.webkitTransform = "";
text1.style.opacity = "0.4";
text2.style.opacity = "0.4";
text1.style.webkitTransform = "";
text2.style.webkitTransform = "";
} else {
leftBlind.style.webkitTransform = "";
rightBlind.style.webkitTransform ="";
topBlind.style.webkitTransform = "";
bottomBlind.style.webkitTransform = "";
subContainer.style.webkitTransform = "translateY(10px)";
pic.style.webkitTransform = "scale(1.05)";
text1.style.opacity = "0.9";
text2.style.opacity = "0.9";
text1.style.webkitTransform = "translateY(2px)";
text2.style.webkitTransform = "translateY(8px)";
}
isMaximized = !isMaximized;
document.body.offsetTop;
}
button.addEventListener("click", toggle, false);
setInterval(function() {
button.click();
}, 750);