Untitled
unknown
javascript
2 years ago
2.5 kB
19
Indexable
// ====================== YOU CAN IGNORE THIS ==============
// =========================================================
// Easing function for smooth scrolling (quadratic)
Math.easeInOutQuad = function (t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};
// Smooth Scroll
function smoothScroll(targetY, duration, easingFunction) {
const startingY = window.pageYOffset;
let startTime = null;
function scrollStep(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const ease = easingFunction(progress);
window.scrollTo(0, startingY + (targetY - startingY) * ease);
if (progress < 1) {
requestAnimationFrame(scrollStep);
}
}
requestAnimationFrame(scrollStep);
}
// Example usage with easeInOutQuad
const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
// =====================================================================
// ============= THIS IS WHERE YOU START LOOKING =======================
function performScrolls() {
// Scroll 300 pixels down smoothly with cubic bezier easing in 1000 milliseconds (1 second)
smoothScroll(window.pageYOffset + 200, 1000, easeInOutQuad);
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
// add another
/*
setTimeout(() => {
smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
}, 2000);
after smoothscroll */
}, 2000); // ...
}, 2000); // ...
}, 2000); // you get the picture
}, 2000); // between 2nd and 3rd
}, 2000); // between 1st and 2nd
}
setTimeout(() => {
// Start the sequence of scrolls
performScrolls();
}, 10000); // delay after launch, to let you start recording, minimize console and etc.
Editor is loading...
Leave a Comment