piair/piair.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

smol update

Browse Source
This commit is contained in:
piair
2024-02-23 20:14:10 +01:00
parent c24b09a105
commit 0a8f6621fc
10 changed files with 256 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/js/annimateTimeLine.js
View File

@@ -1,16 +1,20 @@
// 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);
var offset = 2 / 5; // difference between each curve
var stableLen = 0.1;
var mainFunc = (-Math.abs(yValue - curbID * offset) + 1 + stableLen) / 2 + Math.abs((-Math.abs(yValue - curbID * offset) + 1 + stableLen) / 2);
/* basically do that :
/\
_____/ \______
*/
var secoFunc = (-Math.abs(yValue - curbID * offset) + stableLen) / 2 + Math.abs((-Math.abs(yValue - curbID * offset) + stableLen) / 2);
/* basically do that :
______/\______
so the difference do
__
______/ \______
*/
return mainFunc - secoFunc;
}
function setupPage() {
var elements = document.getElementsByClassName("container");
@@ -20,9 +24,9 @@ function setupPage() {
}
function changeWidth() {
// Variables
var speedFactor = 1 / 6;
var speedFactor = 1 / 10;
var nb_div = document.getElementsByClassName("container").length;
var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end
var offset = 3.5 / speedFactor; // this is the number of false data-points added at the end. it doesn't work well when modifying speed_factor
// Elements
var timeLineElm = document.getElementById("timeline");
var startTimeElm = document.getElementById("startTime");
@@ -32,22 +36,49 @@ function changeWidth() {
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);
var cardSizes = [];
// fill the cardSizes array with original height of each card
function calculateCardSizes() {
timeLineElm.style.height = "".concat(0.8 * window.screen.height, "px");
console.log("taille de la fenetre: " + window.screen.height);
console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = [];
for (var i = 0; i < nb_div; i++) {
var cardElem = document.getElementById("card" + i);
cardElem.style.transform = 'scale(1)';
cardElem.style.display = "";
cardElem.style.height = "";
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");
calculateCardSizes();
function scaleAllCards(scrollVal) {
console.log(timeLineElm.style.height);
var shownCardsSizes = [];
for (var i = 0; i < nb_div; i++) {
var s = getSize(i, scrollVal * speedFactor);
if (s > 0.01)
shownCardsSizes.push([cardSizes[i], s]);
}
var c = timeLineElm.style.height.replace("px", "");
// @ts-ignore
var scaleOffset = (c - shownCardsSizes.reduce(function (x, y) { return x + y[0] * y[1]; }, 0)) / shownCardsSizes.map(function (x) { return x[0]; }).reduce(function (x, y) { return x + y; });
//x = c - sum(ai*si)/sum(ai)
for (var i = 0; i < nb_div; i++) {
var cardElem = document.getElementById("card" + i);
var s = getSize(i, scrollVal * speedFactor);
cardElem.style.display = s < 0.01 ? "none" : "";
cardElem.style.transform = "scale(".concat(s, ")");
cardElem.style.transform = "scale(".concat(s, ")");
cardElem.style.height = "".concat(cardSizes[i] * (s + Math.max(scaleOffset, 0)), "px");
if (window.matchMedia("(max-width: 1000px)").matches)
cardElem.style.left = "".concat(15 * (2 - s), "px"); // 15px + the size missing to the circle
}
}
scaleAllCards((timeLineElm.getBoundingClientRect().y - ymin) / (ymax - ymin) * nb_div);
// action to take whenever we go above the timeline or under
function all() {
startTimeElm.style.position = "relative";
@@ -60,6 +91,8 @@ function changeWidth() {
// action to take whenever we go above the timeline
function backToTop() {
spacer1.style.height = "0px";
if (window.matchMedia("(max-width: 1000px)").matches)
timeLineElm.style.left = "23px"; // TODO this 23 shouldn't be hardcoded
}
// action to take whenever we go under the timeline
function under() {
@@ -67,6 +100,7 @@ function changeWidth() {
spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px";
}
}
// main function, called each time we scroll
function changeWidthParam() {
var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div;
if (window.scrollY > ymin && scrollVal < nb_div + offset) {
@@ -76,22 +110,18 @@ function changeWidth() {
startTimeElm.style.left = "0%";
startTimeElm.style.top = 0 + "px";
timeLineElm.style.position = "fixed";
timeLineElm.style.right = "0%";
timeLineElm.style.left = "0%";
if (window.matchMedia("(max-width: 1000px)").matches) {
timeLineElm.style.left = "31px";
console.log("Mobile Version");
}
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");
}
scaleAllCards(scrollVal);
}
else {
all();
@@ -103,10 +133,19 @@ function changeWidth() {
}
}
}
return changeWidthParam;
function updateSize() {
calculateCardSizes();
changeWidthParam();
}
return { "main": changeWidthParam, "updateSize": updateSize };
}
setupPage();
var f = changeWidth();
window.addEventListener('scroll', function () {
requestAnimationFrame(f);
requestAnimationFrame(f.main);
}, false);
// source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
addEventListener("resize", function (event) { return f.updateSize(); });

133
src/js/annimateTimeLine.ts
View File

@@ -1,10 +1,25 @@
// 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)
let offset = 2/5; // difference between each curve
let stableLen = 0.1;
let mainFunc = (-Math.abs(yValue - curbID*offset)+1+stableLen)/2 + Math.abs((-Math.abs(yValue - curbID*offset)+1+stableLen)/2);
/* basically do that :
/\
_____/ \______
*/
let secoFunc = (-Math.abs(yValue - curbID*offset)+stableLen)/2 + Math.abs((-Math.abs(yValue - curbID*offset)+stableLen)/2);
/* basically do that :
______/\______
so the difference do
__
______/ \______
*/
return mainFunc - secoFunc
}
function setupPage(){
let elements = document.getElementsByClassName("container");
for (let i = 0; i<elements.length; i++){
@@ -12,12 +27,13 @@ function setupPage(){
}
}
function changeWidth()
{
// Variables
let speedFactor = 1/6;
let speedFactor = 1/10;
let nb_div = document.getElementsByClassName("container").length;
let offset = 2.5/speedFactor; // this is the number of false data-points added at the end
let offset = 3.5/speedFactor; // this is the number of false data-points added at the end. it doesn't work well when modifying speed_factor
// Elements
let timeLineElm = document.getElementById("timeline");
@@ -32,27 +48,64 @@ function changeWidth()
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);
}
// fill the cardSizes array with original height of each card
function calculateCardSizes(){
timeLineElm.style.height = `${0.8*window.screen.height}px`;
console.log("taille de la fenetre: " + window.screen.height)
console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = []
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i);
cardElem.style.transform = 'scale(1)';
cardElem.style.display = ""
cardElem.style.height = ""
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`
}
calculateCardSizes()
function scaleAllCards(scrollVal: number){
console.log(timeLineElm.style.height);
let shownCardsSizes = []
for (let i = 0; i<nb_div; i++){
let s = getSize(i, scrollVal*speedFactor);
if (s>0.01)
shownCardsSizes.push([cardSizes[i], s])
}
let c = timeLineElm.style.height.replace("px", "");
// @ts-ignore
let scaleOffset = (c - shownCardsSizes.reduce((x, y) => x+y[0]*y[1], 0)) /shownCardsSizes.map((x) => x[0]).reduce((x, y) => x+y);
//x = c - sum(ai*si)/sum(ai)
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.transform = `scale(${s})`
cardElem.style.height = `${cardSizes[i] * (s+Math.max(scaleOffset, 0))}px`
if (window.matchMedia("(max-width: 1000px)").matches)
cardElem.style.left = `${15*(2-s)}px` // 15px + the size missing to the circle
}
}
scaleAllCards((timeLineElm.getBoundingClientRect().y - ymin) / (ymax - ymin) * nb_div);
// action to take whenever we go above the timeline or under
function all(){
startTimeElm.style.position = "relative";
@@ -63,10 +116,16 @@ function changeWidth()
projetPerso.style.position = "relative";
}
// action to take whenever we go above the timeline
function backToTop(){
spacer1.style.height="0px";
if (window.matchMedia("(max-width: 1000px)").matches)
timeLineElm.style.left = "23px" // TODO this 23 shouldn't be hardcoded
}
// action to take whenever we go under the timeline
function under() {
if(spacer1.style.height.replace("px", "") < "100"){
@@ -75,6 +134,8 @@ function changeWidth()
}
// main function, called each time we scroll
function changeWidthParam(){
let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div
if (window.scrollY > ymin && scrollVal < nb_div + offset){
@@ -86,9 +147,13 @@ function changeWidth()
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";
if (window.matchMedia("(max-width: 1000px)").matches){
timeLineElm.style.left = "31px"
console.log("Mobile Version")
}
timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
projetPerso.style.position = "fixed";
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'
@@ -97,16 +162,7 @@ function changeWidth()
}
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`
}
scaleAllCards(scrollVal);
}
else {
all();
@@ -119,7 +175,12 @@ function changeWidth()
}
}
return changeWidthParam;
function updateSize(){
calculateCardSizes()
changeWidthParam()
}
return {"main" : changeWidthParam, "updateSize" : updateSize};
}
setupPage();
@@ -128,7 +189,11 @@ let f = changeWidth();
window.addEventListener('scroll', function()
{
requestAnimationFrame(f);
requestAnimationFrame(f.main);
}, false);
// source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
addEventListener("resize", (event) => f.updateSize());