135 lines
4.3 KiB
TypeScript
135 lines
4.3 KiB
TypeScript
// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
|
|
|
|
function getSize(curbID: number, yValue: number): number{
|
|
let factor = 2/5; // difference between each curve
|
|
return (-Math.abs(yValue - curbID*factor)+1)/2 + Math.abs((-Math.abs(yValue - curbID*factor)+1)/2)
|
|
}
|
|
|
|
function setupPage(){
|
|
let elements = document.getElementsByClassName("container");
|
|
for (let i = 0; i<elements.length; i++){
|
|
elements[i].id = "card" + i;
|
|
}
|
|
}
|
|
|
|
function changeWidth()
|
|
{
|
|
// Variables
|
|
let speedFactor = 1/6;
|
|
let nb_div = document.getElementsByClassName("container").length;
|
|
let offset = 2.5/speedFactor; // this is the number of false data-points added at the end
|
|
|
|
// Elements
|
|
let timeLineElm = document.getElementById("timeline");
|
|
let startTimeElm = document.getElementById("startTime");
|
|
let spacer1 = document.getElementById("spacer1");
|
|
let projetPerso = document.getElementById("projetPerso");
|
|
|
|
|
|
// Positions
|
|
let startTimeBoxSize = startTimeElm.getBoundingClientRect()
|
|
let ymin = startTimeBoxSize.top + window.scrollY;
|
|
let ymax = document.getElementById(`card${nb_div-1}`).getBoundingClientRect().bottom + window.scrollY;
|
|
|
|
|
|
// todo: change the height of the timeline to value depending on the screen size
|
|
timeLineElm.style.height = `${nb_div*50}px`;
|
|
|
|
// get each maximum card size
|
|
let cardSizes: number[] = []
|
|
for (let i = 0; i<nb_div; i++){
|
|
let cardElem = document.getElementById("card"+i);
|
|
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
|
cardSizes.push(cardSize);
|
|
}
|
|
|
|
|
|
// Initial scaling of all cards
|
|
for (let i = 0; i<nb_div; i++){
|
|
let cardElem = document.getElementById("card"+i);
|
|
let s = getSize(i, 0);
|
|
cardElem.style.transform = `scale(${s})`
|
|
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
|
cardElem.style.height = `${cardSizes[i] * s}px`
|
|
}
|
|
|
|
// action to take whenever we go above the timeline or under
|
|
function all(){
|
|
startTimeElm.style.position = "relative";
|
|
timeLineElm.style.position = "relative";
|
|
startTimeElm.style.top = ""
|
|
timeLineElm.style.top = ""
|
|
projetPerso.style.top = ""
|
|
projetPerso.style.position = "relative";
|
|
|
|
}
|
|
// action to take whenever we go above the timeline
|
|
function backToTop(){
|
|
spacer1.style.height="0px";
|
|
}
|
|
// action to take whenever we go under the timeline
|
|
function under() {
|
|
if(spacer1.style.height.replace("px", "") < "100"){
|
|
spacer1.style.height = - spacer1.getBoundingClientRect().bottom + "px";
|
|
}
|
|
|
|
}
|
|
|
|
function changeWidthParam(){
|
|
let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div
|
|
if (window.scrollY > ymin && scrollVal < nb_div + offset){
|
|
if (timeLineElm.style.position !== "fixed"){ // apply once
|
|
|
|
startTimeElm.style.position = "fixed"
|
|
startTimeElm.style.right = "0%";
|
|
startTimeElm.style.left = "0%";
|
|
startTimeElm.style.top = 0 + "px";
|
|
|
|
timeLineElm.style.position = "fixed";
|
|
timeLineElm.style.right = "0%";
|
|
timeLineElm.style.left = "0%";
|
|
timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
|
|
|
|
projetPerso.style.position = "fixed";
|
|
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'
|
|
projetPerso.style.right = "0%";
|
|
projetPerso.style.left = "0%";
|
|
|
|
}
|
|
|
|
|
|
for (let i = 0; i<nb_div; i++){
|
|
let cardElem = document.getElementById("card"+i);
|
|
let s = getSize(i, scrollVal*speedFactor);
|
|
|
|
cardElem.style.display = s<0.01 ? "none" : ""
|
|
cardElem.style.transform = `scale(${s})`
|
|
cardElem.style.height = `${cardSizes[i] * s}px`
|
|
|
|
}
|
|
}
|
|
else {
|
|
all();
|
|
if (scrollVal < 2){
|
|
backToTop();
|
|
}
|
|
else {
|
|
under();
|
|
}
|
|
|
|
}
|
|
}
|
|
return changeWidthParam;
|
|
}
|
|
|
|
setupPage();
|
|
let f = changeWidth();
|
|
|
|
|
|
window.addEventListener('scroll', function()
|
|
{
|
|
requestAnimationFrame(f);
|
|
}, false);
|
|
|
|
|