Skip to content
Advertisement

Reappear bubbles js and css

I’m trying to solve this problem, but I’m giving up and I’m here to see if you can give me some hints.

I made this bubble effect in which when I touch each bubble it pops, but I can’t get the bubbles to reappear after a few seconds (as if they were new bubbles).

I leave the code here below:

function changeStyle1() {
  var element = document.getElementById("pop1");
  element.style.opacity = "0";
}

function changeStyle2() {
  var element = document.getElementById("pop2");
  element.style.opacity = "0";
}

function changeStyle3() {
  var element = document.getElementById("pop3");
  element.style.opacity = "0";
}

function changeStyle4() {
  var element = document.getElementById("pop4");
  element.style.opacity = "0";
}

function changeStyle5() {
  var element = document.getElementById("pop5");
  element.style.opacity = "0";
}

function changeStyle6() {
  var element = document.getElementById("pop6");
  element.style.opacity = "0";
}

function changeStyle7() {
  var element = document.getElementById("pop7");
  element.style.opacity = "0";
}

function changeStyle8() {
  var element = document.getElementById("pop8");
  element.style.opacity = "0";
}

function changeStyle9() {
  var element = document.getElementById("pop9");
  element.style.opacity = "0";
}

function changeStyle10() {
  var element = document.getElementById("pop10");
  element.style.opacity = "0";
}

function changeStyle11() {
  var element = document.getElementById("pop11");
  element.style.opacity = "0";
}
body {
  background: #000;
  color: #333;
  font: 100% Lato, Arial, Sans Serif;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* OBJECTS */

button {
  background: transparent;
  border-color: transparent;
}

.bubble {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
}

.bubble:after {
  content: '';
  position: absolute;
  top: 80px;
  left: 80px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 45px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble span {
  position: absolute;
  border-radius: 50%;
}

.bubble span:nth-child(1) {
  inset: 10px;
  border-left: 15px solid #0fb4ff;
  filter: blur(8px);
}

.bubble span:nth-child(2) {
  inset: 10px;
  border-right: 15px solid #ff4484;
  filter: blur(8px);
}

.bubble span:nth-child(3) {
  inset: 20px;
  border-top: 15px solid #ffeb3b;
  filter: blur(8px);
}

.bubble span:nth-child(4) {
  inset: 30px;
  border-left: 15px solid #ff4484;
  filter: blur(12px);
}

.bubble span:nth-child(5) {
  inset: 10px;
  border-bottom: 10px solid #fff;
  filter: blur(8px);
  transform: rotate (330deg);
}


/* ANIMATIONS */

.x1 {
  -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: -5%;
  top: 5%;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 5%;
  top: 80%;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x3 {
  -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 10%;
  top: 40%;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  transform: scale(0.7);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 20%;
  top: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x5 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 30%;
  top: 50%;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 50%;
  top: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 65%;
  top: 70%;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 80%;
  top: 10%;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x9 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 90%;
  top: 50%;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}

.x10 {
  -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 80%;
  top: 80%;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x11 {
  -webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 90%;
  top: 90%;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  transform: scale(0.7);
}


/* KEYFRAMES */

@-webkit-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@-moz-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@-webkit-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

@-moz-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}
<head>
  <title>Pure CSS Animated Bubbles</title>
</head>

<body>
  <button type="button" onclick="changeStyle()">Click Me</button>
  <div id="background-wrap">
    <button id="pop1" onclick="changeStyle1()" class="bubble x1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop2" onclick="changeStyle2()" class="bubble x2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop3" onclick="changeStyle3()" class="bubble x3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop4" onclick="changeStyle4()" class="bubble x4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop5" onclick="changeStyle5()" class="bubble x5">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop6" onclick="changeStyle6()" class="bubble x6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop7" onclick="changeStyle7()" class="bubble x7">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop8" onclick="changeStyle8()" class="bubble x8">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop9" onclick="changeStyle9()" class="bubble x9">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop10" onclick="changeStyle10()" class="bubble x10">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    <button id="pop11" onclick="changeStyle11()" class="bubble x11">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
  </div>
  </div>
</body>

Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG

Advertisement

Answer

You dont need all of those functions,just one will be enough

JS

    const changeStyleToBubble = (id) => {

      //we get the id directly from the html element,as parameter
      const element = document.getElementById(id);
      element.style.opacity = "0";
      
      //set it back to 1 after 2 seconds (2000 ms)
      setTimeout(() => {
        element.style.opacity = "1";
      }, 2000)

    }

HTML

<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement