Close Menu
    JavaScript

    How to create Animated Ghost Toggle using HTML CSS and JS

    Coding StellaBy Updated:No Comments5 Mins Read

    Let’s create an Animated Ghost Toggle using HTML, CSS, and JavaScript. This fun and spooky project will feature a cute ghost that appears or disappears when toggled, adding a playful animation to your web page. 👻

    We’ll use:

    • HTML to structure the toggle and ghost elements.
    • CSS to style the ghost with smooth floating and glowing animations.
    • JavaScript to handle the toggle functionality that shows or hides the ghost with a fun effect.

    Whether you’re a beginner or an experienced developer, this project is a great way to practice combining creativity with interactivity. Let’s get started and bring this friendly ghost to life! 💫

    HTML :

    This code creates a fun ghost toggle switch animation. When you toggle the switch, a ghost appears with the text “Boo!”. The HTML sets up the structure – a checkbox inside a styled switch – while the linked CSS handles the design and animation of the ghost and slider. The JavaScript file adds the interactivity, making the ghost show or hide smoothly when the switch is clicked.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Animated Ghost Toggle | @coding.stella</title>
  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"/>
  <link rel="stylesheet" href="./style.css" />
  <script src="https://public.codepenassets.com/js/prefixfree-1.0.7.min.js"></script>
</head>

<body>
  <div class="switch-container">
    <div id="boo" class="hide">Boo!</div>
    <label class="switch">
      <input id="toggle" type="checkbox" />
      <div class="slider round">
        <div><div class="ghost"/></div>
      </div>
    </label>
  </div>
  <script src="./script.js"></script>
</body>
</html>

    CSS :

    This CSS styles the animated ghost toggle. It gives the page a black background and centers the toggle switch in the middle. The switch has a slider that turns blue when toggled. The white ghost (a circle with a wave-like bottom) appears inside the slider and moves smoothly when toggled. Animations like bobble, sway, and blink make the ghost float, sway side to side, and blink, giving it a cute, ghostly motion effect.

    body {
  width: 100%;
  height: 100%;
  background: black;
}

#boo {
  color: white;
  margin-bottom: 12px;
}

#boo.hide {
  opacity: 0;
}

.switch-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #459def;
}

input:focus + .slider {
  box-shadow: 0 0 1px #459def;
}

input:checked + .slider > div {
  transform: translateX(65px);
}

input + .slider > div {
  transition: transform 0.4s;
}

.slider.round {
  border-radius: 34px;
}

.ghost {
  position: absolute;
  left: 0;
  top: -10px;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 100px;
  animation: bobble 4.3s infinite;
  filter: drop-shadow(0px 5px 12px rgba(255, 255, 255, 0.6));
}

@keyframes bobble {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes sway {
  0% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(-2px);
  }
}
@keyframes sway-more {
  0% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(-4px);
  }
}
@keyframes sway-left {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes sway-left-less {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes sway-right {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes sway-right-less {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes blink {
  0% {
    top: 16px;
    height: 8px;
  }
  39% {
    top: 16px;
    height: 8px;
  }
  40% {
    top: 20px;
    height: 2px;
  }
  50% {
    top: 20px;
    height: 2px;
  }
  51% {
    top: 16px;
    height: 8px;
  }
  100% {
    top: 16px;
    height: 8px;
  }
}
.ghost:after {
  content: "";
  position: absolute;
  left: calc(50% - 7px);
  top: 16px;
  width: 10px;
  height: 8px;
  border-right: 3px solid black;
  border-left: 3px solid black;
  animation: bobble 2s infinite, sway-more 2s infinite 1s, blink 4.25s infinite;
}

/* 
input:checked + .slider .ghost:after {
  animation: sway-right 0.5s;
}


input:checked + .slider .ghost:before{
  animation: sway-right 0.5s;
}

input:not(:checked) + .slider .ghost:after {
  animation: sway-left 0.5s;
}


input:not(:checked) + .slider .ghost:before{
  animation: sway-left 0.5s;
}
 */
.ghost:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: -10%;
  width: 120%;
  height: 12px;
  border-radius: 100px;
  background-color: white;
  animation: sway 2s infinite;
}

    JavaScript:

    This JavaScript makes the “Boo!” text appear and disappear when you click the toggle switch. It listens for a click on the checkbox (#toggle) and uses a variable isClicked to track the state. When clicked, it removes the hide class (making the text visible) and adds show; clicking again does the opposite – hiding the text again. In short, it toggles the visibility of the “Boo!” text each time you flip the switch.

    document.getElementById("toggle").addEventListener("click", changeColor);

isClicked = true;

function changeColor() {
  if(isClicked){
  document.getElementById("boo").classList.remove("hide");
     document.getElementById("boo").classList.add("show");
    isClicked=false;
  } else{
  document.getElementById("boo").classList.remove("show");
     document.getElementById("boo").classList.add("hide");
    isClicked=true;
  }
}

    In conclusion, building an Animated Ghost Toggle using HTML, CSS, and JavaScript has been a fun and creative project. By combining structure, styling, and interactivity, we’ve created a charming animation that reacts to user input. Keep experimenting and adding more spooky-cute features to your projects! 👻✨

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply