| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/www/Martine Nasa/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Martine In Space</title>
<link rel="stylesheet" type="text/css" href="css/styles2.css">
<link rel="icon" href="oeil_martine.png">
</head>
<body>
<!-- Création de la div "boule" pour que overflow hidden cache la boule de feu quand elle passe la limite a droite ou a gauche et non simplement quand elle sort de la div parallaxe. -->
<div id="boule">
<div id="contents">?</div>
<div id="parallaxe1" class="parallaxe">
<h1 id="youpi"><span id="h1_1">Martine</span></h1><h2 id="youpi2"><span id="h1_2">en mission pour la Nasa</span></h2>
</div>
<a href="index.html#parallaxe2" class="next" id="deux"><div></div></a>
<div id="parallaxe2" class="parallaxe">
<div id="orange">
<p id="an">
M
</p>
</div>
<div id="martine_div">
<img src="images/martine.svg" id="martine">
</div>
</div>
<a href="index.html#parallaxe3" class="next" id="deux"><div></div></a>
<div id="parallaxe3" class="parallaxe">
<img src="images/fireball.svg" id="fireball">
<h2 id="light">Lumière et distance</h2>
<div id="contain1">
<div id="contain">
<p>Dans l'espace, la lumière doit parcourir une distance monumentale avant de pouvoir atteindre notre planète et nos pupilles, en un temps donné, sous risque de ne plus être assez intense...</p>
<div id="buts">
<div id="shesh">
<label for="distance">Distance (milions de km) :</label>
<input type="range" id="distance" min="1" max="100" step="1" value="1">
</div>
<div id="sheesh">
<label for="luminosity">Luminosité (cd) :</label>
<input type="range" id="luminosity" min="1" max="100" step="1" value="1">
</div>
</div>
</div>
<div class="canva_container">
<img src="images/courbe.png" id="courbe">
</div>
</div>
</div>
<a href="index.html#parallaxe4" class="next" id="deux"><div></div></a>
<div id="parallaxe4" class="parallaxe">
<h2> Simulation</h2>
<div id="conteneur">
<div id="rouge">
<img src="images/soleil.png" id="soleil" class="lumi">
</div>
<div id="vert"><div>
<h3 id="siu">Distance...</h3>
<h3 id="siu2">Luminosité...</h3>
<h3><i>(Cliquez sur le soleil)</i></h3>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script type="text/javascript">
$('#contents').mouseover(function(){
setTimeout(function(){
$('#contents').text("Copyrigths © Marie-Lou Allain et Léo Morcet")
},200)
})
$('#contents').mouseleave(function(){
$(this).text("?")
})
// vaiables SOLEIL
let dd=0;
let ll=200;
let ok =false;
let mais = false;
//MARTINE (text en 1ere page)
$('#h1_1').animate({
backgroundPositionY: '-200px'
}, 2000);
//au declenchement de la page, le background de h1 défile légérement.
var image = $('#martine');
//boucle pour les animations liées au scroll (fireball : je n'ai pas reussi avec jquery) + texte + compteur soleil
let fireball=document.getElementById('fireball');
let p2 = $('#parallaxe2');
let p3 = $('#parallaxe3');
let p4 = $('#parallaxe4');
setInterval(boucle,20);
function boucle () { //boucle qui se déclenche tous les 20 centiemes de secondes permettant de gérer des evenements qui évoluent au fil du temps danhs la page (exemple : scroll, ou les compteurs)
function resetImage() {
$('#soleil').css({
width:'500px',
left:'0',
top:'0'
});
}
$('#soleil').click(function(){
$("#soleil").css({
width: 0
});
ok=true; // bool permettant de déclencher les compteurs dd et ll qui indiquent la distance et l'intensite.
})
$(window).scroll(function(){
if (window.scrollY >= p3p) {
//on peut laisser vide ici : la fonction s'éxecute lors du click sur le soleil, or, cet evenement n'est possible que si le soleil est visible, donc la condition est de base validée, je laisse quand même cette ligne de code pour l'utilisation du else() pour reset la position et les paramètres permettant de mesurer la distance / intensite lumineuse.
} else {
resetImage();
//variables dd = distance et ll= intensite lumineuse. Attention, aucun calcul n'est effectué et la relation est fausse, c'est seulement pour l'exemple.
dd=0;
ll=200;
ok =false;
}
})
let pos = $(window).scrollTop();
//on stock la valeur de scroll dans une variable -> très pratique pour toutes mes animations.
let p2p = $('#parallaxe2').offset().top;
let p3p = $('#parallaxe3').offset().top;
let p4p = $('#parallaxe4').offset().top; // on définit des variables qui contiennent la position des éléments en fonctions du scroll : aide pour la responsivité : plus d'infos dans le rapport
$('#h1_1').css({
backgroundPositionY: pos - 200 +'px'
});
//background de H1 qui évolu en fonction du scroll
if(pos>p2p+200){
image.css({
width:'0%',
rotate: '145deg'
})
}else{
image.css({
width:'80%',
rotate: '0deg'
})
}
//si le scroll est supérieur au parallaxe2, on déclenche l'animation de image(martine), sinon, elle revient à la normal
if(pos>p2p&&pos<p3p){
$('#light').css({
right:'10%'
});
}else{
$('#light').css({
right:'0px'
});
}
//de même pour light, qu'on déclenche seulement entre parallaxe2 et 3
if(ok){
if(dd<200){
dd++;
}
if(ll>0){
ll--;
}
}
//si le booléen est vrai, on déclenche les compteurs, qu'on va affecter au texte en html gràce aux deux lignes juste en dessous.
$('#siu').text('Distance = ' + dd + ' km');
$('#siu2').text('Intensité Lumineuse = ' + ll + ' cd');
//animation de la fireball (metéorite)
//en dessous de parallaxe2, la fireball revient à sa position de départ, avec un effet de transparence : opacity : 0 pour ne pas que ce soit visible.
if(pos<p2p){
fireball.animate({
opacity:'0'
},1000);
fireball.animate({
top:'-50%',
right:'-20%'
},5000);
mais=false;
}
//entre les parallaxe 2 et 3, elle se rend à une certaine position
if(pos>p2p&&pos<p3p&&!mais){
fireball.animate({
opacity:'1',
top:'0px',
right:'15%'
},5000);
}
// au dessus de parallaxe3, elle continue sa course vers la gauche
if(pos>p3p){
mais=true;
fireball.animate({
top:'300%',
right:'150%'
},16000);
}
//effet de texte qui s'ecrit tout seul
//on définit une fonction qu'on va répéter tous les 500 centiemes de secondes avec un interval)
let interval = setInterval(() => {
let texte = texteComplet.slice(0, index); //en partant du texte récupéré en dessous, on crée une nouvelle variable qui récupère le texte lettre par lettre.
$('#an').text(texte); //on affecte ensuite ce résultat dans notre html, sur notre élément texte de base (#an)
index=index+0.5;
//ajout de conditions -> si le parcours de l'élément est terminé, alors
if (index > texteComplet.length) {
$('#an').append(go); // on affecte au text un élément définit en dessous (un span) qui va permettre de passer au texte suivant. Au départ, son id est suite.
clearInterval(interval);
$('#suite').click(function(){
console.log("yeh")
index=0; //permet de redéclencher l'animation
texteComplet ="Je travaille à la Nasa pour étudier l'espace."; // le texte sera différent
$(this).attr('id','suite2'); //on change l'attribut suite du span pour que à la fin de l'animation du text, le bouton n'ai pas le même effet: et ne raffiche pas le même texte.
});
$('#suite2').click(function(){
console.log("yeh")
index=0;
texteComplet ="Embarque avec moi pour découvrir de nouvelles choses !";
$(this).attr('id','suite3');
$(this).text('');// de base, le span contien >, mais ici, comme après ce click, cela affichera la dernière phrase du text, on n'a pas besoin de clicker sur "sutie", vu qu'il n'y aura pas de suite, alors on met vide.
});
}
}, 500);
// console.log(pos);
if(pos>1200||pos<100){ // si on voit pas martine, le contenu du texte est reset au debut
index=0;
texteComplet ="Moi, c'est Martine la martienne !";
$('#suite3').attr('id','suite');
$('#suite3').text('>');
$('#suite2').attr('id','suite');
$('#suite2').text('>');
$('#suite').text('>');
}
}
let index=0;
const go = $('<span>').attr('id', 'suite').text('>');
var texteComplet = "Moi, c'est Martine la martienne !";
</script>
</html>