Amélioration eye et réglages qq bugs
This commit is contained in:
parent
1572045928
commit
3c7f5de9d0
4 changed files with 60 additions and 31 deletions
|
|
@ -17,6 +17,7 @@ body {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
z-index:0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
|
|
@ -56,17 +57,13 @@ body {
|
|||
|
||||
|
||||
|
||||
#phrase{
|
||||
.phrase{
|
||||
opacity:0;
|
||||
margin:0.1vh 0vw 0.1vh 0vw;
|
||||
|
||||
}
|
||||
|
||||
.p1{
|
||||
animation: fade 2s forwards;
|
||||
}
|
||||
|
||||
.p{
|
||||
#p1{
|
||||
animation: fade 2s forwards;
|
||||
}
|
||||
|
||||
|
|
@ -90,15 +87,22 @@ body {
|
|||
}
|
||||
|
||||
#boisson{
|
||||
color:white;
|
||||
color:#086CA5;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 1.8vw;
|
||||
font-family: 'Special Elite', cursive;
|
||||
background:black;
|
||||
border:none;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
background-image: url("../Images/Arrow.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size:1vw;
|
||||
background-position-x: 0vw;
|
||||
background-position-y: 1vh;
|
||||
padding-left:1.2vw;
|
||||
}
|
||||
|
||||
#boisson:focus{
|
||||
|
|
@ -106,7 +110,7 @@ body {
|
|||
}
|
||||
|
||||
#boisson option{
|
||||
background:#494949;
|
||||
background:black;
|
||||
border:none;
|
||||
font: -moz-pull-down-menu;
|
||||
}
|
||||
|
|
@ -188,7 +192,6 @@ body {
|
|||
}
|
||||
|
||||
#eyeBlock{
|
||||
z-index:1;
|
||||
width:100vw;
|
||||
height:95vh;
|
||||
position:absolute;
|
||||
|
|
@ -201,29 +204,58 @@ body {
|
|||
#supEye{
|
||||
flex:1;
|
||||
background-color:black;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#eye{
|
||||
flex:1;
|
||||
background:radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 73.44%, black 100%);
|
||||
|
||||
}
|
||||
|
||||
.endText{
|
||||
opacity:0;
|
||||
flex:1;
|
||||
text-align: center;
|
||||
font-family: 'Special Elite', cursive;
|
||||
|
||||
}
|
||||
|
||||
#loose{
|
||||
font-size:3vw;
|
||||
}
|
||||
|
||||
#return {
|
||||
text-decoration: none;
|
||||
color: #494949;
|
||||
font-size:1.5vw
|
||||
}
|
||||
|
||||
#return:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#infEye{
|
||||
flex:1;
|
||||
background-color:black;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@keyframes blinking1 {
|
||||
100% {flex:0.4}
|
||||
100% {flex:0.3}
|
||||
}
|
||||
|
||||
@keyframes blinking2 {
|
||||
0% {flex:0.4}
|
||||
100% {flex:0.6}
|
||||
0% {flex:0.3}
|
||||
100% {flex:0.7}
|
||||
}
|
||||
|
||||
@keyframes blinking3 {
|
||||
0% {flex:0.6}
|
||||
0% {flex:0.7}
|
||||
100% {flex:0}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="eyeBlock">
|
||||
<div id="supEye"></div>
|
||||
<div id="supEye"><p class="endText" id="loose">Vous avez perdu !</p></div>
|
||||
<div id="eye"></div>
|
||||
<div id="infEye"></div>
|
||||
<div id="infEye"><a class="endText" id="return" href='./menu.html'>Recommencer l'aventure</a></div>
|
||||
</div>
|
||||
<header>
|
||||
<h1>Un étudiant étrange</h1>
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
<main id="main">
|
||||
<section id="content">
|
||||
<article id="text">
|
||||
<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" class="select" >Vous ressentez l'envie d'un petit <br/>
|
||||
<p class="phrase" id="p1">Il est 21h30. Nous sommes en décembre.</p>
|
||||
<p class="phrase">La nuit est tombée depuis bien longtemps.</p>
|
||||
<p class="phrase">La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
|
||||
<p class="phrase" id="select" >Vous ressentez l'envie d'un petit <br/>
|
||||
<select id="boisson">
|
||||
<option selected>...</option>
|
||||
<option>Café Vanille</option>
|
||||
|
|
@ -36,10 +36,10 @@
|
|||
<option>Whisky</option>
|
||||
</select>
|
||||
pour réviser la Thermo.</p>
|
||||
<p id="phrase" >Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p>
|
||||
<p id="phrase" >vous apercevez un étudiant qui se dirige tout droit
|
||||
<p id="phrase" >vers le sous sol !</p>
|
||||
<p id="phrase" >Bizarre à cette heure...</p>
|
||||
<p class="phrase">Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p>
|
||||
<p class="phrase">vous apercevez un étudiant qui se dirige tout droit
|
||||
<p class="phrase">vers le sous sol !</p>
|
||||
<p class="phrase">Bizarre à cette heure...</p>
|
||||
<div id="arrowBlock">
|
||||
<p id="space">Press space</p>
|
||||
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
|
||||
|
|
|
|||
BIN
Images/Arrow.png
Normal file
BIN
Images/Arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -24,11 +24,6 @@ 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"
|
||||
|
|
@ -38,9 +33,11 @@ function handleDisplayText(event){
|
|||
}
|
||||
|
||||
function handleDisplayEye(){
|
||||
eyeBlock.style.cssText = "z-index:1;animation:fade 3s forwards"
|
||||
console.log(eyeBlock.children[0].children[0]);
|
||||
eyeBlock.style.cssText = "z-index:1;animation:fade 2s forwards"
|
||||
eyeBlock.children[1].style.cssText = "animation: blinking1 1s forwards 1s,blinking2 1s forwards 2s,blinking3 1s forwards 3s"
|
||||
|
||||
eyeBlock.children[0].children[0].style.cssText = "animation:fade 1s forwards 4s"
|
||||
eyeBlock.children[2].children[0].style.cssText = "animation:fade 1s forwards 4.5s"
|
||||
}
|
||||
|
||||
//listeners
|
||||
|
|
|
|||
Loading…
Reference in a new issue