fullpage.js

Question

我有一个网站，上面有不断扩大的圆圈和文字。该网站运行良好，直到我添加了 jquery fullpage.js 插件。现在，不断扩大的圆圈出现在文本之上并将其完全覆盖。我试过给文本更高的 z-index 并尝试使用 absolute 和 relative 定位，但似乎没有任何效果。谁能帮我解决这个问题？

link 到网站：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);
        });

Link 到 github 存储库：https://github.com/rimildeyjsr/spotify-circle-animation

Answer 1

你好在你的文件中添加这个 css 以删除应用的 CSS 转换及其工作

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

在你的情况下试试这个

#fullpage {
z-index: 2;

}

fullpage.js - 扩大的圆圈背景掩盖文字

fullpage.js - expanding circles background cover up the text

javascript

jquery