Maya's Sliding Door

Testing sliding effect

by dpnminh

HTML

<div class="container" id="container">
<div class="sliding-door">
<div class="door-left">
  <img src="https://s3-us-west-2.amazonaws.com/mayashavin.com/css/img/logo-maya-2.png"/>
</div>
<div class="door-right">
  <img src="https://s3-us-west-2.amazonaws.com/mayashavin.com/css/img/logo-maya-2.png"/>
</div>
		<!-- Content goes here -->
    <div class="content">
      <h3>
       Welcome to Maya's test     
      </h3>
    </div>
	</div>
</div>

CSS

body{
  background: pink no-repeat top left fixed !important;
}
.container {
	position: relative;
	overflow: hidden;
  height: 500px;
  width: 100%;
}

.door-left, .door-right {
	position: absolute;
	height: 100%;
	width: 50%;
	top: 0%;
	transition: all ease 0.4s;
	-moz-transition: all ease 0.4s;
	-webkit-transition: all ease 0.4s;
	-o-transition: all ease 0.4s;
	-ms-transition: all ease 0.4s;
}
.door-left {
	left: 0%;
	background-color: pink;
  background-position: top left;
}
.content{
  background-color: white;
  height: 500px;
  display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: rgb(53, 166, 92);
}
.door-right {
	left: 50%;
  background-color: pink;
  background-position: top right;
}
.container.hover .door-left{
	left: -50%;
}
.container.hover .door-right{
	left: 100%;
}

.door-left img{
  width: 60%;
  bottom: 35%;
  position: absolute;
  right: -30%;
  //clip: rect(0, 82px, 167px, 0);
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.door-right img{
  width: 60%;
bottom: 35%;
position: absolute;
left: -30%;
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
//clip: rect(0, 167px, 167px, 82px);
}
.container.hover .door-left img{
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.container.hover .door-right img{
	clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

img{
  background-color: transparent;
}

JavaScript

var element = document.getElementById('container');

element.addEventListener('click', function(){
	if (this.classList.contains('hover')){
  	this.classList.remove('hover');
  }
  else{
  	this.classList.add('hover');
  }
})