Maya's Sliding Door

Testing sliding effect

by dpnminh

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="container" id="container">
<div class="sliding-door">
<div class="door-left grey lighten-1">
     <img src="https://s3-us-west-2.amazonaws.com/mayashavin.com/css/img/rainbow.png"/>
    <h5  class="door grey-text text-lighten-5">
     When I touch comp 
    </h5>
 
</div>
<div class="door-right grey lighten-1">
  <img src="https://s3-us-west-2.amazonaws.com/mayashavin.com/css/img/rainbow.png"/>
   <h5 class="door grey-text text-lighten-5">
   uter, magic happens.
  </h5>
</div>
		<!-- Content goes here -->
    <div class="content">
      <h4>
       Welcome to Maya's test     
      </h4>
    </div>
	</div>
</div>

CSS

body{
  background: rgb(233,233,233) 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: rgb(233,233,233);
  background-position: top left;
}
.content{
  background-color: white;
  height: 500px;
  display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: rgb(53, 166, 92);
}
.door-right {
	left: 50%;
 // background-color: rgb(233,233,233);
  background-position: top right;
}
.container.hover .door-left{
	left: -50%;
}
.container.hover .door-right{
	left: 100%;
}

.door-left .door{
  position:absolute;
  bottom: 20%;
  right: 0;
}
.door-right .door{
  position:absolute;
  bottom: 20%;
  left: 0;
}

.door-left img{
  width: 60%;
  bottom: 35%;
  position: absolute;
  right: -30%;  
  clip-path: polygon(0% 0%, 51% 0%, 51% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 51% 0%, 51% 100%, 0% 100%);
}

.door-right img{
  width: 60%;
bottom: 35%;
position: absolute;
left: -30%;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.container.hover .door-left img{
  clip-path: polygon(49% 0%, 100% 0%, 100% 100%, 49% 100%);
  -webkit-clip-path: polygon(49% 0%, 100% 0%, 100% 100%, 49% 100%);
}
.container.hover .door-right img{
	clip-path: polygon(0% 0%, 51% 0%, 51% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 51% 0%, 51% 100%, 0% 100%);
}

img{
  background-color: transparent;
}

.door-right:hover, .door-left:hover{
  cursor: pointer;
}

JavaScript

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

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