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

update

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

66
src/css/style.css
View File

@ -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;
}
}
}
/* 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");
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(); });

19
src/js/annimateTimeLine.ts
View File

@ -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("load", function (){
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
window.onbeforeunload = function () {
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)