Open the doors!

Hello!
I am going to present an animation, which is one of my favourites. Let's make doors!

First, HTML is very simple. You just prepare two doors.

<div id="ldoor" class="door" onclick="opendoor()"></div>
<div id="rdoor" class="door" onclick="opendoor2()"></div>

The div element with id="ldoor" creates the left door and the one with id="rdoor" does the right one.

Next, you make them more "door-like." You write the common CSS styles for the "door" class.

.door{
    background-color: cornflowerblue;
    border: solid 2px navy;
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    overflow-x: hidden;
    cursor: pointer;
}
#ldoor{
    left: 0;
}
#rdoor{
    right: 0;
}

The left:0 puts the left door to the leftmost and the right:0 puts the right door to the rightmost. Because width is 0, the doors are not displayed at present yet.

So, finally, you display them and open the doors! However, fortunately, the JavaScript code is also very simple.

var ldoor = document.getElementById("ldoor");
var rdoor = document.getElementById("rdoor");
ldoor.style.transition = "1s";
rdoor.style.transition = "1s";

function load(){
    ldoor.style.width = "50%";
    rdoor.style.width = "50%";
}

function opendoor(){
    ldoor.style.width = "0";
    rdoor.style.width = "0";
}

function opendoor2(){
    ldoor.style.width = "30%";
    rdoor.style.width = "50%";
}

Two things I have to say are here. First, the transition is the CSS style, so you can write it inside the .door in CSS instead of writing here. In that case, transition: 1s.
Second, the load function has to be firstly called. This is done by adding onload to the body element in HTML.

<body onload="load()">

Okiedok, now, you can see that loading the page the doors close, clicking the left door the doors open and clicking the right door the left door open some.
Very cool, so give it a shot and safe journey!

Blog

safejourney-art

Join Our Newsletter. No Spam, Only the good stuff.

Related