bamarty/Projet_Prog_Web
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Amelioration de discretion

Browse source
This commit is contained in:
Pierre Favary 2020-12-15 15:13:00 +01:00
parent a10371b555
commit 22c5696eff
4 changed files with 85 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
CSS/discretion.css
View file

@ -22,10 +22,6 @@ body {
font-size: 4vw; font-size: 4vw;
} }
a {
text-decoration: none;
color: black;
}
header a { header a {
text-decoration: none; text-decoration: none;
@ -56,8 +52,11 @@ body {
} }
#buttons { #buttons {
opacity: 0;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
text-align: center;
text-decoration:none;
} }
.button { .button {
@ -73,7 +72,8 @@ body {
background-image: linear-gradient(to top, black -50%, #BF0909 80%); background-image: linear-gradient(to top, black -50%, #BF0909 80%);
cursor : pointer; cursor : pointer;
position: absolute; position: absolute;
left: 39%; left: 40%;
bottom: 17%;
} }
.button:hover { .button:hover {
@ -85,23 +85,40 @@ body {
background-image: linear-gradient(to top, #BF0909 20%, black 150%); background-image: linear-gradient(to top, #BF0909 20%, black 150%);
} }
/* Test d'animation */ .textWillAppear {
@keyframes oscille { opacity: 0;
from {
transform: rotate(0);
} }
25% { @keyframes fade {
transform: rotate(8deg); 100% {opacity: 1;}
} }
75% { #arrowBlock{
transform: rotate(-8deg); display: flex;
justify-content: flex-end;
height: 2vh;
width: 45vw;
} }
to { #space{
transform: rotate(0); font-size: 1vw;
font-family: 'Special Elite', cursive;
padding-right: 1vw;
} }
#arrow{
height: 2vh;
animation: bounce 1s forwards;
animation-iteration-count:infinite;
}
@keyframes bounce {
50% {transform: translate(0, -1em);}
}
@keyframes fade-reverse {
0% {opacity :1}
100% {opacity:0}
} }
footer{ footer{

2
HTML/couloir_ami.html
View file

@ -7,7 +7,7 @@
<link rel="stylesheet" href="../CSS/couloir_ami.css"> <link rel="stylesheet" href="../CSS/couloir_ami.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<script defer type="text/javascript" src="../JAVASCRIPT/couloir_ami.js"></script> <script defer type="text/javascript" src="../JAVASCRIPT/discretion.js"></script>
</head> </head>
<body> <body>
<header> <header>

18
HTML/discretion.html
View file

@ -4,10 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSAïde</title> <title>INSAïde</title>
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
<link rel="stylesheet" href="../CSS/discretion.css"> <link rel="stylesheet" href="../CSS/discretion.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<script defer type="text/javascript" src="../JAVASCRIPT/discretion.js"></script>
</head> </head>
<body> <body>
<header> <header>
@ -17,14 +17,16 @@
<main id="main"> <main id="main">
<section id="content"> <section id="content">
<article id="text"> <article id="text">
<p> <p class="firstText">Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas.</p>
Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas. <p class="textWillAppear">Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver...</p>
Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver... <p class="textWillAppear">Échappez-lui en bougeant votre souris!</p>
Échappez-lui en bougeant votre souris! <div id="arrowBlock">
</p> <p id="space">Press enter</p>
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
</div>
</article> </article>
<div id="qtevent"> <div id="buttons">
<button class="button"><a id="buttontext" href="./course.html">Courir!</a></button> <a id="link" class="button" href="./course.html">Courir!</a>
</div> </div>
</section> </section>
</main> </main>

33
JAVASCRIPT/discretion.js Normal file
View file

@ -0,0 +1,33 @@
//------------------ Variables ------------------//
let p_counter = 0;
let texts = document.getElementsByClassName("textWillAppear");
let buttonBox = document.getElementById("buttons");
let arrow = document.getElementById("arrow");
let space = document.getElementById("space");
console.log(texts)
let NB_TEXTS = texts.length;
let NB_BUTTONS = 1;
let NB_ELEMENTS_TO_APPEAR = NB_TEXTS + NB_BUTTONS;
//gère les apparitions et disparitions des textes
function makeNextTextAppear(event) {
if (p_counter < NB_ELEMENTS_TO_APPEAR) {
if (event.keyCode == 13 || event.keyCode == 32) {
if(p_counter < NB_TEXTS) {
texts[p_counter].style.cssText = "animation: fade 2s forwards;";
}
else {
buttonBox.style.cssText = "animation: fade 2s forwards;";
arrow.style.cssText = "animation: fade-reverse 1s forwards;";
space.style.cssText = "animation: fade-reverse 1s forwards;";
}
p_counter += 1;
}
}
}
//------------------ Gestion events ------------------//
document.addEventListener("keypress", makeNextTextAppear);