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

EyeEffect first version

Browse source
This commit is contained in:
Baptiste Marty 2020-12-08 11:47:04 +01:00
parent 2df1e99114
commit 1572045928
3 changed files with 62 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
CSS/etrange_decouverte.css
View file

@ -50,7 +50,7 @@ body {
font-size: 1.8vw;
text-align: center;
color: white;
cursor: pointer;
cursor:default;
}
@ -99,7 +99,6 @@ body {
cursor: pointer;
text-align: right;
-moz-appearance: none;
content:'\f078';
}
#boisson:focus{
@ -170,27 +169,6 @@ 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);
}
}
footer{
flex:0.5;
display:flex;
@ -208,3 +186,44 @@ body {
#rights{
margin-bottom:0;
}
#eyeBlock{
z-index:1;
width:100vw;
height:95vh;
position:absolute;
display:flex;
flex-direction: column;
opacity:0;
}
#supEye{
flex:1;
background-color:black;
}
#eye{
flex:1;
background:radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 73.44%, black 100%);
}
#infEye{
flex:1;
background-color:black;
}
@keyframes blinking1 {
100% {flex:0.4}
}
@keyframes blinking2 {
0% {flex:0.4}
100% {flex:0.6}
}
@keyframes blinking3 {
0% {flex:0.6}
100% {flex:0}
}

7
HTML/etrange_decouverte.html
View file

@ -11,6 +11,11 @@
<script defer type="text/javascript" src="../JAVASCRIPT/etrange_decouverte.js"></script>
</head>
<body>
<div id="eyeBlock">
<div id="supEye"></div>
<div id="eye"></div>
<div id="infEye"></div>
</div>
<header>
<h1>Un étudiant étrange</h1>
<nav><a href='./menu.html'>Retourner au menu</a></nav>
@ -21,7 +26,7 @@
<p id="phrase" class="p1">Il est 21h30. Nous sommes en décembre.</p>
<p id="phrase" >La nuit est tombée depuis bien longtemps.</p>
<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>
<p id="phrase" >Vous ressentez l'envie d'un petit <br/>
<p id="phrase" class="select" >Vous ressentez l'envie d'un petit <br/>
<select id="boisson">
<option selected>...</option>
<option>Café Vanille</option>

14
JAVASCRIPT/etrange_decouverte.js
View file

@ -4,6 +4,7 @@ let safeButton = document.getElementById("safeButton");
let boisson = document.getElementById("boisson");
let selectedDrink = document.getElementById("selectedDrink");
let text = document.getElementById("text")
let eyeBlock = document.getElementById("eyeBlock")
let counter_p = 1
let childs = []
@ -15,6 +16,7 @@ selectedDrink.innerText = boisson.value;
//functions
function handleSelectChange(event){
selectedDrink.innerText = event.target.value;
boisson.blur()
}
function handleDisplayText(event){
@ -22,6 +24,11 @@ function handleDisplayText(event){
if (counter_p < text.childElementCount-1){
text.children[counter_p].style.cssText = "animation : fade 2s forwards"
counter_p += 1
if (text.children[counter_p].className == "select"){
eyeBlock.style.cssText = "z-index:0"
}
} else {
text.children[counter_p].children[0].style.cssText = "animation : fade-reverse 2s forwards"
text.children[counter_p].children[1].style.cssText = "animation : none"
@ -30,6 +37,13 @@ function handleDisplayText(event){
}
}
function handleDisplayEye(){
eyeBlock.style.cssText = "z-index:1;animation:fade 3s forwards"
eyeBlock.children[1].style.cssText = "animation: blinking1 1s forwards 1s,blinking2 1s forwards 2s,blinking3 1s forwards 3s"
}
//listeners
boisson.addEventListener("change",handleSelectChange)
document.addEventListener("keypress",handleDisplayText)
safeButton.addEventListener("click",handleDisplayEye)