Globe animation - Vanta JS

globe-animation-vanta-js.markdown

Globe animation - Vanta JS

Animated Globe with vantajs and threeminjs. Globe animation.

A Pen by Sachin Samal on CodePen.

License.

index.html

<div id="vantajs">
  <h1>Animated Globe - Vanta JS</h1>
</div>

script.js

VANTA.GLOBE({
  el: "#vantajs",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0x65c7f7
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.globe.min.js"></script>

style.css

#vantajs {
  width: 100%;
  height: 100vh;
}

h1 {
  color: #fff !important;
}

@media screen and (max-width: 1024px) {
  #vantajs {
  max-height: 100vh;
}
  
  h1 {
    font-size: 1.5rem;
  }
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://yandex.st/highlightjs/8.0/styles/vs.min.css" rel="stylesheet" />