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

Défilement et lévitation du texte sur 'L'Union fait la force' OK

Browse source
This commit is contained in:
Florian Ehr 2020-12-08 23:01:00 +01:00
parent 3c7f5de9d0
commit a7b0c95c57
4 changed files with 67 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
CSS/aide_ami.css
View file

@ -51,31 +51,41 @@ body {
justify-content: space-around;
width: 33vw;
}
.textRotate1 {
font-size: 0.75vw;
transform: rotate(12deg);
animation: flotter 2s infinite;
.textWillAppear {
opacity: 0;
}
.questionWillAppear {
opacity: 0;
}
/* Animations des questions sur les côtés */
#question1 {
animation: levite 3s forwards infinite ease-in-out;
}
#question2 {
animation: levite 3s forwards infinite ease-in-out;
animation-delay: 1s;
}
#question3 {
animation: levite 3s forwards infinite ease-in-out;
animation-delay: 2s;
}
#question4 {
animation: levite 3s forwards infinite ease-in-out;
animation-delay: 3s;
}
@keyframes levite {
50% {transform: translate(0,-3vh);}
}
.textRotate2 {
transform: rotate(-10deg);
font-size: 1.2vw;
}
.textRotate3{
transform: rotate(-18deg);
font-size: 1vw;
}
@keyframes flotter {
50% {
transform: translate3D(0,-5vh,0);
}
to {
transform: translate3D(0,0,0);
}
@keyframes fade {
100% {opacity: 1;}
}
#text {

28
HTML/aide_ami.html
View file

@ -16,31 +16,23 @@
</header>
<main id="main">
<section id="content">
<aside id=leftQuestions>
<p class="textRotate1">Dois-je vraiment m'occuper de cette affaire ?</p>
<p class="textRotate2">C'était quand même bizarre d'être capuché dans le sous-sol</p>
<aside id="leftQuestions">
<div class="questionWillAppear"><p id="question1">Dois-je vraiment m'occuper de cette affaire ?</p></div>
<div class="questionWillAppear"><p id="question2">C'était quand même bizarre d'être capuché dans le sous-sol</p></div>
</aside>
<article id="text">
<p>
La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !
</p>
<p>
Vous avez passé une nuit mouvementée par des questionnements incessants
</p>
<p>
En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span>
</p>
<p>
Le lendemain, vous vous hâtez vers votre plus fidèle ami <input id="pseudoInput" type="text"/> pour tout lui expliquer.
</p>
<p class="textWillAppear">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p>
<p class="textWillAppear">Vous avez passé une nuit mouvementée par des questionnements incessants</p>
<p class="textWillAppear">En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span></p>
<p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <input id="pseudoInput" type="text"/> pour tout lui expliquer.</p>
</article>
<aside id="rightQuestions">
<p class="textRotate3">Peut-être devrais-je laisser tomber et oublier cette histoire</p>
<p class="textRotate1">Il me reste du taboulé pour demain midi au fait ?</p>
<div class="questionWillAppear"><p id="question3">Peut-être devrais-je laisser tomber et oublier cette histoire</p></div>
<div class="questionWillAppear"><p id="question4">Il me reste du taboulé pour demain midi au fait ?</p></div>
</aside>
</section>
<section id="buttons">
<button id="button1" class="button">Suivant</button>
<button id="button1" class="button" onclick="window.location.href = './aide_ami.html';">Suivant</button>
</section>
</main>
<footer>

2
HTML/couloir.html
View file

@ -24,7 +24,7 @@
</p>
</article>
<div id="buttons">
<button id="safeButton" class="button">Prendre une photo, vous en parlerez à quelqu'un plus tard</button>
<button id="safeButton" class="button" onclick="window.location.href = './aide_ami.html';">Prendre une photo, vous en parlerez à quelqu'un plus tard</button>
<button id="riskyButton" class="button">Attendre qu'ils rentrent, prendre son courage à deux mains, et s'aventurer jusqu'à cette salle</button>
</div>
</section>

23
JAVASCRIPT/aide_ami.js Normal file
View file

@ -0,0 +1,23 @@
let texte = document.getElementById("text");
let p_counter = 0;
let texts = document.getElementsByClassName("textWillAppear");
let questions = document.getElementsByClassName('questionWillAppear');
console.log(questions);
function makeNextTextAppear(event) {
if (event.keyCode == 13 || event.keyCode == 32) {
if(p_counter < 2) {
texts[p_counter].style.cssText = "animation: fade 2s forwards;";
}
if (p_counter >= 2 && p_counter < 6) {
questions[p_counter-2].style.cssText = "animation: fade 2s forwards;";
console.log(questions[p_counter-2].style.cssText);
}
if(p_counter >= 6 && p_counter < 8) {
texts[p_counter-4].style.cssText = "animation: fade 2s forwards;";
}
p_counter += 1;
}
}
document.addEventListener("keypress", makeNextTextAppear);