Mam takie pytanie, mam strone której scrollMaxY wynosi 5680 i chcę żeby po dodaniu klasy pauza i odjęciu klasy play gdzie zmienia mi się backgroundImage zgodnie z nazwami, zostało uruchomione przewijanie, ale tak by po ponownym kliknięciu w przycisk zostało zatrzymane w miejscu w którym zostało to kliknięte później po ponownym uruchomieniu rusza od miejsca scrollY i jedzie dalej do tej pozycji to jest 5680 to koniec strony, sekcja kontakt.
Próbowałem już zastosować setInterval , setTimeout ale nie przynosi to zamierzonego efektu, działa to na zasadzie stepsów, chcę żeby było to płynne przejście. A nie przewinięcie na zasadzie skoku do punktu.
Jak się do tego zabrać? Proszę o jakąś podpowiedź.Myślałem jeszcze o keyframes aniomation-play-state? Czy sądzicie że ta opcja jest najlepszą z możliwych.
jQuery niedługo ma zniknąć z tego co słyszałem, nie wiem ile w tym prawdy, ale tak mówił znajomy i żeby z tego zrezygnować.
//Przełączanie tła w panelu kontrolnym animacji i pojawienie się strzałki do góry //przy osiągnięciu określonej pozycji scrollY od góry strony.
const player = document.getElementById("btn2");
const stopped = document.getElementById("btn3");
const play = document.querySelector(".play");
const pauza = document.querySelector(".pauza");
const stop = document.querySelector(".stop");
const ostop = document.querySelector(".ostop");
const bTT = document.querySelector("btn5")
btn2.addEventListener("click", function () {
btn2.classList.toggle("pauza");
btn2.classList.toggle("play");
btn3.classList.toggle("email");
// btn3.classList.toggle("ostop");
})
btn3.addEventListener("click", function () {
if (btn3.classList == "email") {
btn3.classList.remove("email");
btn3.classList.add("oemail");
window.scrollTo(0, document.body.scrollHeight);
}
})
document.addEventListener("scroll", function () {
// console.log(scrollY);
// console.log(scrollMaxY);
if (scrollY < 4000) {
// console.log("jestem poniżej 4000")
btn5.classList.add("cover");
}
if (scrollY > 4000) {
// console.log("jestem ponad 4000")
btn5.classList.remove("cover");
}
})
window.addEventListener("scroll", function () {})
//Powrót do góry po kliknięciu w strzałeczkę z klasą która pojawia się przy określonej pozycji
function scrollToTop(duration) {
// cancel if already on top
if (document.scrollingElement.scrollTop === 0) return;
const cosParameter = document.scrollingElement.scrollTop / 2;
let scrollCount = 0,
oldTimestamp = null;
function step(newTimestamp) {
if (oldTimestamp !== null) {
// if duration is 0 scrollCount will be Infinity
scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration;
if (scrollCount >= Math.PI) return document.scrollingElement.scrollTop = 0;
document.scrollingElement.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount);
}
oldTimestamp = newTimestamp;
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
// Sekcja controll odpowiedzialna za sterowanie
<div id="controll clearfix">
<div id="btn2" class="play" >
</div>
<div id="btn3" class="stop">
<!-- <div id="btn3" class="email"> -->
</div>
<div id="btn5" onclick="scrollToTop(2000);" class="btn5 topArrow cover">
</div>
