I am currently attempting to rotate a fixed image in synchronization with fullpage.js, and for the most part, it is functioning correctly.
To avoid undesired rotation, I need to stack CSS rotate() values.
The stacking works as intended when scrolling down (e.g., 180, 360, 540, etc.), but it does not work when scrolling up.
Despite trying alerts to check if the calculation is correct, the issue seems to arise from the code related to scrolling up not being displayed in the HTML document.
Below is a snippet of my code:
var rotation = 0,
rotationInc = 180,
miniLogo = $('#mini-logo');
$(document).ready(function () {
$('#home').fullpage({
verticalCentered: false,
scrollingSpeed: 300,
onLeave: function (index, nextIndex, direction) {
if (direction == 'down') {
rotation += rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg)'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
if (direction == 'up') {
rotation -= rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg);'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
}
});
});
The first "if" statement operates perfectly, while the second one triggers the desired alert but fails to display the reduced degree on the HTML page.
Any assistance in resolving this issue would be greatly appreciated, as I suspect it may be due to a beginner's error.