fullpage.js - サークルの背景を拡大するテキストを上に覆います

Question

私はその上にサークルとテキストを拡大したウェブサイトを持っています。私はjquery fullpage.jsプラグインを追加するまで、ウェブサイトは正常に動作していました。今、拡大する円はテキストの上に来て、それを完全に覆います。私は、テキストをより高いz-indexに与えようとしましたが、それはabsoluteとrelativeとの両方で試しましたが、何も動作していないようです。誰もがこれで私を助けることができますか？ウェブサイトへ

リンク：https://rimildeyjsr.github.io/spotify-circle-animation/

HTML：

<div id="fullpage"> 
     <div class="section active" id="section1"> 
      <div class="button_container" id="toggle"> 
       <span class="top"></span> 
       <span class="middle"></span> 
       <span class="bottom"></span> 
      </div> 

      <div class="overlay" id="overlay"> 
       <nav class="overlay-menu"> 
        <ul> 
         <li ><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#projects">Projects</a></li> 
         <li><a href="#blog">Blog</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
       </nav> 
      </div> 
      <div class="main-heading"> 
       <span id="main-heading"></span> 
      </div> 
      <span id="welcome-msg">Welcome to my website</span> 
     </div> 
     <div class="section"> 

     </div> 
    </div> 

はCSS：

.initial-div { 
    width: 1000px; 
    height: 1000px; 
    transform: scale(0); 
} 

.position-div{ 
    position: absolute; 
    border-radius: 50%; 
    display: none; 
} 

.animate { 
    -webkit-animation: expand 2500s; 
} 

@-webkit-keyframes expand { 
    0%{ 
     -webkit-transform: scale(0,0); 
    } 

    100%{ 
     -webkit-transform: scale(100.0,100.0); 
     display: none; 
    } 
} 

.main-heading{ 
    text-align:left; 
    z-index: 20; 
    position: relative; 
    display: block; 
    height:228px; 
    width:644px; 
    font-family: Graphik, Roboto; 
    font-size: 10em; 
    font-weight: 600; 
    letter-spacing: 0.2px; 
    color: #ffffff; 
    top: 23%; 
    left: 8%; 
} 

#welcome-msg { 
    display: block; 
    z-index: 20; 
    position: relative; 
    text-align: left; 
    font-size: 4em; 
    font-family: Graphik,Roboto; 
    color: #ffffff; 
    height: 198px; 
    width: 1138px; 
    font-weight: 600; 
    top: 24%; 
    left: 8%; 
} 

のjQuery：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

     function makeDiv(color){ 
      var divsize = 1000; 
      //$('body').css({'background-color':bgColor}); 
      console.log(1); 
      $newdiv = $('<div/>').addClass('initial-div').css({ 
       'background-color': color 
      }); 

      var posx = (Math.random() * ($(document).width()) - (divsize/2)).toFixed(); 
      var posy = (Math.random() * ($(document).height()) - (divsize/2)).toFixed(); 

      $newdiv.addClass('position-div').css({ 
       'left':posx+'px', 
       'top':posy+'px' 
      }).appendTo('body').addClass('animate').css({'display':'block'}).one(animationEnd,function(){ 
       $(this).remove(); 
      }); 
     } 

     $(document).ready(function(){ 
      $('#fullpage').fullpage({ 
       anchors: ['home'], 
       fixedElements: '#toggle,#overlay' 
      }); 

      $("#main-heading").delay(2000).css("visibility","visible").typed({ 
       strings:["^1000Hello,","Bonjour,","Hola,","nuqneH,","Ola,","Hallo,","سلام" 
        ,"Ciao,"], 
       typeSpeed: 300, 
       loop: true, 
       showCursor: true, 
       cursorChar: "|", 
       preStringTyped: function(){ 
        $(".main-heading").css("visibility","visible"); 
       }, 
       onStringTyped: function(){ 
        $('.button-launch').addClass("animated slideInDown").css("visibility","visible") 
        ; 
       } 
      }); 

      $('#toggle').click(function() { 
       $('#toggle').toggleClass('active'); 
       $('#overlay').toggleClass('open'); 
      }); 
      $('#overlay ul li a').click(function() { 
       $('#toggle').toggleClass('active'); 
       $('#overlay').toggleClass('open'); 
      }); 


      //var arrayLength = colorArray.length; 
      var colorArray = ['#11256c','#24ccdf']; 
      var i= 0,flag=0; 
      var color = colorArray[i]; 
      setInterval(function(){ 
       flag++; 
       makeDiv(color); 
       if (flag == 15){ 
        color = colorArray[i]; 
        i++; 
        if (i == 2) { 
         i = 0; 
        } 
        flag=0; 
       } 
      },2000); 
     }); 

githubのリポジトリへのリンク：あなたのケースでは3210

Answer 1

ハロー適用除去のためにあなたのファイルで、このCSSを追加するCSS変換し、その作業

#fullpage { 
    -webkit-transform: none !important; 
    transform: none !important; 
} 

それが働いていたこの

#fullpage { 
z-index: 2; 

}