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

smol update

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -1,15 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Piair.dev</title> <title>Piair.dev</title>
<link type="text/css" href="src/css/style.css" rel="stylesheet" > <link type="text/css" href="src/css/style.css" rel="stylesheet" >
<link rel="icon" type="image/x-icon" href="src/img/favicon.ico"> <link rel="icon" type="image/x-icon" href="src/img/favicon.ico">
</head>
</head>
<body> <body>
<p> <p>
Ce site est en cours de construction. Il devrait s'améliorer de jour en jour Ce site est en cours de construction. Il devrait s'améliorer de jour en jour.
</p>
<p style="color: #FF9F55">
Il est conçu pour les ordinateurs. La version mobile arrivera (peut être) plus tard.
</p> </p>
<h1> <h1>
Pierre TELLIER Pierre TELLIER
@ -64,7 +66,7 @@
<div class="content"> <div class="content">
<h2>2021</h2> <h2>2021</h2>
<p>Programmation d'un logiciel permettant d'obtenir les données de Parcoursup automatiquement</p> <p>Programmation d'un logiciel permettant d'obtenir les données de Parcoursup automatiquement</p>
<p class="comment">Très utile pour voir le nombre de personnes devant moi sur la liste d'attente de Fénelon St Marie, sous la forme d'un graphe.</p> <p class="comment">Très utile pour voir le nombre de personnes devant moi sur la liste d'attente de Fénelon St Marie, sur Excel.</p>
</div> </div>
</div> </div>
<div class="container right"> <div class="container right">
@ -83,7 +85,7 @@
<div class="container left"> <div class="container left">
<div class="content"> <div class="content">
<h2>2022</h2> <h2>2022</h2>
<p>TIPE, projet de groupe en Python en et C sur du traitement d'images.</p> <p>TIPE, projet de groupe en Python et en C sur du traitement d'images.</p>
</div> </div>
</div> </div>
<div class="container right"> <div class="container right">
@ -99,7 +101,7 @@
<p class="comment">Je sais qu'il est pas beau, mais je ne suis pas un créatif.</p> <p class="comment">Je sais qu'il est pas beau, mais je ne suis pas un créatif.</p>
</div> </div>
</div> </div>
<div class="container right"> <div class="container left">
<div class="content"> <div class="content">
<h2>Et bien plus, avec vous ?</h2> <h2>Et bien plus, avec vous ?</h2>
</div> </div>

40
src/css/fonts/Montserrat.css Normal file
View File

@ -0,0 +1,40 @@
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat2.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat3.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat4.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
src/css/fonts/montserrat1.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat2.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat3.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat4.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat5.woff2 Normal file
View File

Binary file not shown.

47
src/css/style.css
View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url(./fonts/Montserrat.css);
/* This font is from https://fonts.googleapis.com/css?family=Montserrat */
:root { :root {
--color-background0: #0e0e0e; --color-background0: #0e0e0e;
@ -13,8 +14,11 @@
body { body {
text-align: center; text-align: center;
height: 100000px; height: 100000px;
color: var(--color-text);
font-size: 1.4em;
} }
html { html {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
min-height: 100%; min-height: 100%;
@ -25,36 +29,32 @@ html {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1);
} }
p {
color: var(--color-text);
h1{
font-size: xxx-large;
} }
h1, h2 { a, a:visited{
color: var(--color-text)
}
a {
color: var(--color-text);
}
a:visited{
color: var(--color-text); color: var(--color-text);
} }
/* Timeline stuff */ /* Timeline stuff */
/* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */ /* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Modified by Pierre TELLIER */ /* Modified by Pierre Tellier */
.comment{ .comment{
color: dimgrey; color: dimgrey;
font-size: small; font-size: 1em;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
/* The actual timeline (the vertical ruler) */ /* The actual timeline (the vertical ruler) */
.timeline { .timeline {
position: relative; position: relative;
/* max-width: 1200px; */ width: 100%;
margin: 0 auto; margin: 0 auto;
} }
@ -63,11 +63,12 @@ a:visited{
content: ''; content: '';
position: absolute; position: absolute;
width: 6px; width: 6px;
background-color: white; background-color: var(--color-border0);
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -3px; margin-left: -3px;
} }
/* Container around content */ /* Container around content */
@ -147,8 +148,8 @@ a:visited{
border: solid white; border: solid white;
} }
/* Media queries - Responsive timeline on screens less than 600px wide */ /* Media queries - Responsive timeline on screens less than 700px wide */
@media screen and (max-width: 600px) { @media screen and (max-width: 1000px) {
/* /*
Place the timelime to the left Place the timelime to the left
the timeline left position is hardcoded to 31px the timeline left position is hardcoded to 31px
@ -156,12 +157,15 @@ a:visited{
.timeline::after { .timeline::after {
left: 31px; left: 31px;
} }
.timeline{
left:23px; /*TODO: find why it's moving on mobile version*/
width: 90%;
}
/* Full-width containers */ /* Full-width containers */
.container { .container {
width: 100%; width: 100%;
padding-left: 70px; padding-left: 70px;
padding-right: 25px;
} }
/* Make sure that all arrows are pointing leftwards */ /* Make sure that all arrows are pointing leftwards */
@ -177,11 +181,16 @@ a:visited{
the left position is hardcoded at 15px the left position is hardcoded at 15px
*/ */
.left::after, .right::after { .left::after, .right::after {
left: 15px; left: 0;
} }
/* Make all right containers behave like the left ones */ /* Make all right containers behave like the left ones */
.right { .right {
left: 0; left: 0;
transform-origin: top left;
}
.left {
left: 0;
transform-origin: top left;
} }
} }

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 // 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) { function getSize(curbID, yValue) {
var factor = 2 / 5; // difference between each curve var offset = 2 / 5; // difference between each curve
return (-Math.abs(yValue - curbID * factor) + 1) / 2 + Math.abs((-Math.abs(yValue - curbID * factor) + 1) / 2); 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() { function setupPage() {
var elements = document.getElementsByClassName("container"); var elements = document.getElementsByClassName("container");
@ -20,9 +24,9 @@ function setupPage() {
} }
function changeWidth() { function changeWidth() {
// Variables // Variables
var speedFactor = 1 / 6; var speedFactor = 1 / 10;
var nb_div = document.getElementsByClassName("container").length; 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 // Elements
var timeLineElm = document.getElementById("timeline"); var timeLineElm = document.getElementById("timeline");
var startTimeElm = document.getElementById("startTime"); var startTimeElm = document.getElementById("startTime");
@ -32,22 +36,49 @@ function changeWidth() {
var startTimeBoxSize = startTimeElm.getBoundingClientRect(); var startTimeBoxSize = startTimeElm.getBoundingClientRect();
var ymin = startTimeBoxSize.top + window.scrollY; var ymin = startTimeBoxSize.top + window.scrollY;
var ymax = document.getElementById("card".concat(nb_div - 1)).getBoundingClientRect().bottom + 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 // get each maximum card size
for (var i = 0; i < nb_div; i++) { var cardSizes = [];
var cardElem = document.getElementById("card" + i); // fill the cardSizes array with original height of each card
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; function calculateCardSizes() {
cardSizes.push(cardSize); 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 calculateCardSizes();
for (var i = 0; i < nb_div; i++) { function scaleAllCards(scrollVal) {
var cardElem = document.getElementById("card" + i); console.log(timeLineElm.style.height);
var s = getSize(i, 0); var shownCardsSizes = [];
cardElem.style.transform = "scale(".concat(s, ")"); for (var i = 0; i < nb_div; i++) {
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; var s = getSize(i, scrollVal * speedFactor);
cardElem.style.height = "".concat(cardSizes[i] * s, "px"); 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 // action to take whenever we go above the timeline or under
function all() { function all() {
startTimeElm.style.position = "relative"; startTimeElm.style.position = "relative";
@ -60,6 +91,8 @@ function changeWidth() {
// action to take whenever we go above the timeline // action to take whenever we go above the timeline
function backToTop() { function backToTop() {
spacer1.style.height = "0px"; 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 // action to take whenever we go under the timeline
function under() { function under() {
@ -67,6 +100,7 @@ function changeWidth() {
spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px"; spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px";
} }
} }
// main function, called each time we scroll
function changeWidthParam() { function changeWidthParam() {
var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div; var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div;
if (window.scrollY > ymin && scrollVal < nb_div + offset) { if (window.scrollY > ymin && scrollVal < nb_div + offset) {
@ -76,22 +110,18 @@ function changeWidth() {
startTimeElm.style.left = "0%"; startTimeElm.style.left = "0%";
startTimeElm.style.top = 0 + "px"; startTimeElm.style.top = 0 + "px";
timeLineElm.style.position = "fixed"; timeLineElm.style.position = "fixed";
timeLineElm.style.right = "0%";
timeLineElm.style.left = "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"; timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
projetPerso.style.position = "fixed"; projetPerso.style.position = "fixed";
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'; projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px';
projetPerso.style.right = "0%"; projetPerso.style.right = "0%";
projetPerso.style.left = "0%"; projetPerso.style.left = "0%";
} }
for (var i = 0; i < nb_div; i++) { scaleAllCards(scrollVal);
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 { else {
all(); all();
@ -103,10 +133,19 @@ function changeWidth() {
} }
} }
} }
return changeWidthParam; function updateSize() {
calculateCardSizes();
changeWidthParam();
}
return { "main": changeWidthParam, "updateSize": updateSize };
} }
setupPage(); setupPage();
var f = changeWidth(); var f = changeWidth();
window.addEventListener('scroll', function () { window.addEventListener('scroll', function () {
requestAnimationFrame(f); requestAnimationFrame(f.main);
}, false); }, 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 // source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
function getSize(curbID: number, yValue: number): number{ function getSize(curbID: number, yValue: number): number{
let factor = 2/5; // difference between each curve let offset = 2/5; // difference between each curve
return (-Math.abs(yValue - curbID*factor)+1)/2 + Math.abs((-Math.abs(yValue - curbID*factor)+1)/2) 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(){ function setupPage(){
let elements = document.getElementsByClassName("container"); let elements = document.getElementsByClassName("container");
for (let i = 0; i<elements.length; i++){ for (let i = 0; i<elements.length; i++){
@ -12,12 +27,13 @@ function setupPage(){
} }
} }
function changeWidth() function changeWidth()
{ {
// Variables // Variables
let speedFactor = 1/6; let speedFactor = 1/10;
let nb_div = document.getElementsByClassName("container").length; 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 // Elements
let timeLineElm = document.getElementById("timeline"); let timeLineElm = document.getElementById("timeline");
@ -32,27 +48,64 @@ function changeWidth()
let ymax = document.getElementById(`card${nb_div-1}`).getBoundingClientRect().bottom + 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 // get each maximum card size
let cardSizes: number[] = [] let cardSizes: number[] = []
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i); // fill the cardSizes array with original height of each card
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; function calculateCardSizes(){
cardSizes.push(cardSize); 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 // action to take whenever we go above the timeline or under
function all(){ function all(){
startTimeElm.style.position = "relative"; startTimeElm.style.position = "relative";
@ -63,10 +116,16 @@ function changeWidth()
projetPerso.style.position = "relative"; projetPerso.style.position = "relative";
} }
// action to take whenever we go above the timeline // action to take whenever we go above the timeline
function backToTop(){ function backToTop(){
spacer1.style.height="0px"; 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 // action to take whenever we go under the timeline
function under() { function under() {
if(spacer1.style.height.replace("px", "") < "100"){ if(spacer1.style.height.replace("px", "") < "100"){
@ -75,6 +134,8 @@ function changeWidth()
} }
// main function, called each time we scroll
function changeWidthParam(){ function changeWidthParam(){
let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div
if (window.scrollY > ymin && scrollVal < nb_div + offset){ if (window.scrollY > ymin && scrollVal < nb_div + offset){
@ -86,9 +147,13 @@ function changeWidth()
startTimeElm.style.top = 0 + "px"; startTimeElm.style.top = 0 + "px";
timeLineElm.style.position = "fixed"; timeLineElm.style.position = "fixed";
timeLineElm.style.right = "0%";
timeLineElm.style.left = "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.position = "fixed";
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px' projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'
@ -97,16 +162,7 @@ function changeWidth()
} }
scaleAllCards(scrollVal);
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 { else {
all(); all();
@ -119,7 +175,12 @@ function changeWidth()
} }
} }
return changeWidthParam;
function updateSize(){
calculateCardSizes()
changeWidthParam()
}
return {"main" : changeWidthParam, "updateSize" : updateSize};
} }
setupPage(); setupPage();
@ -128,7 +189,11 @@ let f = changeWidth();
window.addEventListener('scroll', function() window.addEventListener('scroll', function()
{ {
requestAnimationFrame(f); requestAnimationFrame(f.main);
}, false); }, false);
// source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
addEventListener("resize", (event) => f.updateSize());