here is a animation of wooden haunted house and it's scary sound of door by Learn code free online.
here is wooden house.. would you like to go inside? ring the bell icon...
here is ghost's house animation by using html, css and JS. here we are making wall, door, window and room with css only. we are using door opening and closing sound downloaded by pixabay.com see the below html code:
<body class="ghost_body">
<div class="container-fluid" style="position:relative;">
<div class="wall"></div>
<span class="bell" onclick="open_door(); playHorror();"><i class="fa fa-bell" aria-hidden="true"></i></span>
<div class="room"></div>
<div class="doorframe"></div>
<div class="door">
<audio id="horrorSound" src="https://learncodefreeonline.com/horror.mp3" preload="auto">
Your browser does not support the <code>audio</code> element.
</audio>
<audio id="horrorSoundslam" src="https://learncodefreeonline.com/slamdoor.mp3" preload="auto">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<div class="room2"></div>
<div class="windowframe"></div>
<div class="windowdoor"></div>
<!-- buttons for on/off door and sound effect -->
<div class="my-btn">
<button type="button" class="btn"
onclick='open_door();'>Open the door</button>
<button type="button" class="btn closed"
onclick='close_door();'>Close the door</button>
</div>
</body>
now we will open the door with JavaScript code, here we'll see how to add sound (audio) in css animation. see the below JS code:
<!-- to open/close door and on/off sounds-->
<script>
var stopwatch = document.querySelector('.closed');
var stopwatchSound = document.getElementById('horrorSound');
var stopwatchSoundslam = document.getElementById('horrorSoundslam');
var opendoor = document.querySelector(".door");
function open_door() {
if(opendoor.style.animation = "none"){
opendoor.style.animation = "doormovement 3.5s linear";
opendoor.style.animationFillMode = "both";
stopwatchSound.play();
}else{
stopwatchSound.pause();
stopwatchSound.currentTime = 0;
}
}
var opendoor = document.querySelector(".door");
function close_door() {
if(opendoor.style.animation = "doormovement 3.5s linear"){
opendoor.style.animation = "none";
stopwatchSound.pause();
stopwatchSound.currentTime = 0;
stopwatchSoundslam.play();
}else{
stopwatchSoundslam.pause();
stopwatchSoundslam.currentTime = 0;
}
}
</script>
here we are done with html and JS code now let's see css style. see the below CSS code. we have used here haunted house image from freepik.com Scary vector created by upklyak - www.freepik.com
.container-fluid {
position: relative;
margin: 0;
padding: 0;
width: 100vw;
height: 45vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: -1;
background-image: url("images/wooden.jpg");
background-size: contain;
}
.door {
position: absolute;
top: 5vw;
margin: 0 auto;
left: 0;
right: 0;
justify-content: center;
align-items: center;
width: 36vw;
height: 40vw;
z-index: 0;
background-size: 1em 1em;
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url("images/wooden.jpg");
background-size: cover;
transform-origin: right;
transition: transform .45s;
animation-fill-mode: forwards;
}
.doorframe {
text-align: center;
justify-content: center;
width: 36vw;
height: 40vw;
position: relative;
top: 5vw;
left: 50%;
transform: translateX(-50%);
border-left: 2.7vw inset rgb(158, 74, 0);
border-bottom: 1.4vw inset rgb(26, 12, 0);
border-top: 1.4vw inset rgb(15, 7, 0);
z-index: 3;
box-shadow: inset 0.46vw 0.46vw 2.3vw 0px rgba(0, 0, 0, 0.75);
}
.windowframe {
text-align: center;
justify-content: center;
width: 26vw;
height: 20vw;
position: absolute;
top: 5vw;
right: 2%;
transform: translateX(-2%);
border-left: 2vw inset rgb(158, 74, 0);
border-bottom: 1.4vw inset rgb(26, 12, 0);
border-top: 1.4vw inset rgb(15, 7, 0);
z-index: 3;
box-shadow: inset 0.46vw 0.46vw 2.3vw 0px rgba(0, 0, 0, 0.75);
}
.door::after {
content: '';
width: 5vw;
height: 5vw;
border-radius: 50%;
box-shadow: 0.76vw 0.76vw 0.38vw 0px rgba(0, 0, 0, 0.75);
background: radial-gradient(circle, rgba(156, 124, 106, 0.981) 0%, rgba(55, 36, 24, 0.858) 32%);
position: absolute;
top: 17vw;
left: 3vw;
z-index: 4;
}
@keyframes doormovement {
0% {}
100% {
transform: perspective(1200px) rotateY(-80deg);
}
}
.room {
position: absolute;
width: 35vw;
height: 40vw;
top: 5vw;
left: 50%;
transform: translateX(-50%);
text-align: center;
justify-content: center;
z-index: -3;
background: url("images/ghost2.jpg");
background-position: center;
background-size: cover;
}
.room2 {
position: absolute;
width: 26vw;
height: 20vw;
top: 5vw;
right: 2%;
transform: translateX(-2%);
text-align: center;
justify-content: center;
z-index: -3;
background: url("images/ghost2.jpg");
background-position: right;
background-size: 70vw;
}
.windowdoor {
width: 26vw;
height: 20vw;
position: absolute;
top: 5vw;
right: 2%;
transform: translateX(-2%);
background: repeating-radial-gradient(circle, rgba(131, 55, 5, 0.514) 40%, rgba(0, 0, 0, 1) 90%);
opacity: .5;
transform-style: preserve-3d;
background-size: 1em 1em;
clip-path: polygon(100% 0, 47% 0, 47% 13%, 48% 30%, 51% 46%, 55% 67%, 55% 89%, 50% 100%, 100% 100%);
animation: ray1 4s ease-in-out infinite;
}
@keyframes ray1 {
0% {}
50% {
clip-path: polygon(100% 0, 47% 0, 44% 17%, 43% 30%, 44% 48%, 46% 72%, 49% 92%, 50% 100%, 100% 100%);
}
100% {
clip-path: polygon(100% 0, 47% 0, 47% 13%, 48% 30%, 51% 46%, 55% 67%, 55% 89%, 50% 100%, 100% 100%);
}
}
.bell {
position: absolute;
position: absolute;
top: 5vw;
left: 20%;
transform: translateX(-30%);
}
.bell .fa {
color: rgb(255, 255, 255);
font-size: 3vw;
padding: 10px;
background-color: rgb(68, 0, 0);
}
.bell .fa:active {
color: rgb(73, 33, 4);
background-color: rgb(211, 159, 122);
}