bamarty
/
Projet_Prog_Web
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

EyeEffect first version

Baptiste Marty 3 years ago
parent
2df1e99114
commit
1572045928
3 changed files with 62 additions and 24 deletions
Split View Show Diff Stats
  1. 42
    23
      CSS/etrange_decouverte.css
  2. 6
    1
      HTML/etrange_decouverte.html
  3. 14
    0
      JAVASCRIPT/etrange_decouverte.js

+ 42
- 23
CSS/etrange_decouverte.css View File 

@@ -50,7 +50,7 @@ body {
50 50 
                 font-size: 1.8vw;
51 51 
                 text-align: center;
52 52 
                 color: white;
53 
-                cursor: pointer;
53 
+                cursor:default;
54 54 
             }
55 55
56 56 
 
@@ -99,7 +99,6 @@ body {
99 99 
                     cursor: pointer;
100 100 
                     text-align: right;
101 101 
                     -moz-appearance: none;
102 
-                    content:'\f078';
103 102 
                 }
104 103
105 104 
                 #boisson:focus{
 
@@ -170,27 +169,6 @@ body {
170 169 
                 background-image: linear-gradient(to top, #BF0909 20%, black 150%);
171 170 
             }
172 171
173 
-            /* Test d'animation */
174 
-            @keyframes oscille {
175 
-                from {
176 
-                    transform: rotate(0);
177 
-                }
178 
-
179 
-                25% {
180 
-                    transform: rotate(8deg);
181 
-                }
182 
-
183 
-                75% {
184 
-                    transform: rotate(-8deg);
185 
-                }
186 
-
187 
-                to {
188 
-                    transform: rotate(0);
189 
-                }
190 
-            }
191 
-
192 
-
193 
-
194 172 
             footer{
195 173 
                 flex:0.5;
196 174 
                 display:flex;
 
@@ -208,3 +186,44 @@ body {
208 186 
                 #rights{
209 187 
                     margin-bottom:0;
210 188 
                 }
189 
+
190 
+#eyeBlock{
191 
+    z-index:1;
192 
+    width:100vw;
193 
+    height:95vh;
194 
+    position:absolute;
195 
+    display:flex;
196 
+    flex-direction: column;
197 
+    opacity:0;
198 
+}
199 
+
200 
+
201 
+    #supEye{
202 
+        flex:1;
203 
+        background-color:black;
204 
+    }
205 
+
206 
+    #eye{
207 
+        flex:1;
208 
+        background:radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 73.44%, black 100%);
209 
+    }
210 
+
211 
+    #infEye{
212 
+        flex:1;
213 
+        background-color:black;
214 
+    }
215 
+
216 
+    @keyframes blinking1 {
217 
+        100% {flex:0.4}
218 
+    }
219 
+
220 
+    @keyframes blinking2 {
221 
+        0% {flex:0.4}
222 
+        100% {flex:0.6}
223 
+    }
224 
+
225 
+    @keyframes blinking3 {
226 
+        0% {flex:0.6}
227 
+        100% {flex:0}
228 
+    }
229 
+

+ 6
- 1
HTML/etrange_decouverte.html View File 

@@ -11,6 +11,11 @@
11 11 
     <script defer type="text/javascript" src="../JAVASCRIPT/etrange_decouverte.js"></script>
12 12 
 </head>
13 13 
 <body>
14 
+    <div id="eyeBlock">
15 
+        <div id="supEye"></div>
16 
+        <div id="eye"></div>
17 
+        <div id="infEye"></div>
18 
+    </div>
14 19 
     <header>
15 20 
         <h1>Un étudiant étrange</h1>
16 21 
         <nav><a href='./menu.html'>Retourner au menu</a></nav>
 
@@ -21,7 +26,7 @@
21 26 
                 <p id="phrase" class="p1">Il est 21h30. Nous sommes en décembre.</p>
22 27 
                 <p id="phrase" >La nuit est tombée depuis bien longtemps.</p>
23 28 
                 <p id="phrase" >La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
24 
-                <p id="phrase" >Vous ressentez l'envie d'un petit <br/>
29 
+                <p id="phrase" class="select" >Vous ressentez l'envie d'un petit <br/>
25 30 
                 <select id="boisson">
26 31 
                     <option selected>...</option>
27 32 
                     <option>Café Vanille</option>

+ 14
- 0
JAVASCRIPT/etrange_decouverte.js View File 

@@ -4,6 +4,7 @@ let safeButton = document.getElementById("safeButton");
4 4 
 let boisson = document.getElementById("boisson");
5 5 
 let selectedDrink = document.getElementById("selectedDrink");
6 6 
 let text = document.getElementById("text")
7 
+let eyeBlock = document.getElementById("eyeBlock")
7 8
8 9 
 let counter_p = 1
9 10 
 let childs = []
 
@@ -15,6 +16,7 @@ selectedDrink.innerText = boisson.value;
15 16 
 //functions
16 17 
 function handleSelectChange(event){
17 18 
     selectedDrink.innerText = event.target.value;
19 
+    boisson.blur()
18 20 
 }
19 21
20 22 
 function handleDisplayText(event){
 
@@ -22,6 +24,11 @@ function handleDisplayText(event){
22 24 
         if (counter_p < text.childElementCount-1){
23 25 
             text.children[counter_p].style.cssText = "animation : fade 2s forwards"
24 26 
             counter_p += 1
27 
+            if (text.children[counter_p].className == "select"){
28 
+                eyeBlock.style.cssText = "z-index:0"
29 
+
30 
+            }
31 
+
25 32 
         } else {
26 33 
             text.children[counter_p].children[0].style.cssText = "animation : fade-reverse 2s forwards"
27 34 
             text.children[counter_p].children[1].style.cssText = "animation : none"
 
@@ -30,6 +37,13 @@ function handleDisplayText(event){
30 37 
     }
31 38 
 }
32 39
40 
+function handleDisplayEye(){
41 
+    eyeBlock.style.cssText = "z-index:1;animation:fade 3s forwards"
42 
+    eyeBlock.children[1].style.cssText = "animation: blinking1 1s forwards 1s,blinking2 1s forwards 2s,blinking3 1s forwards 3s"
43 
+
44 
+}
45 
+
33 46 
 //listeners
34 47 
 boisson.addEventListener("change",handleSelectChange)
35 48 
 document.addEventListener("keypress",handleDisplayText)
49 
+safeButton.addEventListener("click",handleDisplayEye)

Write Preview
Loading…
Cancel
Save