0
J'utilise le plugin fullPage JS avec le plugin JS parallax. Il y a une animation qui présente des cercles en expansion et la parallaxe dessus. Je dois masquer les cercles et j'utilise overflow:hidden pour masquer l'expansion sur d'autres sections. Le débordement caché fonctionne parfaitement sur chrome et safari mais ne fonctionne pas sur Firefox.débordement: caché ne fonctionne pas sur Firefox
J'ai essayé de lire beaucoup de questions sur Stack Overflow qui avait un problème similaire et j'ai essayé toutes les solutions, mais aucune d'elles n'a fonctionné.
lien vers la page Web: https://rimildeyjsr.github.io/spotify-circle-animation
Je joins le code pour une section, si cela fonctionne, je peux l'obtenir pour travailler sur les autres sections ainsi - le code est similaire pour toutes les sections.
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>
Je ne peux pas sembler recréer ceci, quelle version de Firefox utilisez-vous? – Aplet123