update

2024-04-08 10:13:29 +02:00 · 2024-04-08 10:13:29 +02:00 · 7703ff39ee
parent 0a8f6621fc
commit 7703ff39ee
6 changed files with 173 additions and 17 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,9 @@
        <title>Piair.dev</title>
        <link type="text/css" href="src/css/style.css" rel="stylesheet" >
        <link rel="icon" type="image/x-icon" href="src/img/favicon.ico">
+        <script src="src/js/projectSlide.js"></script>
+        <script src="src/js/annimateTimeLine.js"></script>
+
    </head>
    <body>
        <p>
@ -109,6 +112,28 @@
        </div>

        <h2 id="projetPerso">Mes projets personnels</h2>
-        <script src="src/js/annimateTimeLine.js"></script>
+
+        <div id="project" class="project">
+
+            <div class="cards" id="cards">
+                <div class="project-container" id="project-card-0">
+                    0
+                </div>
+                <div class="project-container" id="project-card-1">
+                    1
+                </div>
+                <div class="project-container" id="project-card-2">
+                    2
+                </div>
+            </div>
+            <div class="left-arrow arrow" onclick="slide('left')">
+                <p>left arrow</p>
+            </div>
+            <div class="right-arrow arrow" onclick="slide('right')">
+                <p>right arrow</p>
+            </div>
+
+        </div>
+
    </body>
 </html>
--- 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;
@ -194,3 +196,65 @@ a, a:visited{
        transform-origin: top left;
    }
 }
+
+
+/* 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;
+
+
+}
--- 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 () {
+window.addEventListener("load", function () {
+    setupPage();
+    var f = changeWidth();
+    window.addEventListener('scroll', function () {
        requestAnimationFrame(f.main);
-}, false);
+    }, 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(); });
--- 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<nb_div; i++){
            let cardElem = document.getElementById("card"+i);
@ -183,17 +182,21 @@ function changeWidth()
    return {"main" : changeWidthParam, "updateSize" : updateSize};
 }

-setupPage();
-let f = changeWidth();
-
-
-window.addEventListener('scroll', function()
-{
+window.addEventListener("load", function (){
+    setupPage();
+    let f = changeWidth();
+    window.addEventListener('scroll', function()
+    {
        requestAnimationFrame(f.main);
-}, false);
+    }, false);
+    addEventListener("resize", (event) => f.updateSize());
+
+})
+
+
+

 // source: https://stackoverflow.com/a/26837814
 window.onbeforeunload = function () {
    window.scrollTo(0, 0);
 }
-addEventListener("resize", (event) => f.updateSize());
--- a/src/js/projectSlide.js
+++ 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);
--- a/src/js/projectSlide.ts
+++ 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<i; p++) {
+            console.log("i " + i + " p " + p)
+            let cardElem = document.getElementById("project-card-" + i);
+            console.log(cardElem.style.translate)
+            let 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: string){
+    let factor = side === "left" ? 1 : -1
+
+    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)
+
+        cardElem.style.translate = val
+        cardElem.style.transition = "1s"
+    }
+
+}
+
+addEventListener("load", setupPage)