0
Ich benutze das fullPage JS Plugin zusammen mit dem Parallax JS Plugin. Es gibt eine Animation, bei der sich die Kreise ausdehnen und die Parallaxe darauf zeigt. Ich muss die Kreise ausblenden und verwende overflow:hidden, um die Erweiterung in anderen Abschnitten auszublenden. Der Überlauf versteckt funktioniert perfekt auf Chrome und Safari, funktioniert aber nicht in Firefox.Überlauf: versteckt funktioniert nicht unter Firefox
Ich habe versucht, viele Fragen zu Stack Overflow zu lesen, die ein ähnliches Problem hatten, und ich habe alle Lösungen ausprobiert, aber keiner von ihnen hat funktioniert.
Link auf der Webseite: https://rimildeyjsr.github.io/spotify-circle-animation
I-Code für einen Abschnitt bin Befestigung, wenn das funktioniert ich bekommen kann es auch auf den anderen Abschnitten zu arbeiten - der Code ist für alle Abschnitte ähnlich.
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>
Ich kann nicht scheinen, das neu zu erstellen, welche Version von Firefox verwenden Sie? – Aplet123