Categories
CSS JQuery Web development

CSS/jQuery Ghost Animation

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.

  1. Add HTML
  2. Add CSS with the CSS Animation
  3. Add jQuery
*animation opened in the Firefox browser.
*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!