Browse Source

Amelioration de discretion

Pierre Favary 3 years ago
parent
commit
22c5696eff
4 changed files with 79 additions and 27 deletions
  1. 35
    18
      CSS/discretion.css
  2. 1
    1
      HTML/couloir_ami.html
  3. 10
    8
      HTML/discretion.html
  4. 33
    0
      JAVASCRIPT/discretion.js

+ 35
- 18
CSS/discretion.css View File

@@ -22,11 +22,7 @@ body {
22 22
             font-size: 4vw;
23 23
         }
24 24
 		
25
-		a {
26
-			text-decoration: none;
27
-			color: black;
28
-		}
29
-		
25
+	
30 26
         header a {
31 27
             text-decoration: none;
32 28
             color: #494949;
@@ -56,8 +52,11 @@ body {
56 52
             }
57 53
 
58 54
             #buttons {
55
+                opacity: 0;
59 56
                 display: flex;
60 57
                 justify-content: space-around;
58
+				text-align: center;
59
+				text-decoration:none;
61 60
             }
62 61
 
63 62
             .button {
@@ -72,8 +71,9 @@ body {
72 71
                 font-size: 1.5vw;
73 72
                 background-image: linear-gradient(to top, black -50%, #BF0909 80%);
74 73
                 cursor : pointer;
75
-				position: absolute;
76
-				left: 39%;
74
+	  position: absolute;
75
+	  left: 40%;
76
+	  bottom: 17%;
77 77
             }
78 78
 
79 79
             .button:hover {
@@ -85,24 +85,41 @@ body {
85 85
                 background-image: linear-gradient(to top, #BF0909 20%, black 150%);
86 86
             }
87 87
 
88
-            /* Test d'animation */
89
-            @keyframes oscille {
90
-                from {
91
-                    transform: rotate(0);
88
+            .textWillAppear {
89
+                opacity: 0;
90
+            }
91
+
92
+	 @keyframes fade {
93
+                    100% {opacity: 1;}
92 94
                 }
93 95
 
94
-                25% {
95
-                    transform: rotate(8deg);
96
+            #arrowBlock{
97
+                display: flex;
98
+                justify-content: flex-end;
99
+                height: 2vh;
100
+                width: 45vw;
101
+            }
102
+
103
+                #space{
104
+                    font-size: 1vw;
105
+                    font-family: 'Special Elite', cursive;
106
+                    padding-right: 1vw;
96 107
                 }
97 108
 
98
-                75% {
99
-                    transform: rotate(-8deg);
109
+                #arrow{
110
+                    height: 2vh;
111
+                    animation: bounce 1s forwards;
112
+                    animation-iteration-count:infinite;
100 113
                 }
101 114
 
102
-                to {
103
-                    transform: rotate(0);
115
+                @keyframes bounce {
116
+                    50% {transform: translate(0, -1em);}
117
+                }
118
+
119
+                @keyframes fade-reverse {
120
+                    0% {opacity :1}
121
+                    100% {opacity:0}
104 122
                 }
105
-            }
106 123
 
107 124
             footer{
108 125
                 flex:0.5;

+ 1
- 1
HTML/couloir_ami.html View File

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

+ 10
- 8
HTML/discretion.html View File

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

+ 33
- 0
JAVASCRIPT/discretion.js View File

@@ -0,0 +1,33 @@
1
+//------------------ Variables ------------------//
2
+let p_counter = 0;
3
+let texts = document.getElementsByClassName("textWillAppear");
4
+let buttonBox = document.getElementById("buttons");
5
+let arrow = document.getElementById("arrow");
6
+let space = document.getElementById("space");
7
+
8
+console.log(texts)
9
+
10
+let NB_TEXTS = texts.length;
11
+let NB_BUTTONS = 1;
12
+let NB_ELEMENTS_TO_APPEAR = NB_TEXTS + NB_BUTTONS;
13
+
14
+
15
+//gère les apparitions et disparitions des textes
16
+function makeNextTextAppear(event) {
17
+    if (p_counter < NB_ELEMENTS_TO_APPEAR) {
18
+        if (event.keyCode == 13 || event.keyCode == 32) {
19
+            if(p_counter < NB_TEXTS) {
20
+                texts[p_counter].style.cssText = "animation: fade 2s forwards;";
21
+            }
22
+            else {
23
+                buttonBox.style.cssText = "animation: fade 2s forwards;";
24
+                arrow.style.cssText = "animation: fade-reverse 1s forwards;";
25
+                space.style.cssText = "animation: fade-reverse 1s forwards;";
26
+            }
27
+            p_counter += 1;
28
+        }
29
+    }
30
+}
31
+
32
+//------------------ Gestion events ------------------//
33
+document.addEventListener("keypress", makeNextTextAppear);

Loading…
Cancel
Save