溢出：隐藏不在Firefox上工作

时间：2017-09-01 13:44:49

标签： jquery html css fullpage.js parallax.js

我正在使用fullPage JS插件和parallax JS插件。有一个动画，其中包括圆形扩展和视差。我需要隐藏圈子并使用overflow:hidden来隐藏其他部分的扩展。溢出隐藏在chrome和safari上完美运行，但不适用于Firefox。

我曾尝试阅读有关Stack Overflow的很多问题，这些问题也存在类似问题，我尝试了所有解决方案，但没有一个能够解决问题。

链接到网页：https://rimildeyjsr.github.io/spotify-circle-animation

我正在为一个部分添加代码，如果这样可行，我也可以在其他部分使用它 - 所有部分的代码都类似。

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

$(document).ready(function() {
    const scene = document.getElementById('fullpage');
    const parallax = new Parallax(scene, {
        invertX: true,
        invertY: true,
        limitX: 35,
        limitY: 35
    });

    $('#fullpage').fullpage({

        anchors: ['home', 'about', 'projects', 'contact'],

        fixedElements: '#toggle,#overlay',

        afterLoad: function(anchorLink, index) {

            if (index === 1 || anchorLink === 'home') {
                callMakeDiv('#1f3264', 1);
            } else if (index === 2 || anchorLink === 'about') {
                $('#section2 h1').addClass('come-in').one(animationEnd, function() {
                    $('#section2 h3').addClass('come-in').one(animationEnd, function() {
                        $('#section2 p').addClass('come-in');
                    });
                });
                callMakeDiv('#f573a0', 2);
            } else if (index === 3 || anchorLink === 'projects') {
                callMakeDiv('#1f3264', 3);
            } else if (index === 4 || anchorLink === 'contact') {
                $('.left').addClass('animateRightSlide');
                $('.right-large').addClass('animateLeftSlide');
                callMakeDiv('#f573a0', 4);
            }
        }
    });

    $("#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 circleInfo = [
        //section 1
        {
            left: 12.54,
            top: 0.2,
            factor: 3.25,
            layer: '#circle-wrapper-2-1'
        }, {
            left: 0.1,
            top: 0,
            factor: 1.405,
            layer: '#circle-wrapper-3-1'
        }, {
            left: 23.14,
            top: 69.34,
            factor: 1.20,
            layer: '#circle-wrapper-3-1'
        }, {
            left: 92.78,
            top: 20.08,
            factor: 1,
            layer: '#circle-wrapper-1-1'
        }, {
            left: 75,
            top: 42.08,
            factor: 0.65,
            layer: '#circle-wrapper-3-1'
        }, {
            left: 66.28,
            top: 88.7,
            factor: 0.9,
            layer: '#circle-wrapper-1-1'
        }, {
            left: 1.38,
            top: 85.75,
            factor: 1.2,
            layer: '#circle-wrapper-1-1'
        },
        //section 2
        {
            left: 12.54,
            top: -13.8,
            factor: 3.1,
            layer: '#circle-wrapper-2-2'
        }, {
            left: 0.1,
            top: 0,
            factor: 1.405,
            layer: '#circle-wrapper-3-2'
        }, {
            left: 8.14,
            top: 58.34,
            factor: 0.75,
            layer: '#circle-wrapper-3-2'
        }, {
            left: 91.78,
            top: 0.08,
            factor: 1.1,
            layer: '#circle-wrapper-1-2'
        }, {
            left: 66,
            top: 28.08,
            factor: 0.9,
            layer: '#circle-wrapper-3-2'
        }, {
            left: 71.28,
            top: 60.7,
            factor: 2.4,
            layer: '#circle-wrapper-1-2'
        }, {
            left: -0.62,
            top: 78.75,
            factor: 1.5,
            layer: '#circle-wrapper-1-2'
        },
        //section 3
        {
            left: 44.54,
            top: -5.8,
            factor: 3.25,
            layer: '#circle-wrapper-2-3'
        }, {
            left: -1.46,
            top: 0.2,
            factor: 1.6,
            layer: '#circle-wrapper-1-3'
        }, {
            left: 18.14,
            top: 52.34,
            factor: 1.15,
            layer: '#circle-wrapper-1-3'
        }, {
            left: 84.78,
            top: 20.08,
            factor: 1.1,
            layer: '#circle-wrapper-3-3'
        }, {
            left: 75,
            top: 42.08,
            factor: 0.65,
            layer: '#circle-wrapper-3-3'
        }, {
            left: 78.28,
            top: 59.7,
            factor: 1.2,
            layer: '#circle-wrapper-3-3'
        }, {
            left: -0.62,
            top: 78.75,
            factor: 1.5,
            layer: '#circle-wrapper-1-3'
        },
        //section 4
        {
            left: 72.54,
            top: -13.8,
            factor: 3.25,
            layer: '#circle-wrapper-1-4'
        }, {
            left: -2.9,
            top: 3,
            factor: 1.575,
            layer: '#circle-wrapper-1-4'
        }, {
            left: 19.14,
            top: 50.34,
            factor: 1.35,
            layer: '#circle-wrapper-2-4'
        }, {
            left: 86.78,
            top: 59.08,
            factor: 0.95,
            layer: '#circle-wrapper-3-4'
        }, {
            left: 48,
            top: 39.08,
            factor: 0.6,
            layer: '#circle-wrapper-3-4'
        }, {
            left: 63.28,
            top: 70.7,
            factor: 1.05,
            layer: '#circle-wrapper-2-4'
        }, {
            left: -9.62,
            top: 64.75,
            factor: 1.25,
            layer: '#circle-wrapper-2-4'
        }

    ];


    function callMakeDiv(color, secId) {
        var flag = 0;
        var id = setInterval(function() {
            makeDiv(color, flag, secId);
            flag++;
            if (flag === 7) {
                clearInterval(id);
            }
        }, 2000);
    }

    function makeDiv(color, index, secId) {
        $newdiv = $('<div/>').addClass('initial-div').css({
            'background-color': color,
            'width': (200 * circleInfo[index + (7 * (secId - 1))].factor) + "px",
            'height': (200 * circleInfo[index + (7 * (secId - 1))].factor) + "px"
        });

        $newdiv.addClass('position-div').css({
            'left': circleInfo[index + (7 * (secId - 1))].left + '%',
            'top': circleInfo[index + (7 * (secId - 1))].top + '%'
        }).appendTo(circleInfo[index + (7 * (secId - 1))].layer).addClass('animate');
    }

});
.initial-div {
    transform: scale(0);
}

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

@-moz-document url-prefix() {
    .section {
        overflow-x: hidden;
        overflow-y: hidden;
        width: 100%;
        height: 100vh;
    }
}

.section {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.container-2, .container-3 {
    position: relative;
    z-index: 50;
    top: 0 !important;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
}

.animate {
    -webkit-animation: expand 20s ease-out;
    display:block;
    transform:scale(1);
}

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

    100%{
        -webkit-transform: scale(1,1);
    }
}

#circle-wrapper-1-1,
#circle-wrapper-2-1,
#circle-wrapper-3-1,
#circle-wrapper-1-2,
#circle-wrapper-2-2,
#circle-wrapper-3-2,
#circle-wrapper-1-3,
#circle-wrapper-2-3,
#circle-wrapper-3-3,
#circle-wrapper-1-4,
#circle-wrapper-2-4,
#circle-wrapper-3-4
{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#circle-wrapper-1-1,
#circle-wrapper-1-2,
#circle-wrapper-1-3,
#circle-wrapper-1-4
{
    z-index: 15;
}

#circle-wrapper-2-1,
#circle-wrapper-2-2,
#circle-wrapper-2-3,
#circle-wrapper-2-4{
    z-index: 10;
}

#circle-wrapper-3-1,
#circle-wrapper-3-2,
#circle-wrapper-3-3,
#circle-wrapper-3-4{
    z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/parallax-js@3.0.0/dist/parallax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@2.9.4/dist/jquery.fullpage.min.js"></script>
<div class="section" id="section2">
    <div class="layer container-2" data-depth="0.8">
        <h1>I'm Prateek</h1>
        <h3>Android Developer <br> & Design Consultant</h3>
        <p>I have been working on Android since the past
        <br> 3 years. I am a tech enthusiast and I like solving<br> problems which affect people’s lives, using
        <br>my skills. In my free time I blog about my,<br> learnings or design beautiful things.<br>Scroll along to check out my work. </p>
    </div>
    <div class="layer" id="circle-wrapper-1-2" data-depth="0.6"></div>
    <div class="layer" id="circle-wrapper-2-2" data-depth="0.5"></div>
    <div class="layer" id="circle-wrapper-3-2" data-depth="0.4"></div>
</div>

1 个答案:

答案 0 :(得分：1)

将显示表更改为.section

上的显示块

这可能与浏览器如何插入显示表的w3c规范有关。当你想要一个div作为一个表时，我建议使用display table。

相关问题
最新问题