0
我正在使用fullPage JS插件以及parallax JS插件。有一個動畫，其特點是圓形擴展和它的視差。我需要隱藏圈子，並使用overflow:hidden隱藏其他部分的擴展。隱藏的溢出在Chrome和Safari瀏覽器上完美工作，但不適用於Firefox。溢出：隱藏在Firefox上不工作
我曾嘗試閱讀堆棧上的很多問題 溢出有類似的問題，我嘗試了所有的解決方案，但都沒有工作。
鏈接到網頁：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/[email protected]/dist/parallax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
我似乎無法重現這一點，你使用的是什麼版本的Firefox？ – Aplet123