3

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

1
  • You may like to look into the amount of CPU/GPU the animations are using, it seems quite high (so a potential battery-flatterner). You could for example set a bubble to display: none rather than set opacity when it is burst so it doesn't have to be animated until you bring it back with display: block after a certain time. Also transforms using translation can cut down on processor time compared to top and left changes.
    – A Haworth
    Aug 28, 2022 at 7:38

1 Answer 1

2

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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.