Animation fade sur le texte

This commit is contained in:
Baptiste Marty 2020-12-07 22:33:28 +01:00
parent d1a6a07cca
commit 2df1e99114
3 changed files with 53 additions and 25 deletions

View file

@ -45,6 +45,7 @@ body {
}
#text {
margin-top:4vh;
font-family: 'Special Elite', cursive;
font-size: 1.8vw;
text-align: center;
@ -55,17 +56,17 @@ body {
.phrase{
#phrase{
opacity:0;
margin:0.1vh 0vw 0.1vh 0vw;
}
#p1{
.p1{
animation: fade 2s forwards;
}
#p{
.p{
animation: fade 2s forwards;
}
@ -74,6 +75,11 @@ body {
100% {opacity:1}
}
@keyframes fade-reverse {
0% {opacity :1}
100% {opacity:0}
}
#p1{animation-delay:0.5s}
@ -90,6 +96,10 @@ body {
font-family: 'Special Elite', cursive;
background:black;
border:none;
cursor: pointer;
text-align: right;
-moz-appearance: none;
content:'\f078';
}
#boisson:focus{
@ -108,6 +118,14 @@ body {
}
#space{
font-size: 1vw;
font-family: 'Special Elite', cursive;
position:relative;
right:-20vw;
top:2.5vh;
}
#arrow{
height:2vh;
width:auto;
@ -125,7 +143,8 @@ body {
#buttons {
display: flex;
justify-content: space-around;
margin-top:5vh;
opacity:0;
}
.button {
@ -185,3 +204,7 @@ body {
#names{
margin : 0;
}
#rights{
margin-bottom:0;
}

View file

@ -18,22 +18,25 @@
<main id="main">
<section id="content">
<article id="text">
<p class="phrase" id="p1">Il est 21h30, nous sommes en décembre,</p>
<p class="phrase" >la nuit est tombée depuis 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" >Vous ressentez l'envie d'un petit
<p class="phrase" >
<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/>
<select id="boisson">
<option selected>...</option>
<option>Café Vanille</option>
<option>Café Noisette</option>
<option>Café Caramel</option>
<option>Potage</option>
<option>Thé vert</option>
<option>Whisky</option>
</select>
pour réviser la Thermo.</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>
<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>
<div id="arrowBlock">
<p id="space">Press space</p>
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
</div>
</article>

View file

@ -1,4 +1,5 @@
// select elements
let buttons = document.getElementById("buttons")
let safeButton = document.getElementById("safeButton");
let boisson = document.getElementById("boisson");
let selectedDrink = document.getElementById("selectedDrink");
@ -10,24 +11,25 @@ let childs = []
console.log(text.childNodes);
selectedDrink.innerText = boisson.value;
// for (let i=0;i<text.childNodes.length;i++){
// if (text.childNodes[i].className == "phrase"){
// childs += text.childNodes[i]
// }
// };
// console.log(childs);
//functions
function handleSelectChange(event){
selectedDrink.innerText = event.target.value;
}
function handleDisplayText(){
text.childNodes[1].setAttribute("id","p");
console.log(text.childNodes[1]);
function handleDisplayText(event){
if (event.keyCode == 32 || event.keyCode == 13){
if (counter_p < text.childElementCount-1){
text.children[counter_p].style.cssText = "animation : fade 2s forwards"
counter_p += 1
} else {
text.children[counter_p].children[0].style.cssText = "animation : fade-reverse 2s forwards"
text.children[counter_p].children[1].style.cssText = "animation : none"
buttons.style.cssText = "animation : fade 2s forwards"
}
}
}
//listeners
boisson.addEventListener("change",handleSelectChange)
text.addEventListener("click",handleDisplayText)
document.addEventListener("keypress",handleDisplayText)