Amelioration de discretion
這個提交存在於：
父節點
a10371b555
當前提交
22c5696eff
共有 4 個檔案被更改，包括 85 行新增 和 33 行删除
|
|
@ -22,11 +22,7 @@ body {
|
|||
font-size: 4vw;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: #494949;
|
||||
|
|
@ -56,8 +52,11 @@ body {
|
|||
}
|
||||
|
||||
#buttons {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
@ -72,8 +71,9 @@ body {
|
|||
font-size: 1.5vw;
|
||||
background-image: linear-gradient(to top, black -50%, #BF0909 80%);
|
||||
cursor : pointer;
|
||||
position: absolute;
|
||||
left: 39%;
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
bottom: 17%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
|
|
@ -85,25 +85,42 @@ body {
|
|||
background-image: linear-gradient(to top, #BF0909 20%, black 150%);
|
||||
}
|
||||
|
||||
/* Test d'animation */
|
||||
@keyframes oscille {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
.textWillAppear {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
#arrowBlock{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 2vh;
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
#space{
|
||||
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{
|
||||
flex:0.5;
|
||||
display:flex;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="../CSS/couloir_ami.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<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>
|
||||
<body>
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>INSAïde</title>
|
||||
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
|
||||
<link rel="stylesheet" href="../CSS/discretion.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<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>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -17,14 +17,16 @@
|
|||
<main id="main">
|
||||
<section id="content">
|
||||
<article id="text">
|
||||
<p>
|
||||
Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas.
|
||||
Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver...
|
||||
Échappez-lui en bougeant votre souris!
|
||||
</p>
|
||||
<p class="firstText">Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas.</p>
|
||||
<p class="textWillAppear">Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver...</p>
|
||||
<p class="textWillAppear">Échappez-lui en bougeant votre souris!</p>
|
||||
<div id="arrowBlock">
|
||||
<p id="space">Press enter</p>
|
||||
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
|
||||
</div>
|
||||
</article>
|
||||
<div id="qtevent">
|
||||
<button class="button"><a id="buttontext" href="./course.html">Courir!</a></button>
|
||||
<div id="buttons">
|
||||
<a id="link" class="button" href="./course.html">Courir!</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
33
JAVASCRIPT/discretion.js
一般檔案
33
JAVASCRIPT/discretion.js
一般檔案
|
|
@ -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);
|
||||
載入中…
新增問題並參考