smooth infinite scrolling
This commit is contained in:
liyunze
parent
1761913dbb
commit
80b541552b
4 changed files with 27 additions and 20 deletions
|
|
@ -282,6 +282,11 @@ function importStyles() {
|
|||
loadGoogleFont(styles.taskFontFamily);
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
"--gap-between-scrolls",
|
||||
`${configs.animation.gapBetweenScrolls}px` ?? "0px"
|
||||
);
|
||||
|
||||
const stylesToImport = Object.keys(styles).filter((style) => {
|
||||
return !style.includes("Background");
|
||||
});
|
||||
|
|
@ -2591,9 +2596,9 @@ async function tests() {
|
|||
`followRythonDev2`,
|
||||
`followRythonDev3`,
|
||||
`followRythonDev4`,
|
||||
`followRythonDev5`,
|
||||
`followRythonDev6`,
|
||||
`followRythonDev7`,
|
||||
// `followRythonDev5`,
|
||||
// `followRythonDev6`,
|
||||
// `followRythonDev7`,
|
||||
];
|
||||
|
||||
for (let i = 0; i < listOfStreamers.length; i++) {
|
||||
|
|
@ -2617,24 +2622,20 @@ async function checkToAnimate() {
|
|||
let taskWrapper = document.querySelector(".task-wrapper");
|
||||
let taskWrapperHeight = taskWrapper.clientHeight;
|
||||
|
||||
let secondary = document.querySelector(".secondary");
|
||||
|
||||
// scroll task wrapper up and down once
|
||||
if (taskContainerHeight > taskWrapperHeight && !scrolling) {
|
||||
if (!scrolling) {
|
||||
document.querySelector(".secondary").style.display = "flex";
|
||||
secondary.style.display = "flex";
|
||||
|
||||
let finalHeight =
|
||||
taskContainerHeight + configs.animation.gapBetweenScrolls;
|
||||
|
||||
let primaryKeyFrames = [
|
||||
let keyframes = [
|
||||
{ transform: `translateY(0)` },
|
||||
{ transform: `translateY(-${finalHeight}px)` },
|
||||
];
|
||||
|
||||
let secondaryKeyFrames = [
|
||||
{ transform: `translateY(${finalHeight}px)` },
|
||||
{ transform: `translateY(0)` },
|
||||
];
|
||||
|
||||
let scrollingSpeed = (finalHeight / scrollSpeed) * 1000;
|
||||
|
||||
let options = {
|
||||
|
|
@ -2645,11 +2646,11 @@ async function checkToAnimate() {
|
|||
|
||||
primaryAnimation = document
|
||||
.querySelector(".primary")
|
||||
.animate(primaryKeyFrames, options);
|
||||
.animate(keyframes, options);
|
||||
|
||||
secondaryAnimation = document
|
||||
.querySelector(".secondary")
|
||||
.animate(secondaryKeyFrames, options);
|
||||
.animate(keyframes, options);
|
||||
|
||||
primaryAnimation.play();
|
||||
secondaryAnimation.play();
|
||||
|
|
@ -2659,7 +2660,7 @@ async function checkToAnimate() {
|
|||
addAnimationListeners();
|
||||
}
|
||||
} else if (!scrolling) {
|
||||
document.querySelector(".secondary").style.display = "none";
|
||||
secondary.style.display = "none";
|
||||
|
||||
// cancel animations
|
||||
if (primaryAnimation) {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
--task-margin-bottom: 5px;
|
||||
--task-horizontal-padding: 5px;
|
||||
--task-vertical-padding: 5px;
|
||||
--gap-between-scrolls: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -82,7 +83,6 @@
|
|||
transition: height 0.5s ease-out;
|
||||
}
|
||||
#main-container .task-wrapper {
|
||||
animation: scrollTasks 20s linear infinite;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -96,8 +96,10 @@
|
|||
border-radius: var(--body-border-radius);
|
||||
z-index: 1;
|
||||
}
|
||||
#main-container .task-wrapper .task-container.secondary {
|
||||
margin-top: var(--gap-between-scrolls);
|
||||
}
|
||||
#main-container .task-wrapper .task-container {
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;AChBD;;ADmBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;AChBD;;ADoBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACvBD;ADyBC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC3BF;AD6BE;EACC,6BAAA;AC3BH;AD6BE;EACC,UAAA;AC3BH;AD8BE;EACC,4CAAA;AC5BH;ADgCC;EACC,gCAAA;AC9BF;ADiCC;EACC,0CAAA;EAEA,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,kBAAA;EACA,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC7CH;ADgDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;AClDJ;ADoDI;EACC,wCAAA;EACA,oCAAA;AClDL;ADqDI;EACC,mBAAA;ACnDL;ADqDK;EACC,aAAA;ACnDN;ADqDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACnDP;ADsDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACpDP;ADwDK;EACC,kCAAA;ACtDN;ADwDM;EACC,6BAAA;EACA,kCAAA;ACtDP;AD2DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AC9DN","file":"taskList.css"}
|
||||
{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;EAEA,wBAAA;ACjBD;;ADoBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;ACjBD;;ADqBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACxBD;AD0BC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC5BF;AD8BE;EACC,6BAAA;AC5BH;AD8BE;EACC,UAAA;AC5BH;AD+BE;EACC,4CAAA;AC7BH;ADiCC;EACC,gCAAA;AC/BF;ADkCC;EACC,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,sCAAA;ACvCH;AD0CE;EAEC,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC/CH;ADkDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;ACpDJ;ADsDI;EACC,wCAAA;EACA,oCAAA;ACpDL;ADuDI;EACC,mBAAA;ACrDL;ADuDK;EACC,aAAA;ACrDN;ADuDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACrDP;ADwDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACtDP;AD0DK;EACC,kCAAA;ACxDN;AD0DM;EACC,6BAAA;EACA,kCAAA;ACxDP;AD6DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AChEN","file":"taskList.css"}
|
||||
|
|
@ -55,6 +55,8 @@
|
|||
--task-margin-bottom: 5px;
|
||||
--task-horizontal-padding: 5px;
|
||||
--task-vertical-padding: 5px;
|
||||
|
||||
--gap-between-scrolls: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -114,8 +116,6 @@
|
|||
}
|
||||
|
||||
.task-wrapper {
|
||||
animation: scrollTasks 20s linear infinite;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -136,8 +136,12 @@
|
|||
|
||||
z-index: 1;
|
||||
|
||||
.task-container.secondary {
|
||||
margin-top: var(--gap-between-scrolls);
|
||||
}
|
||||
|
||||
.task-container {
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
width: inherit;
|
||||
|
||||
left: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue