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

update

This commit is contained in:
piair 2024-04-08 10:13:29 +02:00
parent 0a8f6621fc
commit 7703ff39ee
6 changed files with 173 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -5,6 +5,9 @@
<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">
<script src="src/js/projectSlide.js"></script>
<script src="src/js/annimateTimeLine.js"></script>
</head> </head>
<body> <body>
<p> <p>
@ -109,6 +112,28 @@
</div> </div>
<h2 id="projetPerso">Mes projets personnels</h2> <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> </body>
</html> </html>

64
src/css/style.css
View File

@ -5,6 +5,8 @@
--color-background0: #0e0e0e; --color-background0: #0e0e0e;
--color-background1: #070631; --color-background1: #070631;
--color-background2: dimgray; --color-background2: dimgray;
--color-transparent-background1: rgba(0, 0, 0, 0);
--color-transparent-background2: rgb(0, 0, 0);
--color-border0: #FFFFFF; --color-border0: #FFFFFF;
--color-border1: grey; --color-border1: grey;
--color-text: #FFFFFF; --color-text: #FFFFFF;
@ -194,3 +196,65 @@ a, a:visited{
transform-origin: top left; 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;
}

15
src/js/annimateTimeLine.js
View File

@ -43,7 +43,6 @@ function changeWidth() {
timeLineElm.style.height = "".concat(0.8 * window.screen.height, "px"); timeLineElm.style.height = "".concat(0.8 * window.screen.height, "px");
console.log("taille de la fenetre: " + window.screen.height); console.log("taille de la fenetre: " + window.screen.height);
console.log("taille de la barre" + timeLineElm.style.height); console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = []; cardSizes = [];
for (var i = 0; i < nb_div; i++) { for (var i = 0; i < nb_div; i++) {
var cardElem = document.getElementById("card" + i); var cardElem = document.getElementById("card" + i);
@ -139,13 +138,15 @@ function changeWidth() {
} }
return { "main": changeWidthParam, "updateSize": updateSize }; return { "main": changeWidthParam, "updateSize": updateSize };
} }
setupPage(); window.addEventListener("load", function () {
var f = changeWidth(); setupPage();
window.addEventListener('scroll', function () { var f = changeWidth();
requestAnimationFrame(f.main); window.addEventListener('scroll', function () {
}, false); requestAnimationFrame(f.main);
}, false);
addEventListener("resize", function (event) { return f.updateSize(); });
});
// source: https://stackoverflow.com/a/26837814 // source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () { window.onbeforeunload = function () {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}; };
addEventListener("resize", function (event) { return f.updateSize(); });

19
src/js/annimateTimeLine.ts
View File

@ -56,7 +56,6 @@ function changeWidth()
timeLineElm.style.height = `${0.8*window.screen.height}px`; timeLineElm.style.height = `${0.8*window.screen.height}px`;
console.log("taille de la fenetre: " + window.screen.height) console.log("taille de la fenetre: " + window.screen.height)
console.log("taille de la barre" + timeLineElm.style.height); console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = [] cardSizes = []
for (let i = 0; i<nb_div; i++){ for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i); let cardElem = document.getElementById("card"+i);
@ -183,17 +182,21 @@ function changeWidth()
return {"main" : changeWidthParam, "updateSize" : updateSize}; return {"main" : changeWidthParam, "updateSize" : updateSize};
} }
setupPage(); window.addEventListener("load", function (){
let f = changeWidth(); setupPage();
let f = changeWidth();
window.addEventListener('scroll', function()
{
requestAnimationFrame(f.main);
}, false);
addEventListener("resize", (event) => f.updateSize());
})
window.addEventListener('scroll', function()
{
requestAnimationFrame(f.main);
}, false);
// source: https://stackoverflow.com/a/26837814 // source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () { window.onbeforeunload = function () {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
addEventListener("resize", (event) => f.updateSize());

26
src/js/projectSlide.js Normal file
View File

@ -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);

37
src/js/projectSlide.ts Normal file
View File

@ -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)