Happy Halloween everyone! To celebrate the spookiest day of the year I prepared the CSS/jQuery Ghost animation tutorial. To create the Halloween Ghost follow the steps below.
- Add HTML
- Add CSS with the CSS Animation
- Add jQuery
*to see the live output of the animation click here.
Step1.
Add HTML
<div id="container">
<div class="ghost">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="shadow"></div>
</div>
</div>
Step2.
Add CSS
Set the colour and position of the background, and elements:
body {
background-color: #312244;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
position: relative;
z-index:10;
color: white;
font-size: 200px;
text-shadow: 2px 2px black;
}
Style the Ghost, and add an animation:
.ghost {
position: relative;
left:-100px;
top:-100px;
animation: bounce-out-down 4s ease infinite;
}
@keyframes bounce-out-down {
0% { transform: translateY(0); }
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.top {
position: absolute;
background-color: #f7ede2;
width: 109px;
height:150px;
border-radius: 50px 50px 0 0;
}
.top:after {
content:"";
position: absolute;
background-color: #272640;
width: 30px;
height: 30px;
border-radius: 50%;
top:35px;
left:25px;
}
.top:before {
content:"";
position: absolute;
background-color: #272640;
width: 30px;
height: 30px;
border-radius: 50%;
top:35px;
left:58px;
}
.middle {
position: absolute;
background-color: #f7ede2;
width: 25px;
height: 40px;
border-radius: 30px;
top:130px;
}
.middle:after {
content:"";
position: absolute;
background-color: #f7ede2;
width: 25px;
height: 40px;
border-radius: 30px;
left:28px;
top:-5px;
}
.middle:before {
content:"";
position: absolute;
background-color: #f7ede2;
width: 25px;
height: 40px;
border-radius: 30px;
left:56px;
top:-2px;
}
.bottom {
position: absolute;
background-color: #f7ede2;
width: 25px;
height: 40px;
border-radius: 30px;
top:132px;
left:84px;
}
Add the shadow with an animation:
.shadow {
background-color: #272640;
position: absolute;
width: 109px;
height:30px;
border-radius:50%;
top:200px;
left:-100px;
top:95px;
animation: bounce 4s ease infinite;
}
@keyframes bounce {
0% { transform: translateY(0); }
20% {
opacity: 1;
transform: scaleX(0.95);
}
100% {
opacity: 0;
transform: scaleX(1.1);
}
}
Step 3.
Add jQuery
*Don’t forget to add the jQuery library link in the section of your document. To see how to add jQuery to HTML document click here.
$("#container").hover(function () {
$(this).append($("<span>Boo!</span>"));
},function () {
$(this).find('span').slideUp('fast');
});
To see the live output of the animation go to lenastanley.com.
Enjoy coding!