Animation fade sur le texte
This commit is contained in:
parent
d1a6a07cca
commit
2df1e99114
3 changed files with 53 additions and 25 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue