JSFiddle - React, Tailwind, and code Playground
HTML
<div id="curtain"></div><a href="#" id="wall-right">Click</a>
CSS
#curtain {
width: 791px;
height: 449px;
background: url('http://upload.wikimedia.org/wikipedia/en/9/9a/Jojo_Burger_Tempest_album_cover_.jpg') no-repeat 0 0;
position: absolute;
top: 111px;
left: 265px;
z-index: 2;
overflow: hidden;
}
JavaScript
function curtain() {
if ($('#curtain').css('backgroundPositionY') === '0px') {
$('#curtain').animate({
backgroundPositionY: "-250",
backgroundPositionX: "0"
}, {
duration: 500
});
} else {
$('#curtain').animate({
backgroundPositionX: "0",
backgroundPositionY: "0"
}, {
duration: 500
});
}
}
$("#wall-right").click(function() {
$("#frame").attr('src', 'http://player.vimeo.com/video/27748543');
curtain();
return false;
});