From 7703ff39ee75d4de770a12bcccfd610dbcf7454d Mon Sep 17 00:00:00 2001 From: piair Date: Mon, 8 Apr 2024 10:13:29 +0200 Subject: [PATCH] update --- index.html | 27 +++++++++++++++- src/css/style.css | 66 +++++++++++++++++++++++++++++++++++++- src/js/annimateTimeLine.js | 15 +++++---- src/js/annimateTimeLine.ts | 19 ++++++----- src/js/projectSlide.js | 26 +++++++++++++++ src/js/projectSlide.ts | 37 +++++++++++++++++++++ 6 files changed, 173 insertions(+), 17 deletions(-) create mode 100644 src/js/projectSlide.js create mode 100644 src/js/projectSlide.ts diff --git a/index.html b/index.html index fa94943..61794fa 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Piair.dev + + +

@@ -109,6 +112,28 @@

Mes projets personnels

- + +
+ +
+
+ 0 +
+
+ 1 +
+
+ 2 +
+
+
+

left arrow

+
+
+

right arrow

+
+ +
+ \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index aec4dab..02a26e0 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -5,6 +5,8 @@ --color-background0: #0e0e0e; --color-background1: #070631; --color-background2: dimgray; + --color-transparent-background1: rgba(0, 0, 0, 0); + --color-transparent-background2: rgb(0, 0, 0); --color-border0: #FFFFFF; --color-border1: grey; --color-text: #FFFFFF; @@ -193,4 +195,66 @@ a, a:visited{ left: 0; transform-origin: top left; } -} \ No newline at end of file +} + + +/* Project */ +.project { + overflow-x: auto; + white-space: nowrap; + height: 300px; +} +.cards { + display: inline-block; + position: absolute; + width: 100%; + height: inherit; + overflow-x: auto; + overflow-y: hidden; + left: 0; +} +.arrow { + position: absolute; + display: inline-block; + height: inherit; +} + +.left-arrow{ + left: 0; + background: -moz-linear-gradient(90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); + background: -webkit-linear-gradient(90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); + background: linear-gradient(90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); +} + +.right-arrow{ + right: 0; + background: -moz-linear-gradient(-90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); + background: -webkit-linear-gradient(-90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); + background: linear-gradient(-90deg, var(--color-transparent-background2) 0%, var(--color-transparent-background1) 100%); +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.cards::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.cards { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.project-container { + + position: absolute; + border-radius: 20px; + height: 98%; + background-color: #FF9F55; + padding: 10px 40px; + margin: 0 2.5%; + width: 95%; + overflow: hidden; + border: solid 1px white; + + +} diff --git a/src/js/annimateTimeLine.js b/src/js/annimateTimeLine.js index ce78625..41f4280 100644 --- a/src/js/annimateTimeLine.js +++ b/src/js/annimateTimeLine.js @@ -43,7 +43,6 @@ function changeWidth() { 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); @@ -139,13 +138,15 @@ function changeWidth() { } return { "main": changeWidthParam, "updateSize": updateSize }; } -setupPage(); -var f = changeWidth(); -window.addEventListener('scroll', function () { - requestAnimationFrame(f.main); -}, false); +window.addEventListener("load", function () { + setupPage(); + var f = changeWidth(); + window.addEventListener('scroll', function () { + requestAnimationFrame(f.main); + }, false); + addEventListener("resize", function (event) { return f.updateSize(); }); +}); // source: https://stackoverflow.com/a/26837814 window.onbeforeunload = function () { window.scrollTo(0, 0); }; -addEventListener("resize", function (event) { return f.updateSize(); }); diff --git a/src/js/annimateTimeLine.ts b/src/js/annimateTimeLine.ts index 17abe89..309f988 100644 --- a/src/js/annimateTimeLine.ts +++ b/src/js/annimateTimeLine.ts @@ -56,7 +56,6 @@ function changeWidth() 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 f.updateSize()); + +}) + -window.addEventListener('scroll', function() -{ - requestAnimationFrame(f.main); -}, false); // source: https://stackoverflow.com/a/26837814 window.onbeforeunload = function () { window.scrollTo(0, 0); } -addEventListener("resize", (event) => f.updateSize()); \ No newline at end of file diff --git a/src/js/projectSlide.js b/src/js/projectSlide.js new file mode 100644 index 0000000..2950a0b --- /dev/null +++ b/src/js/projectSlide.js @@ -0,0 +1,26 @@ +var nbProjectCards = 3; +function setupPage() { + for (var i = 0; i < nbProjectCards; i++) { + for (var p = 0; p < i; p++) { + console.log("i " + i + " p " + p); + var cardElem = document.getElementById("project-card-" + i); + console.log(cardElem.style.translate); + var val = window.innerWidth + parseInt(cardElem.style.translate === "" ? "0" : cardElem.style.translate) + "px"; + console.log("sliding to:" + val); + cardElem.style.translate = val; + cardElem.style.transition = "1s"; + } + } +} +function slide(side) { + var factor = side === "left" ? 1 : -1; + for (var i = 0; i < nbProjectCards; i++) { + var cardElem = document.getElementById("project-card-" + i); + console.log(cardElem.style.translate); + var val = window.innerWidth * factor + parseInt(cardElem.style.translate === "" ? "0" : cardElem.style.translate) + "px"; + console.log("sliding to:" + val); + cardElem.style.translate = val; + cardElem.style.transition = "1s"; + } +} +addEventListener("load", setupPage); diff --git a/src/js/projectSlide.ts b/src/js/projectSlide.ts new file mode 100644 index 0000000..e4c9d90 --- /dev/null +++ b/src/js/projectSlide.ts @@ -0,0 +1,37 @@ +let nbProjectCards = 3; + +function setupPage(){ + for (let i = 0; i < nbProjectCards; i++){ + + for (let p = 0; p