Impossible de faire défiler et les boutons sont couverts par l'animation après l'utilisation de JavaScript

Question

Je voulais utiliser ce 3D clouds dans mon Bootstrap Header, mais après avoir utilisé le code, je ne peux plus faire défiler et aussi les boutons & texte obtiennent couverts de la animation si la souris est sur certaines positions sur l'écran.

J'ai alors désactivé toutes les fonctions qui concernent la souris, mais cela ne fonctionne toujours pas correctement.

Voici un jsfiddle de celui-ci. Si vous supprimez le commentaire html et utilisez les balises suivantes, vous utilisez JS Animation et la zone de surbrillance complète est masquée par celui-ci.

<div id="viewport" > 
    <div id="world" ></div> 
</div> 

Y at-il une possibilité de le mettre dans un conteneur ou une rangée?

Answer 1

Pour résoudre le problème de défilement, commenter/supprimer ceci:

body { 
    ... 
    overflow: hidden; 
} 

Pour résoudre le problème de superposition, attribuer un z-index à votre couche:

#viewport { 
    ... 
    z-index: -100; 
} 

Cela devrait résoudre votre problème.