diff --git a/CSS/discretion.css b/CSS/discretion.css index 4d5ddac..ac3bd99 100644 --- a/CSS/discretion.css +++ b/CSS/discretion.css @@ -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; diff --git a/HTML/couloir_ami.html b/HTML/couloir_ami.html index 274f8e7..606a5a3 100644 --- a/HTML/couloir_ami.html +++ b/HTML/couloir_ami.html @@ -7,7 +7,7 @@ - +
diff --git a/HTML/discretion.html b/HTML/discretion.html index 9458c87..b6c3c0c 100644 --- a/HTML/discretion.html +++ b/HTML/discretion.html @@ -4,10 +4,10 @@ INSAïde - +
@@ -17,14 +17,16 @@
-

- 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! -

+

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!

+
+

Press enter

+ Texte suivant +
-
diff --git a/JAVASCRIPT/discretion.js b/JAVASCRIPT/discretion.js new file mode 100644 index 0000000..6ea0ea6 --- /dev/null +++ b/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); \ No newline at end of file