Saturday, 26 October 2019

Door Open And Close Using HTML, CSS, JS


Door design in js




<!DOCTYPE html>
<html>
<head>
<style>
body
{
  background-color:#f0f0f0;
}

 .container
{
            margin:0 auto;
            width:90%;
}
.perspective
{
   background: url("http://dc428.4shared.com/img/QWu4ziBq/s3/doorBorder.png");
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
            display: inline;
            float: left;
            height: 274px;
            width: 147px;
            margin: 20px;
            margin-left: 0px;
            -webkit-perspective: 450;
            border-radius: 3px;
            box-sizing: border-box;
        }
     
        .thumb
        {
            background: url("http://dc428.4shared.com/img/-vayshJ-/s3/ClassDoor.png");
            background-repeat: no-repeat;
            background-position: center center;
            width: 147px;
            height: 274px;
            position: absolute;
            box-sizing: border-box;
            border-radius: 3px;
            box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
            transition: 1s transform linear;
            transform-origin: left;
            cursor: pointer;
        }
     
        .thumbOpened
        {
            transform: rotateY(-90deg);
            transform-origin: 8px;
            transition: .5s linear;
        }

 .alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
  color: #000;

     transform-origin: left;
  transform:rotateY(180deg);
  opacity:0;
  animation-name: go;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  width:350px;
}
@keyframes go {
  100%{
    opacity:1;
    transform:rotateY(0deg);
  }
}
</style>
</head>
<body>
<script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<p class="alert">click on the door and try to click on more than one door</p>
        <div class="perspective" onclick="openDoor(this)">
            <div class="thumb">
            </div>
        </div>
        <div class="perspective" onclick="openDoor(this)">
            <div class="thumb">
            </div>
        </div>
        <div class="perspective" onclick="openDoor(this)">
            <div class="thumb">
            </div>
        </div>
        <div class="perspective" onclick="openDoor(this)">
            <div class="thumb">
            </div>
        </div>
<script>
function openDoor(field) {
            var y = $(field).find(".thumb");
            var x = y.attr("class");
            if (y.hasClass("thumbOpened")) {
                y.removeClass("thumbOpened");
            }
            else {
                $(".thumb").removeClass("thumbOpened");
                y.addClass("thumbOpened");
            }
        }
</script>
</body>
</html>

Run Code

1 comment: