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

Fixed translation of tiles

Browse Source
This commit is contained in:
piair 2025-01-05 20:42:16 +01:00
parent 7703ff39ee
commit 2a9d51c9f1
4 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -24,6 +24,7 @@
<h2 id="startTime">
Mon parcours
</h2>
<div class="timeline" id="timeline">
<div class="container left">
<div class="content">
@ -113,7 +114,7 @@
<h2 id="projetPerso">Mes projets personnels</h2>
<div id="project" class="project">
<div id="project" class="project" hidden="hidden">
<div class="cards" id="cards">
<div class="project-container" id="project-card-0">
@ -126,10 +127,10 @@
2
</div>
</div>
<div class="left-arrow arrow" onclick="slide('left')">
<div class="left-arrow arrow" id="project-button-left">
<p>left arrow</p>
</div>
<div class="right-arrow arrow" onclick="slide('right')">
<div class="right-arrow arrow" id="project-button-right">
<p>right arrow</p>
</div>

2
src/css/style.css
View File

@ -146,7 +146,7 @@ a, a:visited{
padding: 20px 30px;
background-color: black;
position: relative;
border-radius: 6px;
border-radius: 10px;
border: solid white;
}

19
src/js/annimateTimeLine.ts
View File

@ -49,14 +49,13 @@ function changeWidth()
// get each maximum card size
let cardSizes: number[] = []
// 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);
cardSizes = []
let cardSizes: number[] = []
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i);
cardElem.style.transform = 'scale(1)';
@ -65,12 +64,10 @@ function changeWidth()
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
cardSizes.push(cardSize);
}
return cardSizes;
}
calculateCardSizes()
let cardSizes: number[] = calculateCardSizes();
function scaleAllCards(scrollVal: number){
console.log(timeLineElm.style.height);
@ -91,11 +88,14 @@ function changeWidth()
let cardElem = document.getElementById("card"+i);
let s = getSize(i, scrollVal*speedFactor);
cardElem.style.display = s<0.01 ? "none" : ""
//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`
//cardElem.style.height = `${cardSizes[i] * (s+Math.max(scaleOffset, 0))}px`
cardElem.style.height = `${cardSizes[i] * s}px`
cardElem.style.paddingTop = `${Math.min(cardSizes[i] * s, 10)}px`
cardElem.style.paddingBottom = `${Math.min(cardSizes[i] * s, 10)}px`
if (window.matchMedia("(max-width: 1000px)").matches)
cardElem.style.left = `${15*(2-s)}px` // 15px + the size missing to the circle
@ -130,7 +130,7 @@ function changeWidth()
if(spacer1.style.height.replace("px", "") < "100"){
spacer1.style.height = - spacer1.getBoundingClientRect().bottom + "px";
}
document.getElementById("project").hidden = false;
}
@ -161,6 +161,7 @@ function changeWidth()
}
document.getElementById("project").hidden = true;
scaleAllCards(scrollVal);
}
else {

46
src/js/projectSlide.ts
View File

@ -1,6 +1,10 @@
let nbProjectCards = 3;
function setupPage(){
function setupPage2(){
let slideFunction = slideContainer();
document.getElementById("project-button-left").addEventListener("click", () => slideFunction("left") );
document.getElementById("project-button-right").addEventListener("click", () => slideFunction("right"));
for (let i = 0; i < nbProjectCards; i++){
for (let p = 0; p<i; p++) {
@ -18,20 +22,40 @@ function setupPage(){
}
function slideContainer(){
function slide(side: string){
let factor = side === "left" ? 1 : -1
let currentProject: number = 0;
const projectWidth = window.innerWidth;
function slide(side: string){
let factor = side === "left" ? 1 : -1;
const nextCard: number = (currentProject - factor + nbProjectCards) % nbProjectCards; // Small hack to ensure that the value is always positive
for (let i = 0; i < nbProjectCards; i++){
let cardElem = document.getElementById("project-card-" + i);
console.log(cardElem.style.translate)
let val = window.innerWidth * factor + parseInt(cardElem.style.translate === "" ? "0" : cardElem.style.translate) + "px"
console.log("sliding to:" + val)
console.log(`Sliding: ${side}. Current Card: ${currentProject}. Next Card: ${nextCard}`)
cardElem.style.translate = val
cardElem.style.transition = "1s"
const CurrentCardElem = document.getElementById("project-card-" + currentProject);
const NextCardElm = document.getElementById("project-card-" + nextCard);
setProjectCardToPosition(NextCardElm, factor);
setTimeout(() => {
moveProjectCardToPosition(CurrentCardElem, factor);
moveProjectCardToPosition(NextCardElm, 0);
}, 1)
currentProject = nextCard;
}
function setProjectCardToPosition(elm: HTMLElement, direction: number){
elm.style.visibility = "hidden"
elm.style.translate = -1 * direction * projectWidth + "px";
elm.style.transition = "0s"
}
function moveProjectCardToPosition(elm: HTMLElement, direction: number){
elm.style.translate = direction * projectWidth + "px";
elm.style.transition = "1s"
elm.style.visibility = "visible"
}
return slide;
}
addEventListener("load", setupPage)
addEventListener("load", setupPage2)