first commit
This commit is contained in:
piair
commit
76ef52a998
|
|
@ -0,0 +1,2 @@
|
||||||
|
copy.sh
|
||||||
|
.idea
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<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">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
Ce site est en cours de construction. Il devrait s'améliorer de jour en jour
|
||||||
|
</p>
|
||||||
|
<h1>
|
||||||
|
Pierre TELLIER
|
||||||
|
</h1>
|
||||||
|
<p>La majorité de mes projets sont sur mon <a href="https://gitea.piair.dev/piair" target=”_blank”>Gitea</a>.</p>
|
||||||
|
<p class="spacer" id="spacer1" style="height: 0"></p>
|
||||||
|
<h2 id="startTime">
|
||||||
|
Mon parcours
|
||||||
|
</h2>
|
||||||
|
<div class="timeline" id="timeline">
|
||||||
|
<div class="container left">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2014</h2>
|
||||||
|
<p>Écriture de mon premier programme en java.</p>
|
||||||
|
<p class="comment">Hello World!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container left">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2016</h2>
|
||||||
|
<p>Je découvre la programmation en python grace à <a href="https://www.amazon.fr/dp/2340004594" target=”_blank”>ce livre</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2018</h2>
|
||||||
|
<p>Entrée au <a href="https://lyc-vernant-sevres.ac-versailles.fr/" target=”_blank”>Lycée de Sèvres</a>, option SNT (Sciences Numériques et Technologiques)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2019</h2>
|
||||||
|
<p>Entrée en 1ère. Choix des options NSI (Numérique et Science de l'Informatique), Mathématiques, et Physique-Chimie</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2020</h2>
|
||||||
|
<p>Terminale, Spécialité Maths et Physique-Chimie, option Maths expertes.</p>
|
||||||
|
<p class="comment">
|
||||||
|
J'ai du abandonner à contre-coeur l'option NSI. En effet, je voulais déjà aller en prépa, et la physique est presque obligatoire, même en MPI.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2021</h2>
|
||||||
|
<p>Bac Mention Bien, spécialité Maths Physique (et COVID, je n'ai presque pas passé d'épreuves).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container left">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2021</h2>
|
||||||
|
<p>Programmation d'un logiciel permettant d'obtenir les données de Parcoursup automatiquement</p>
|
||||||
|
<p class="comment">Très utile pour voir le nombre de personnes devant moi sur la liste d'attente de Fénelon St Marie, sous la forme d'un graphe.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2021</h2>
|
||||||
|
<p>Sup MP2I à <a href="https://www.fenelonsaintemarie.org/classes-preparatoires/page/mp2i/" target=”_blank”>Fénelon St Marie.</a></p>
|
||||||
|
<p class="comment">Beta testeur de cette nouvelle filière. Et j'ai bien fait.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2022</h2>
|
||||||
|
<p>Spé en MPI*, toujours à Fénelon St Marie.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container left">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2022</h2>
|
||||||
|
<p>TIPE, projet de groupe en Python en et C sur du traitement d'images.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2023</h2>
|
||||||
|
<p>Entrée à l'ENSEIRB-MATMECA, en option Informatique.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>2024</h2>
|
||||||
|
<p>Développement de <a href="https://piair.dev" target=”_blank”>ce site web.</a></p>
|
||||||
|
<p class="comment">Je sais qu'il est pas beau, mais je ne suis pas un créatif.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container right">
|
||||||
|
<div class="content">
|
||||||
|
<h2>Et bien plus, avec vous ?</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="projetPerso">Mes projets personnels</h2>
|
||||||
|
<script src="src/js/annimateTimeLine.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Montserrat');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-background0: #0e0e0e;
|
||||||
|
--color-background1: #070631;
|
||||||
|
--color-background2: dimgray;
|
||||||
|
--color-border0: #FFFFFF;
|
||||||
|
--color-border1: grey;
|
||||||
|
--color-text: #FFFFFF;
|
||||||
|
--color-transparent: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
height: 100000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: Montserrat, sans-serif;
|
||||||
|
min-height: 100%;
|
||||||
|
background: var(--color-background0);
|
||||||
|
background: -moz-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
|
||||||
|
background: -webkit-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
|
||||||
|
background: linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
color: var(--color-text)
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
a:visited{
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Timeline stuff */
|
||||||
|
/* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */
|
||||||
|
/* Modified by Pierre TELLIER */
|
||||||
|
.comment{
|
||||||
|
color: dimgrey;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/* The actual timeline (the vertical ruler) */
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
/* max-width: 1200px; */
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.timeline::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
background-color: white;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container around content */
|
||||||
|
.container {
|
||||||
|
padding: 10px 40px;
|
||||||
|
position: relative;
|
||||||
|
background-color: inherit;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The circles on the timeline */
|
||||||
|
.container::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
right: -17px;
|
||||||
|
background-color: white;
|
||||||
|
border: 4px solid #FF9F55;
|
||||||
|
top: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Place the container to the left */
|
||||||
|
.left {
|
||||||
|
transform-origin: top right;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Place the container to the right */
|
||||||
|
.right {
|
||||||
|
transform-origin: top left;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add arrows to the left container (pointing right) */
|
||||||
|
.left::before {
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
width: 0;
|
||||||
|
z-index: 1;
|
||||||
|
right: 30px;
|
||||||
|
border: medium solid white;
|
||||||
|
border-width: 10px 0 10px 10px;
|
||||||
|
border-color: transparent transparent transparent white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add arrows to the right container (pointing left) */
|
||||||
|
.right::before {
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
width: 0;
|
||||||
|
z-index: 1;
|
||||||
|
left: 30px;
|
||||||
|
border: medium solid white;
|
||||||
|
border-width: 10px 10px 10px 0;
|
||||||
|
border-color: transparent white transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix the circle for containers on the right side */
|
||||||
|
.right::after {
|
||||||
|
left: -16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The actual content */
|
||||||
|
.content {
|
||||||
|
padding: 20px 30px;
|
||||||
|
background-color: black;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media queries - Responsive timeline on screens less than 600px wide */
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
/*
|
||||||
|
Place the timelime to the left
|
||||||
|
the timeline left position is hardcoded to 31px
|
||||||
|
*/
|
||||||
|
.timeline::after {
|
||||||
|
left: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full-width containers */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 70px;
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure that all arrows are pointing leftwards */
|
||||||
|
.container::before {
|
||||||
|
left: 60px;
|
||||||
|
border: medium solid white;
|
||||||
|
border-width: 10px 10px 10px 0;
|
||||||
|
border-color: transparent white transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Make sure all circles are at the same spot
|
||||||
|
the left position is hardcoded at 15px
|
||||||
|
*/
|
||||||
|
.left::after, .right::after {
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make all right containers behave like the left ones */
|
||||||
|
.right {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,112 @@
|
||||||
|
// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
|
||||||
|
var cardSizes = [];
|
||||||
|
window.onresize = function () {
|
||||||
|
cardSizes = [];
|
||||||
|
for (var i = 0; i < document.getElementsByClassName("container").length; i++) {
|
||||||
|
var cardElem = document.getElementById("card" + i);
|
||||||
|
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||||
|
cardSizes.push(cardSize);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function getSize(curbID, yValue) {
|
||||||
|
var factor = 2 / 5; // difference between each curve
|
||||||
|
return (-Math.abs(yValue - curbID * factor) + 1) / 2 + Math.abs((-Math.abs(yValue - curbID * factor) + 1) / 2);
|
||||||
|
}
|
||||||
|
function setupPage() {
|
||||||
|
var elements = document.getElementsByClassName("container");
|
||||||
|
for (var i = 0; i < elements.length; i++) {
|
||||||
|
elements[i].id = "card" + i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function changeWidth() {
|
||||||
|
// Variables
|
||||||
|
var speedFactor = 1 / 6;
|
||||||
|
var nb_div = document.getElementsByClassName("container").length;
|
||||||
|
var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end
|
||||||
|
// Elements
|
||||||
|
var timeLineElm = document.getElementById("timeline");
|
||||||
|
var startTimeElm = document.getElementById("startTime");
|
||||||
|
var spacer1 = document.getElementById("spacer1");
|
||||||
|
var projetPerso = document.getElementById("projetPerso");
|
||||||
|
// Positions
|
||||||
|
var startTimeBoxSize = startTimeElm.getBoundingClientRect();
|
||||||
|
var ymin = startTimeBoxSize.top + window.scrollY;
|
||||||
|
var ymax = document.getElementById("card".concat(nb_div - 1)).getBoundingClientRect().bottom + window.scrollY;
|
||||||
|
// todo: change the height of the timeline to value depending on the screen size
|
||||||
|
timeLineElm.style.height = "".concat(nb_div * 50, "px");
|
||||||
|
// get each maximum card size
|
||||||
|
for (var i = 0; i < nb_div; i++) {
|
||||||
|
var cardElem = document.getElementById("card" + i);
|
||||||
|
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||||
|
cardSizes.push(cardSize);
|
||||||
|
}
|
||||||
|
// Initial scaling of all cards
|
||||||
|
for (var i = 0; i < nb_div; i++) {
|
||||||
|
var cardElem = document.getElementById("card" + i);
|
||||||
|
var s = getSize(i, 0);
|
||||||
|
cardElem.style.transform = "scale(".concat(s, ")");
|
||||||
|
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||||
|
cardElem.style.height = "".concat(cardSizes[i] * s, "px");
|
||||||
|
}
|
||||||
|
// action to take whenever we go above the timeline or under
|
||||||
|
function all() {
|
||||||
|
startTimeElm.style.position = "relative";
|
||||||
|
timeLineElm.style.position = "relative";
|
||||||
|
startTimeElm.style.top = "";
|
||||||
|
timeLineElm.style.top = "";
|
||||||
|
projetPerso.style.top = "";
|
||||||
|
projetPerso.style.position = "relative";
|
||||||
|
}
|
||||||
|
// action to take whenever we go above the timeline
|
||||||
|
function backToTop() {
|
||||||
|
spacer1.style.height = "0px";
|
||||||
|
}
|
||||||
|
// action to take whenever we go under the timeline
|
||||||
|
function under() {
|
||||||
|
if (spacer1.style.height.replace("px", "") < "100") {
|
||||||
|
spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function changeWidthParam() {
|
||||||
|
var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div;
|
||||||
|
if (window.scrollY > ymin && scrollVal < nb_div + offset) {
|
||||||
|
if (timeLineElm.style.position !== "fixed") { // apply once
|
||||||
|
startTimeElm.style.position = "fixed";
|
||||||
|
startTimeElm.style.right = "0%";
|
||||||
|
startTimeElm.style.left = "0%";
|
||||||
|
startTimeElm.style.top = 0 + "px";
|
||||||
|
timeLineElm.style.position = "fixed";
|
||||||
|
timeLineElm.style.right = "0%";
|
||||||
|
timeLineElm.style.left = "0%";
|
||||||
|
timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
|
||||||
|
projetPerso.style.position = "fixed";
|
||||||
|
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px';
|
||||||
|
projetPerso.style.right = "0%";
|
||||||
|
projetPerso.style.left = "0%";
|
||||||
|
}
|
||||||
|
for (var i = 0; i < nb_div; i++) {
|
||||||
|
var cardElem = document.getElementById("card" + i);
|
||||||
|
var s = getSize(i, scrollVal * speedFactor); // scrollval / 4 is used to slow down the movement
|
||||||
|
console.log("scale " + i + " : " + s);
|
||||||
|
cardElem.style.display = s < 0.01 ? "none" : "";
|
||||||
|
cardElem.style.transform = "scale(".concat(s, ")");
|
||||||
|
cardElem.style.height = "".concat(cardSizes[i] * s, "px");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
all();
|
||||||
|
if (scrollVal < 2) {
|
||||||
|
backToTop();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
under();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return changeWidthParam;
|
||||||
|
}
|
||||||
|
setupPage();
|
||||||
|
var f = changeWidth();
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
requestAnimationFrame(f);
|
||||||
|
}, false);
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
|
||||||
|
|
||||||
|
function getSize(curbID: number, yValue: number): number{
|
||||||
|
let factor = 2/5; // difference between each curve
|
||||||
|
return (-Math.abs(yValue - curbID*factor)+1)/2 + Math.abs((-Math.abs(yValue - curbID*factor)+1)/2)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPage(){
|
||||||
|
let elements = document.getElementsByClassName("container");
|
||||||
|
for (let i = 0; i<elements.length; i++){
|
||||||
|
elements[i].id = "card" + i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeWidth()
|
||||||
|
{
|
||||||
|
// Variables
|
||||||
|
let speedFactor = 1/6;
|
||||||
|
let nb_div = document.getElementsByClassName("container").length;
|
||||||
|
let offset = 2.5/speedFactor; // this is the number of false data-points added at the end
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
let timeLineElm = document.getElementById("timeline");
|
||||||
|
let startTimeElm = document.getElementById("startTime");
|
||||||
|
let spacer1 = document.getElementById("spacer1");
|
||||||
|
let projetPerso = document.getElementById("projetPerso");
|
||||||
|
|
||||||
|
|
||||||
|
// Positions
|
||||||
|
let startTimeBoxSize = startTimeElm.getBoundingClientRect()
|
||||||
|
let ymin = startTimeBoxSize.top + window.scrollY;
|
||||||
|
let ymax = document.getElementById(`card${nb_div-1}`).getBoundingClientRect().bottom + window.scrollY;
|
||||||
|
|
||||||
|
|
||||||
|
// todo: change the height of the timeline to value depending on the screen size
|
||||||
|
timeLineElm.style.height = `${nb_div*50}px`;
|
||||||
|
|
||||||
|
// get each maximum card size
|
||||||
|
let cardSizes: number[] = []
|
||||||
|
for (let i = 0; i<nb_div; i++){
|
||||||
|
let cardElem = document.getElementById("card"+i);
|
||||||
|
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||||
|
cardSizes.push(cardSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Initial scaling of all cards
|
||||||
|
for (let i = 0; i<nb_div; i++){
|
||||||
|
let cardElem = document.getElementById("card"+i);
|
||||||
|
let s = getSize(i, 0);
|
||||||
|
cardElem.style.transform = `scale(${s})`
|
||||||
|
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||||
|
cardElem.style.height = `${cardSizes[i] * s}px`
|
||||||
|
}
|
||||||
|
|
||||||
|
// action to take whenever we go above the timeline or under
|
||||||
|
function all(){
|
||||||
|
startTimeElm.style.position = "relative";
|
||||||
|
timeLineElm.style.position = "relative";
|
||||||
|
startTimeElm.style.top = ""
|
||||||
|
timeLineElm.style.top = ""
|
||||||
|
projetPerso.style.top = ""
|
||||||
|
projetPerso.style.position = "relative";
|
||||||
|
|
||||||
|
}
|
||||||
|
// action to take whenever we go above the timeline
|
||||||
|
function backToTop(){
|
||||||
|
spacer1.style.height="0px";
|
||||||
|
}
|
||||||
|
// action to take whenever we go under the timeline
|
||||||
|
function under() {
|
||||||
|
if(spacer1.style.height.replace("px", "") < "100"){
|
||||||
|
spacer1.style.height = - spacer1.getBoundingClientRect().bottom + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeWidthParam(){
|
||||||
|
let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div
|
||||||
|
if (window.scrollY > ymin && scrollVal < nb_div + offset){
|
||||||
|
if (timeLineElm.style.position !== "fixed"){ // apply once
|
||||||
|
|
||||||
|
startTimeElm.style.position = "fixed"
|
||||||
|
startTimeElm.style.right = "0%";
|
||||||
|
startTimeElm.style.left = "0%";
|
||||||
|
startTimeElm.style.top = 0 + "px";
|
||||||
|
|
||||||
|
timeLineElm.style.position = "fixed";
|
||||||
|
timeLineElm.style.right = "0%";
|
||||||
|
timeLineElm.style.left = "0%";
|
||||||
|
timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
|
||||||
|
|
||||||
|
projetPerso.style.position = "fixed";
|
||||||
|
projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'
|
||||||
|
projetPerso.style.right = "0%";
|
||||||
|
projetPerso.style.left = "0%";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
for (let i = 0; i<nb_div; i++){
|
||||||
|
let cardElem = document.getElementById("card"+i);
|
||||||
|
let s = getSize(i, scrollVal*speedFactor);
|
||||||
|
|
||||||
|
cardElem.style.display = s<0.01 ? "none" : ""
|
||||||
|
cardElem.style.transform = `scale(${s})`
|
||||||
|
cardElem.style.height = `${cardSizes[i] * s}px`
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
all();
|
||||||
|
if (scrollVal < 2){
|
||||||
|
backToTop();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
under();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return changeWidthParam;
|
||||||
|
}
|
||||||
|
|
||||||
|
setupPage();
|
||||||
|
let f = changeWidth();
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function()
|
||||||
|
{
|
||||||
|
requestAnimationFrame(f);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue