VantaJS destroy

by playdohsniffer

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<!-- This is the page header with an orange border -->
<div class="header">
  <span><label for="button1">VantaJS effect is</label> <input checked type="checkbox" id="button1" data-toggle="toggle" data-size="sm" data-onstyle="success" data-offstyle="danger"> </span>
  <button class="btn btn-outline-danger btn-sm button-space" id="button2" type="button">Hide/show the Vanta div (click repeatedly) </button>
  <button class="btn btn-outline-primary btn-sm button-space" id="button3" type="button">Remove the Vanta div (page reload needed afterwards)</button>
</div>

<!-- This is div where the VantaJS effect is rendered into -->
<div id="vantajs-bg">
  <div class="container">
   ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto');

$gray: #777777;
$black: #070707;
$green: #7ED386;
$red: #D37E86;
$aqua: #3FB6A8;
$white: #FFFFFF;
$onyx: #373449;

$nunito: 'Nunito Sans',
sans-serif;
$montserrat: 'Montserrat',
sans-serif;
$roboto: 'Roboto',
sans-serif;

* {
  padding: 0;
  margin: 0;
}

// Background
#vantajs-bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

//Other stuffs that makes it look nice :p
.button-space {
  margin: 3px;
}

.header {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 5px orange;
  padding: 10px;
  //background-color: lightgrey;
  }

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

  h2 {
    font-size: 4em;
    font-family: $montserrat;
    color: $white;
    text-shadow: 1px 1px $red;
  }

  p {
    font-size: 1.5em;
    font-family: $nunito;
    color: $white;
    text-shadow: 1px 1px $black;
    margin-bottom: 0.5rem;
  }

  select {
    width: 200px;
  }
}

footer {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  right: 5px;
  text-align: right;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: $roboto;
  color: $white;
  padding: 0.5rem;

  p {
    border: none;
    padding: 0;

    strong {
      font-size: 2em;
      text-decoration: none;

      &:hover {
        color: darken($red, 5%);
        transition: all .4s ease-in-out;
        font-weight: 1500;
        font-size: 2em;
        cursor: pointer;
      }
    }
  }

  a {
    color: #ffffff;
    text-decoration: none;
    transition: all .4s ease-in-out;

    &:hover {
      color: $red;
      font-weight: 900;
      font-size: 1.1em;
    }
  }
}

JavaScript

// set array of Vanta effects
var bgEffects = {
  "0": VANTA.BIRDS,
  "1": VANTA.CLOUDS,
  "2": VANTA.CLOUDS2,
  "3": VANTA.FOG,
  "4": VANTA.WAVES,
  "5": VANTA.DOTS,
  "6": VANTA.HALO
}

// DOM event listener for dropdown selector
document.getElementById("effect").addEventListener("change", () => runFunction());

// DOM event listener for disable button
// Bootstrap checkboxes require using jQuery to select 
$("#button1").change(function() {
  disableFunction();
});

// DOM event listener for hide button
document.getElementById("button2").addEventListener("click", () => hideFunction());

// DOM event listener for remove button
document.getElementById("button3").addEventListener("click", () => removeFunction());

// Function to initialize the Vanta background
function runFunction() {
  const effectID = document.getElementById("effect").value;
  bgEffects[effectID]({
    //el: document.getElementById("vantajs-bg"),
    el: '#vantajs-bg',
    mouseControls: true,
    touchControls: true,
    gyroControls: true,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00
  });
}
runFunction(); // fire function on page load

// function to destroy the Vanta effect
function disableFunction() {
  const effectID = document.getElementById("effect").value;
  bgEffects[effectID]('#vantajs-bg').destroy()
  //VANTA.HALO('#vantajs-bg').destroy()     // This doesn't work either
  console.log(`Vanta effect destroyed`)
}

// function to hide the Vanta background
// This is undesirable, since it hides the entire contents of the div 
function hideFunction() {
  var x = document.getElementById("vantajs-bg");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

// function to remove the Vanta background
// This is undesirable, since it hides the entire contents of the div 
function removeFunction() {
  var y = document.getElementById("vantajs-bg");
  y.remove();
}