first commit
This commit is contained in:
piair
112
src/js/annimateTimeLine.js
Normal file
112
src/js/annimateTimeLine.js
Normal file
@@ -0,0 +1,112 @@
|
||||
// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
|
||||
var cardSizes = [];
|
||||
window.onresize = function () {
|
||||
cardSizes = [];
|
||||
for (var i = 0; i < document.getElementsByClassName("container").length; i++) {
|
||||
var cardElem = document.getElementById("card" + i);
|
||||
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||
cardSizes.push(cardSize);
|
||||
}
|
||||
};
|
||||
function getSize(curbID, yValue) {
|
||||
var 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() {
|
||||
var elements = document.getElementsByClassName("container");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
elements[i].id = "card" + i;
|
||||
}
|
||||
}
|
||||
function changeWidth() {
|
||||
// Variables
|
||||
var speedFactor = 1 / 6;
|
||||
var nb_div = document.getElementsByClassName("container").length;
|
||||
var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end
|
||||
// Elements
|
||||
var timeLineElm = document.getElementById("timeline");
|
||||
var startTimeElm = document.getElementById("startTime");
|
||||
var spacer1 = document.getElementById("spacer1");
|
||||
var projetPerso = document.getElementById("projetPerso");
|
||||
// Positions
|
||||
var startTimeBoxSize = startTimeElm.getBoundingClientRect();
|
||||
var ymin = startTimeBoxSize.top + window.scrollY;
|
||||
var ymax = document.getElementById("card".concat(nb_div - 1)).getBoundingClientRect().bottom + window.scrollY;
|
||||
// todo: change the height of the timeline to value depending on the screen size
|
||||
timeLineElm.style.height = "".concat(nb_div * 50, "px");
|
||||
// get each maximum card size
|
||||
for (var i = 0; i < nb_div; i++) {
|
||||
var cardElem = document.getElementById("card" + i);
|
||||
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||
cardSizes.push(cardSize);
|
||||
}
|
||||
// Initial scaling of all cards
|
||||
for (var i = 0; i < nb_div; i++) {
|
||||
var cardElem = document.getElementById("card" + i);
|
||||
var s = getSize(i, 0);
|
||||
cardElem.style.transform = "scale(".concat(s, ")");
|
||||
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||
cardElem.style.height = "".concat(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() {
|
||||
var 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 (var i = 0; i < nb_div; i++) {
|
||||
var cardElem = document.getElementById("card" + i);
|
||||
var s = getSize(i, scrollVal * speedFactor); // scrollval / 4 is used to slow down the movement
|
||||
console.log("scale " + i + " : " + s);
|
||||
cardElem.style.display = s < 0.01 ? "none" : "";
|
||||
cardElem.style.transform = "scale(".concat(s, ")");
|
||||
cardElem.style.height = "".concat(cardSizes[i] * s, "px");
|
||||
}
|
||||
}
|
||||
else {
|
||||
all();
|
||||
if (scrollVal < 2) {
|
||||
backToTop();
|
||||
}
|
||||
else {
|
||||
under();
|
||||
}
|
||||
}
|
||||
}
|
||||
return changeWidthParam;
|
||||
}
|
||||
setupPage();
|
||||
var f = changeWidth();
|
||||
window.addEventListener('scroll', function () {
|
||||
requestAnimationFrame(f);
|
||||
}, false);
|
||||
134
src/js/annimateTimeLine.ts
Normal file
134
src/js/annimateTimeLine.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
// 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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user