Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="heajvsesiaj"> HEAJ OR ESIAJ !? <br /> OH NEVERMIND....</div>
				<p class="hobbyplus" id="hscout">Le Scoutisme</p>
				<p class="hobbyplus" id="hcuisine">La cuisine</p>
				<p class="hobbyplus" id="hserie">Les séries télévisées</p>
				<p class="hobbyplus" id="hlicorne">Les licornes</p>
				<p class="hobbyplus" id="hfamille">Ma famille</p>
				<p class="hobbyplus" id="hprof_esiaj">Tous les professeurs de l'ESIAJ</p>
				<p class="hobbyplus" id="hfeu">Faire du feu</p>
				<p class="hobbyplus" id="hdeguiser">Me déguiser en truc Farfelus</p>
				<p class="hobbyplus" id="hfb">Avoir une notification Facebook</p>
				<p class="hobbyplus" id="hjavascript">Réussir un code Javascript du premier coup</p>
				<p class="hobbyplus" id="htwitter">Etre retweeté</p>
				<p class="hobbyplus" id="hmanger">Manger quelque chose de bon que ma maman a préparé</p>
				<p class="hobbyplus" id="hgrdmere">Parler de la vie d'antan avec ma grand-mère</p>
				<p class="hobbyplus" id="hbiere">Boire une bière en terrasse au soleil avec un ami que tu n'as plus vu depuis longtemps et avec qui tu refais le monde tout en analysant les passants dans la rue. Et ne pas bouger de sa chaise jusqu'au couché du soleil. Sauf si tu dois aller aux toilettes. Etc</p>
				<p class="hobbyplus" id="hlorem">J'aime traduire des Lorem Ipsum avant d'aller dormir.</p>
				<p class="hobbyplus" id="hgrille">Tracer des grilles sur ma table pour aligner mes marqueurs</p>
				<p class="hobbyplus" id="hliste">Faire des listes stupides...</p>
<!-- Petit martien qui bouge partout -->
		<img id="martien" src="https://mamboleoo.be/oldPortfolio/img/martien.png" alt="Coucou, je suis Verto le petit Martien " onmouseover="martiens();" />

	<div id="sidebar">
		<a href="#logo" id="index"><img src="https://mamboleoo.be/oldPortfolio/img/menu/index.png" alt="Retourner tout en haut" /></a>
		<div id="browser">
			<img src="https://mamboleoo.be/oldPortfolio/img/cross.png" alt="Quitter cette fenêtre" id="quit_browser" onclick="browser();" />
		</div>
		<a href="#presentation" id="menu1" onmouseover="menu1();" onMouseOut="menu1_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu1.png" alt="Accès au CV"/></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu1_over.png" alt="Faisons connaissance" id="menu1_detail" class="menu_detail" />

		<a href="#competences" id="menu2" onmouseover="menu2();" onMouseOut="menu2_out();"><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu2.png" alt="Accès aux compétences" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu2_over.png" alt="Mes compétences en informatiques" id="menu2_detail" class="menu_detail" />

		<a href="#hobbys" id="menu3" onmouseover="menu3();" onMouseOut="menu3_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu3.png" alt="Accès au hobbys" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu3_over.png" alt="Mes passions dans la vie" id="menu3_detail" class="menu_detail" />

		<a href="#wyoutube" id="menu4a" onmouseover="menu4a();" onMouseOut="menu4a_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4a.png" alt="Accédez à une vidéo" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4a_over.png" alt="Cliquez ici pour voir une superbe vidéo" id="menu4a_detail" class="menu_detail" />

		<a href="#wplane" id="menu4b" onmouseover="menu4b();" onMouseOut="menu4b_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4b.png" alt="Accédez à une vidéo" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4b_over.png" alt="Cliquez ici pour voir une superbe vidéo" id="menu4b_detail" class="menu_detail" />

		<a href="#wcercle" id="menu4c" onmouseover="menu4c();" onMouseOut="menu4c_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4c.png" alt="Accédez à une vidéo" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu4c_over.png" alt="Cliquez ici pour voir une superbe vidéo" id="menu4c_detail" class="menu_detail" />

		<a href="#hihilolol" id="menu5" onmouseover="menu5();" onMouseOut="menu5_out();" ><img src="https://mamboleoo.be/oldPortfolio/img/menu/menu5.png" alt="Contactez-moi" /></a>
		<img src="https://mamboleoo.be/oldPortfolio/img/menu/menu5_over.png" alt="S'il vous plait, contactez-moi" id="menu5_detail" class="menu_detail" />
	</div>
	
 		<p onclick="afficher_grille();" id="bouton_grille"></p>
		<div id="grille"></div>

	<div id="space">

		<a href="#" id="logo"><img src="https://mamboleoo.be/oldPortfolio/img/logo.png" alt="Back To ChildHood"></a>	

		<div id="presentation">
			J'ai 20 ans et j'habite à Bruxelles. Au fait, je m'appelle Louis Hoebregts.
		</div>

		<div id="competences">
			Photoshop, Illustrator, InDesign.
			HTML, CSS, Javascript.
			<div class="info_en_plus" id="info_code" onmouseover="info_code();" onMouseOut="info_code_out();">Je code avec Sublime Text 2 </div>
		</div>

		<div id="hobbys">
			Théatre, Natation, Photographie, Cinéma, Voyages, Bières.
			<div class="info_en_plus" id="info_theatre" onmouseover="info_theatre();" onMouseOut="info_theatre_out();">J'aime beaucoup beaucoup le théatre</div>
			<div class="info_en_plus" id="info_natation" onmouseover="info_natation();" onMouseOut="info_natation_out();">J'aime beaucoup beaucoup la natation</div>
			<div class="info_en_plus" id="info_photo" onmouseover="info_photo();" onMouseOut="info_photo_out();">J'aime beaucoup beaucoup les photos macros</div>
			<div class="info_en_plus" id="info_voyage" onmouseover="info_voyage();" onMouseOut="info_voyage_out();">J'aime beaucoup beaucoup les voyages</div>
			<div class="info_en_plus" id="info_biere" onmouseover="info_biere();" onMouseOut="info_biere_out();">J'aime beaucoup beaucoup les voyages</div>

			<div  id="info_plus" onClick="info_plus();" >
			</div>
		</div>

		

		<div class="deco_sky" id="moon"> Ceci est une planète </div>
		<div class="deco_sky" id="mars"> Ceci est une planète </div>
		<div class="deco_sky" id="venus"> Ceci est une planète </div>

		<img src="https://mamboleoo.be/oldPortfolio/img/sky/rocket.png" alt="Une belle fusée" id="rocket" class="flying_element" />

		<img src="https://mamboleoo.be/oldPortfolio/img/sky/asteroid.png" alt="Un bel astéroide" id="asteroid" />
		<img src="https://mamboleoo.be/oldPortfolio/img/sky/asteroid.png" alt="Un bel astéroide" id="asteroid2" />

	</div>

	<div id="sky">

		<a href="#" target="_blank" id="wyoutube" class="works"></a>
		<a href="#" target="_blank" id="wplane" class="works"></a>
		<a href="" target="_blank" id="wcercle" class="works"></a>

 		<div class="deco_sky" id="cloud1"></div>
		<div class="deco_sky" id="cloud2"></div>
		<div class="deco_sky" id="cloud3"></div>
		<div class="deco_sky" id="cloud4"></div>
		<div class="deco_sky" id="cloud5"></div>
		<div class="deco_sky" id="cloud6"></div>
		<div class="deco_sky" id="cloud7"></div>
		<div class="deco_sky" id="cloud8"></div>
		<div class="deco_sky" id="cloud9"></div>
		<div class="deco_sky" id="cloud10"></div>
		<div class="deco_sky" id="cloud11"></div>
		<div class="deco_sky" id="cloud12"></div>
		<div class="deco_sky" id="cloud13"></div>
		<div class="deco_sky" id="cloud14"></div>

		<div class="deco_sky" id="cloud15"></div>
		<div class="deco_sky" id="cloud16"></div>
		<div class="deco_sky" id="cloud17"></div>
		<div class="deco_sky" id="cloud18"></div>
		<div class="deco_sky" id="cloud19"></div>
		<div class="deco_sky" id="cloud20"></div>
		<div class="deco_sky" id="cloud21"></div>
		<div class="deco_sky" id="cloud22"></div>
		<div class="deco_sky" id="cloud23"></div>
		<div class="deco_sky" id="cloud24"></div>
		<div class="deco_sky" id="cloud25"></div>
		<div class="deco_sky" id="cloud26"></div>
		<div class="deco_sky" id="cloud27"></div>
		<div class="deco_sky" id="cloud28"></div>

		<img src="https://mamboleoo.be/oldPortfolio/img/sky/avion.png" alt="Un beau boeing" id="plane" class="element_volant" />

		<img src="https://mamboleoo.be/oldPortfolio/img/sky/helico.png" alt="Un bel hélicoptère" id="helico"  />
		<img src="https://mamboleoo.be/oldPortfolio/img/sky/para.png" alt="Un beau parachutiste" id="para" class="element_volant" />

		<img src="https://mamboleoo.be/oldPortfolio/img/sky/bird1.png" alt="Une belle heuuu Colombe?" id="bird1" class="element_volant" />
		<img src="https://mamboleoo.be/oldPortfolio/img/sky/bird2.png" alt="Un beau grand oiseau bleu" id="bird2" class="element_volant" />

 						<img src="https://mamboleoo.be/oldPortfolio/img/sky/paper_plane.png" alt="Avion en Papier" id="paper_plane" />

		<img src="https://mamboleoo.be/oldPortfolio/img/maison.png" alt="Ceci est ma maison, plus ou moins" id="maison" />
		<a href="" target="_blank"><img src="https://mamboleoo.be/oldPortfolio/img/mail.png" alt="Cliquez ici pour me contacter" id="mail" /></a>
		<div id="hihilolol">
		</div>
	</div>
	<div id="earth">
		<a href="#"><img src="https://mamboleoo.be/oldPortfolio/img/merci_earth.png" alt="Accéder à la page des Merci" id="merci_petit" /></a>
	</div>
              
            
!

CSS

              
                html, body{
	height: 100%;
	width: 100%;
}
body{
		overflow-x : hidden;

}

#logo{
	position: relative;
	display: block;
	margin: 0 auto;
	z-index: 1000;
	height: 250px;
	width: 464px;
}

#martien{
		position: absolute;
		top: 8%;
		left: 20%;
		z-index: 2500;
}

#martien:hover{
	cursor: pointer
}
#sidebar{
	position: fixed;
	width: 101px;
	height: 350px;
	right: 1%;
	top: 100px;
	background: url("https://mamboleoo.be/oldPortfolio/img/menu/menu.png");
	z-index: 1500;
}
	#sidebar a{
		display: block;
		position: absolute;
		left: 10px;
		opacity: 0;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	#sidebar #index{
		top: 3px;
		left: 9px;
	}
	#sidebar a:hover{
		opacity: 1;
	}
	#sidebar #menu1{
		top: 69px;
		left: 33px;
	}
	#sidebar #menu2{
		top: 94px;
		left: 34px;
	}
	#sidebar #menu3{
		top: 118px;
		left: 37px;
	}
	#sidebar #menu4a{
		top: 146px;
		left: 30px;
	}
	#sidebar #menu4b{
		top: 174px;
		left: 32px;
	}
	#sidebar #menu4c{
		top: 199px;
		left: 33px;
	}
	#sidebar #menu5{
		top: 233px;
		left: 35px;
	}

	#sidebar .menu_detail{
		display: none;
		position: absolute;
		left: -400px;
		top: 50px;
		z-index: 3000;
	}

#browser{
	display: none;
}
	#browser #quit_browser{
		display:none;
	}

/*Bouton qui permet d'afficher la grille*/
#bouton_grille{
	position: fixed;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	background-color: red;
	border-radius: 50px;
	z-index: 2100;
	background: url("https://mamboleoo.be/oldPortfolio/img/button_grille.png");
}
	#bouton_grille:hover{
		cursor: pointer;
	}
/*CSS qui concerne la grille*/
#grille{
	position: absolute;
	height: 4500px;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	background: rgba();
	z-index: 0;
	background: url("https://mamboleoo.be/oldPortfolio/img/grille.png");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#space{
	width: 100%;
	height: 1400px;
	position: relative;

	background: #000000 url("https://mamboleoo.be/oldPortfolio/img/bg_space.png") 0 0 repeat fixed;

	text-align: center;

	z-index: 150;

	overflow: hidden;
}

	#space #presentation{
		width: 800px;
		height: 459px;
		z-index: 1400;

		position: relative;
		margin: 0 auto;

		text-indent: -99999px;
		background: url("https://mamboleoo.be/oldPortfolio/img/Me.png");
		background-repeat: no-repeat;

	}
	#space #competences{
		width: 820px;
		height: 319px;
		z-index: 1400;

		position: relative;
		margin: 0 auto;

		text-indent: -99999px;
		background: url("https://mamboleoo.be/oldPortfolio/img/competences.png");
		background-repeat: no-repeat;
	}
	.info_en_plus{
		z-index: 1420;

		position: relative;
		margin: 0 auto;
		text-indent: -99999px;
		background-repeat: no-repeat;
		opacity: 0;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
		#space #competences #info_code{
			width: 240px;
			height: 200px;
			right: -130px;
			top: 50px;

		}
	#space #hobbys{
		width: 820px;
		height: 319px;
		z-index: 1400;

		position: relative;
		margin: 0 auto;

		text-indent: -99999px;
		background: url("https://mamboleoo.be/oldPortfolio/img/hobby.png");
		background-repeat: no-repeat;
	}
		#space #hobbys #info_theatre{
			width: 220px;
			height: 50px;
			left: -240px;
			top: 50px;
		}
		#space #hobbys #info_natation{
			width: 260px;
			height: 50px;
			left: -230px;
			top: 70px;
		}
		#space #hobbys #info_photo{
			width: 180px;
			height: 50px;
			left: 20px;
			top: -50px;
		}
		#space #hobbys #info_voyage{
			width: 200px;
			height: 50px;
			left: 240px;
			top: -100px;
		}
		#space #hobbys #info_biere{
			width: 200px;
			height: 50px;
			left: 240px;
			top: -100px;
		}
		#space #hobbys #info_plus{
			position: absolute;
			width: 100px;
			height: 105px;
			bottom: 90px;
			right: -15px;
			background: url("https://mamboleoo.be/oldPortfolio/img/plouks.png");
			z-index: 1400;
		}
			#space #hobbys #info_plus:hover{
				cursor: pointer;
			}

		.hobbyplus{
      pointer-events:none;
			position: absolute;
			-webkit-transition: all 0.6s ease-in-out;
			-moz-transition: all 0.6s ease-in-out;
			-o-transition: all 0.6s ease-in-out;
			transition: all 0.6s ease-in-out;
			color: white;
			font-family: "Times New Roman";
			font-size: 2em;
			background: rgba(0,0,0,0.8);
			z-index: -10000;
			opacity: 0;
			top: 1300px;
			left: 50%;
		}




#sky{
	width: 100%;
	height: 2800px;
	position: relative;

	background: #73F4F4 url("https://mamboleoo.be/oldPortfolio/img/bg_sky.png") 0 0 repeat fixed;

	text-align: center;

	overflow: hidden;
}
	#sky #hihilolol{
		position: absolute;
		z-index: -1000;
		width: 100%;
		height: 0%;
	}
	#sky .works{
		position: absolute;
		display: block;
		z-index: 500;
		-webkit-transition: all 0.8s linear;
		-moz-transition: all 0.8s linear;
		-o-transition: all 0.8s linear;
		transition: all 0.8s linear;
		}
	#sky #wyoutube{
		width: 300px;
		height: 259px;
		top: 5%;
		left: 15%;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/youtube.png") no-repeat;

	}
	#sky #wyoutube:hover{
		cursor : pointer;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/youtube2.png");
	}
	#sky #wplane{
		width: 400px;
		height: 319px;
		top: 23%;
		right: 20%;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/plane2.png") no-repeat;

	}
	#sky #wplane:hover{
		cursor : pointer;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/plane.png");
	}
	#sky #wcercle{
		width: 500px;
		height: 466px;
		top: 40%;
		left: 0%;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/cercle.png") no-repeat;

	}
	#sky #wcercle:hover{
		cursor : pointer;
		background: url("https://mamboleoo.be/oldPortfolio/img/works/cercle2.png");
	}

#earth{
	width: 100%;
	height: 300px;
	position: relative;

	background: #73F4F4 url("https://mamboleoo.be/oldPortfolio/img/bg_earth.png")  0 repeat fixed;
	background-size: cover;
	text-align: center;

	overflow: hidden;
}
	#earth #merci_petit{
		position: relative;
		top: 50px;
	}



.deco_sky{
	position: absolute;
	width: 100%;
	height: 2800px;
	top: 0;
    margin: 0 auto;
    padding: 0;
    z-index: 200;
    text-indent: -9999px;
}

.flying_element{
	position: absolute;
	z-index: 50;
}


#heajvsesiaj{
	width: 100%;
	height: 4500px;
	padding-top: 100px;
	position: absolute;
	font-size: 4em;
	color: red;
	text-align: center;
	background-color: black;
	z-index: 15000;
	line-height: 4em;
	display: none;
}

@-webkit-keyframes rotation1 {
	from{left: -10%;}
	to{left: 100%;}
}
@-webkit-keyframes rotation2 {
	from{left: 100%;}
	to{left: -10%;}
}
@-moz-keyframes rotation1 {
	from{left: -10%;}
	to{left: 100%;}
}
@-moz-keyframes rotation2 {
	from{left: 100%;}
	to{left: -10%;}
}
@keyframes rotation1 {
	from{left: -10%;}
	to{left: 100%;}
}
@keyframes rotation2 {
	from{left: 100%;}
	to{left: -10%;}
}

@-webkit-keyframes move_paper_plane {
  0% {
        right: 0;
        top: 1600px;
        -webkit-transform:rotate(-30deg);
    }
  15% {
        right: 20%;
        -webkit-transform:rotate(-30deg);
    }
  35% {
        right: 30%;
        -webkit-transform:rotate(200deg);
    }
  45% {
        right: 40%;
        -webkit-transform:rotate(330deg);
    }
  100% {
        right: 110%;
        top: 1800px;
        -webkit-transform:rotate(330deg);
    }
}

@-moz-keyframes move_paper_plane {
  0% {
        right: 0;
        top: 1600px;
        -moz-transform:rotate(-30deg);
    }
  15% {
        right: 20%;
        -moz-transform:rotate(-30deg);
    }
  35% {
        right: 30%;
        -moz-transform:rotate(200deg);
    }
  45% {
        right: 40%;
        -moz-transform:rotate(330deg);
    }
  100% {
        right: 110%;
        top: 1800px;
        -moz-transform:rotate(330deg);
    }
}

@keyframes move_paper_plane {
  0% {
        right: 0;
        top: 1600px;
        transform:rotate(-30deg);
    }
  15% {
        right: 20%;
        transform:rotate(-30deg);
    }
  35% {
        right: 30%;
        transform:rotate(200deg);
    }
  45% {
        right: 40%;
        transform:rotate(330deg);
    }
  100% {
        right: 110%;
        top: 1800px;
        transform:rotate(330deg);
    }
}

@-webkit-keyframes bird1 {
	from{right: -10%;}
	to{right: 110%;}
}
@-moz-keyframes bird1 {
	from{right: -10%;}
	to{right: 110%;}
}
@keyframes bird1 {
	from{right: -10%;}
	to{right: 110%;}
}

@-webkit-keyframes bird2 {
	from{left: -10%;}
	to{left: 110%;}
}
@-moz-keyframes bird2 {
	from{left: -10%;}
	to{left: 110%;}
}
@keyframes bird2 {
	from{left: -10%;}
	to{left: 110%;}
}

		#space #moon{
			background: url("https://mamboleoo.be/oldPortfolio/img/sky/moon.png") 5% 270px no-repeat fixed;
		}
		#space #mars{
			background: url("https://mamboleoo.be/oldPortfolio/img/sky/mars.png") 75% 650px no-repeat fixed;
		}
		#space #venus{
			background: url("https://mamboleoo.be/oldPortfolio/img/sky/venus.png") 20% 800px no-repeat fixed;
		}
		#space #rocket{
			bottom: -50px;
			left: 80%;
			z-index: 300;
		}

		#space #asteroid{
			position: absolute;
			top: 120px;
			left: 0px;
			opacity: .7;
			-webkit-animation-name: rotation1;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-webkit-animation-duration: 20s;
			-moz-animation-name: rotation1;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-moz-animation-duration: 20s;
			animation-name: rotation1;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-duration: 20s;
		}
		#space #asteroid2{
			position: absolute;
			top: 800px;
			left: 0px;
			opacity: .5;
			-webkit-animation-name: rotation2;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-webkit-animation-duration: 10s;
			-moz-animation-name: rotation2;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-moz-animation-duration: 10s;
			animation-name: rotation2;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-duration: 10s;
		}


	#sky #cloud1{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud1.png") 10% 50px no-repeat ;
	}
	#sky #cloud2{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud2.png") 80% 150px no-repeat ;
	}
	#sky #cloud3{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud3.png") 25% 350px no-repeat ;
	}
	#sky #cloud4{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud4.png") 40% 480px no-repeat ;
	}
	#sky #cloud5{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud5.png") 90% 830px no-repeat ;
	}
	#sky #cloud6{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud6.png") 5% 700px no-repeat ;
	}
	#sky #cloud7{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud7.png") 80% 520px no-repeat ;
	}
	#sky #cloud8{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud5.png") 23% 900px no-repeat ;
	}
	#sky #cloud9{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud6.png") 17% 1000px no-repeat ;
	}
	#sky #cloud10{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud2.png") 35% 1150px no-repeat ;
	}
	#sky #cloud11{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud1.png") 76% 1250px no-repeat ;
	}
	#sky #cloud12{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud3.png") 35% 1150px no-repeat ;
	}
	#sky #cloud13{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud4.png") 76% 1250px no-repeat ;
	}
	#sky #cloud14{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud7.png") 66% 1250px no-repeat ;
	}

	#sky #cloud15{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud1.png") 20% 1300px no-repeat ;
	}
	#sky #cloud16{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud2.png") 70% 1378px no-repeat ;
	}
	#sky #cloud17{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud3.png") 30% 1469px no-repeat ;
	}
	#sky #cloud18{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud4.png") 60% 1493px no-repeat ;
	}
	#sky #cloud19{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud5.png") 72% 1537px no-repeat ;
	}
	#sky #cloud20{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud6.png") 63% 1673px no-repeat ;
	}
	#sky #cloud21{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud7.png") 3% 1759px no-repeat ;
	}
	#sky #cloud22{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud5.png") 76% 1834px no-repeat ;
	}
	#sky #cloud23{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud6.png") 96% 1897px no-repeat ;
	}
	#sky #cloud24{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud2.png") 26% 1930px no-repeat ;
	}
	#sky #cloud25{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud1.png") 73% 1990px no-repeat ;
	}
	#sky #cloud26{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud3.png") 49% 2170px no-repeat ;
	}
	#sky #cloud27{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud4.png") 90% 2230px no-repeat ;
	}
	#sky #cloud28{
		background: url("https://mamboleoo.be/oldPortfolio/img/sky/cloud7.png") 37% 2370px no-repeat ;
	}

	#sky .element_volant{
	position: absolute;
	z-index: 50;
	}
	#sky #plane{
	top: 200px;
	right: -900px;
	}
	#helico{
	top: 800px;
	left: -380px;
	z-index: 80;
	position : absolute;
	}
	#sky #para{
	top: 880px;
	left: 450px;
	z-index: 50;
	display: none;
	}

	#sky #paper_plane{
	width: 150px;
	position: absolute;
	top: 200px;
	z-index: 1000;
	-webkit-transform-origin: top right;
	-moz-transform-origin: top right;
	transform-origin: top right;


	-webkit-animation-name: move_paper_plane;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 8s;

	-moz-animation-name: move_paper_plane;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-moz-animation-duration: 8s;

	animation-name: move_paper_plane;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 8s;
	}

	#sky #bird1{
		top: 1200px;
		right: 0;

	-webkit-animation-name: bird1;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 14s;

	-moz-animation-name: bird1;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-moz-animation-duration: 14s;

	animation-name: bird1;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 14s;
	}

	#sky #bird2{
		top: 1800px;
		right: 0;

	-webkit-animation-name: bird2;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 8s;

	-moz-animation-name: bird2;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-moz-animation-duration: 8s;

	animation-name: bird2;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 8s;
	}

	#sky #maison{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1300;
	}
	#sky #mail{
		position: absolute;
		bottom: 20px;
		left: 0;
		z-index: 1350;
	}
              
            
!

JS

              
                //Plugin JQuery ScrollTo
  $(document).ready(function()
        {
                $('body').localScroll({
                   target:'body',
                   duration:6000
                });
                
        });

//Recherche hauteur du navigateur
var heightnav;
function tophouse(){
        heightnav = window.innerHeight;
        heightnav = 2800 - heightnav;
        document.getElementById("hihilolol").style.top = heightnav + "px";
}

//Plugin Jquery Parallax
$(document).ready(function(){           
        $('#space').parallax("0", 1400, 0.08, true);

        $('#moon').parallax("5%", 3250, 0.6, true);
        $('#mars').parallax("75%", 3300, 1.3, true);
        $('#venus').parallax("20%", 3200, 2, true);


        $('#cloud1').parallax("10%", 4200, 0.7, true);
        $('#cloud2').parallax("80%", 4000, 4, true);
        $('#cloud3').parallax("25%", 4300, 2.5, true);
        $('#cloud4').parallax("40%", 4200, 1, true);
        $('#cloud5').parallax("90%", 4400, 3, true);
        $('#cloud6').parallax("5%", 3900, 1.9, true);
        $('#cloud7').parallax("23%", 5000, 4, true);
        $('#cloud8').parallax("56%", 3500, .9, true);
        $('#cloud9').parallax("17%", 3500, 1.2, true);
        $('#cloud10').parallax("35%", 4800, 3, true);
        $('#cloud11').parallax("76%", 3900, 0.3, true);
        $('#cloud12').parallax("16%", 4800, 1.1, true);
        $('#cloud13').parallax("79%", 5600, 0.7, true);
        $('#cloud14').parallax("79%", 4300, 0.9, true);

        $('#cloud15').parallax("20%", 4500, 0.8, true);
        $('#cloud16').parallax("70%", 5500, 6, true);
        $('#cloud17').parallax("30%", 6000, 0.5, true);
        $('#cloud18').parallax("60%", 6300, 1, true);
        $('#cloud19').parallax("22%", 7300, 2, true);
        $('#cloud20').parallax("63%", 4900, 3, true);
        $('#cloud21').parallax("3%", 7500, 0.2, true);
        $('#cloud22').parallax("76%", 8200, .9, true);
        $('#cloud23').parallax("12%", 8600, 9, true);
        $('#cloud24').parallax("26%", 4600, 4, true);
        $('#cloud25').parallax("26%", 7200, 1.5, true);
        $('#cloud26').parallax("6%", 6800, 1.2, true);
        $('#cloud27').parallax("90%", 8300, 0.6, true);
        $('#cloud28').parallax("26%", 7100, 0.7, true);
})


//Permet de faire disparaître le message qui demande d'utiliser Chrome ou Firefox
function browser(){
        document.getElementById("browser").style.display = "none";
}

//Tous les états hover du menu de navigation
function menu1(){
        document.getElementById("menu1_detail").style.display = "block";
}
function menu2(){
        document.getElementById("menu2_detail").style.display = "block";
}
function menu3(){
        document.getElementById("menu3_detail").style.display = "block";
}
function menu4a(){
        document.getElementById("menu4a_detail").style.display = "block";
}
function menu4b(){
        document.getElementById("menu4b_detail").style.display = "block";
}
function menu4c(){
        document.getElementById("menu4c_detail").style.display = "block";
}
function menu5(){
        document.getElementById("menu5_detail").style.display = "block";
}

function menu1_out(){
        document.getElementById("menu1_detail").style.display = "none";
}
function menu2_out(){
        document.getElementById("menu2_detail").style.display = "none";
}
function menu3_out(){
        document.getElementById("menu3_detail").style.display = "none";
}
function menu4a_out(){
        document.getElementById("menu4a_detail").style.display = "none";
}
function menu4b_out(){
        document.getElementById("menu4b_detail").style.display = "none";
}
function menu4c_out(){
        document.getElementById("menu4c_detail").style.display = "none";
}
function menu5_out(){
        document.getElementById("menu5_detail").style.display = "none";
}


function info_code(){
        document.getElementById("info_code").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/info_code.png")';
        document.getElementById("info_code").style.width = "700px";
        document.getElementById("info_code").style.height = "200px";
        document.getElementById("info_code").style.opacity = "1";
}
function info_code_out(){
       document.getElementById("info_code").style.backgroundImage = "none";
       document.getElementById("info_code").style.width = "240px";
       document.getElementById("info_code").style.height = "200px";
}
function info_theatre(){
        document.getElementById("info_theatre").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/theatre.png")';
        document.getElementById("info_theatre").style.width = "485px";
        document.getElementById("info_theatre").style.height = "151px";
        document.getElementById("info_theatre").style.opacity = "1";
}
function info_theatre_out(){
       document.getElementById("info_theatre").style.backgroundImage = "none";
       document.getElementById("info_theatre").style.width = "220px";
       document.getElementById("info_theatre").style.height = "50px";
}
function info_photo(){
        document.getElementById("info_photo").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/macro.png")';
        document.getElementById("info_photo").style.width = "324px";
        document.getElementById("info_photo").style.height = "161px";
        document.getElementById("info_photo").style.opacity = "1";
}
function info_photo_out(){
       document.getElementById("info_photo").style.backgroundImage = "none";
       document.getElementById("info_photo").style.width = "180px";
       document.getElementById("info_photo").style.height = "50px";
}
function info_voyage(){
        document.getElementById("info_voyage").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/canada.png")';
        document.getElementById("info_voyage").style.width = "700px";
        document.getElementById("info_voyage").style.height = "109px";
        document.getElementById("info_voyage").style.opacity = "1";
}
function info_voyage_out(){
       document.getElementById("info_voyage").style.backgroundImage = "none";
       document.getElementById("info_voyage").style.width = "200px";
       document.getElementById("info_voyage").style.height = "50px";
}
function info_biere(){
        document.getElementById("info_biere").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/biere.png")';
        document.getElementById("info_biere").style.width = "700px";
        document.getElementById("info_biere").style.height = "203px";
        document.getElementById("info_biere").style.opacity = "1";
}
function info_biere_out(){
       document.getElementById("info_biere").style.backgroundImage = "none";
       document.getElementById("info_biere").style.width = "200px";
       document.getElementById("info_biere").style.height = "50px";
}
function info_natation(){
        document.getElementById("info_natation").style.backgroundImage = 'url("http://mamboleoo.be/oldPortfolio/img/club.png")';
        document.getElementById("info_natation").style.width = "419px";
        document.getElementById("info_natation").style.height = "189px";
        document.getElementById("info_natation").style.opacity = "1";
}
function info_natation_out(){
       document.getElementById("info_natation").style.backgroundImage = "none";
       document.getElementById("info_natation").style.width = "260px";
       document.getElementById("info_natation").style.height = "50px";
}

var stop_blanche = 0;
function martiens(){
        var nainX = Math.random();
        var nainY = Math.random();

        nainX = nainX*(window.innerWidth-80);
        nainY = nainY*(4100);


        document.getElementById("martien").style.left = nainX +"px";
        document.getElementById("martien").style.top = nainY +"px";

        stop_blanche++;

        if(stop_blanche ==4){
                alert("Allez on arrête de jouer !");
        }
        if(stop_blanche == 5){
                alert("Cette fois c'est juré, j'arrête !");
                document.getElementById("martien").onmouseover = ""; 

        }
}





//Script pour afficher la grille
 var grille_pop=1;
function afficher_grille(){
        if((grille_pop%2)==1){
                document.getElementById("grille").style.zIndex = 2000;
                document.getElementById("grille").style.opacity = 1;
                grille_pop++;
        }
        else{
                document.getElementById("grille").style.opacity = 0;
                document.getElementById("grille").style.zIndex = 0;
                grille_pop++;
        }


}
var hpair = 0;
function info_plus(){
        if(hpair%2 == 0){
        document.getElementById("hscout").style.zIndex = 10000;
        document.getElementById("hscout").style.opacity = 1;
        document.getElementById("hscout").style.top = (window.pageYOffset+30)+"px";
        document.getElementById("hscout").style.left= "5%";

        document.getElementById("hcuisine").style.zIndex = 10000;
        document.getElementById("hcuisine").style.opacity = 1;
        document.getElementById("hcuisine").style.top = (window.pageYOffset+80)+"px";
        document.getElementById("hcuisine").style.left= "30%";

        document.getElementById("hserie").style.zIndex = 10000;
        document.getElementById("hserie").style.opacity = 1;
        document.getElementById("hserie").style.top = "1300px";
        document.getElementById("hserie").style.left= "80%";

        document.getElementById("hlicorne").style.zIndex = 10000;
        document.getElementById("hlicorne").style.opacity = 1;
        document.getElementById("hlicorne").style.top = (window.pageYOffset+120)+"px";
        document.getElementById("hlicorne").style.left= "20%";

        document.getElementById("hfamille").style.zIndex = 10000;
        document.getElementById("hfamille").style.opacity = 1;
        document.getElementById("hfamille").style.top = (window.pageYOffset+140)+"px";
        document.getElementById("hfamille").style.left= "40%";

        document.getElementById("hprof_esiaj").style.zIndex = 10000;
        document.getElementById("hprof_esiaj").style.opacity = 1;
        document.getElementById("hprof_esiaj").style.top = (window.pageYOffset+150)+"px";
        document.getElementById("hprof_esiaj").style.left= "76%";

        document.getElementById("hfeu").style.zIndex = 10000;
        document.getElementById("hfeu").style.opacity = 1;
        document.getElementById("hfeu").style.top = (window.pageYOffset+220)+"px";
        document.getElementById("hfeu").style.left= "2%";

        document.getElementById("hdeguiser").style.zIndex = 10000;
        document.getElementById("hdeguiser").style.opacity = 1;
        document.getElementById("hdeguiser").style.top = (window.pageYOffset+280)+"px";
        document.getElementById("hdeguiser").style.left= "24%";

        document.getElementById("hfb").style.zIndex = 10000;
        document.getElementById("hfb").style.opacity = 1;
        document.getElementById("hfb").style.top = (window.pageYOffset+320)+"px";
        document.getElementById("hfb").style.left= "60%";

        document.getElementById("hjavascript").style.zIndex = 10000;
        document.getElementById("hjavascript").style.opacity = 1;
        document.getElementById("hjavascript").style.top = (window.pageYOffset+380)+"px";
        document.getElementById("hjavascript").style.left= "65%";

        document.getElementById("htwitter").style.zIndex = 10000;
        document.getElementById("htwitter").style.opacity = 1;
        document.getElementById("htwitter").style.top = (window.pageYOffset+410)+"px";
        document.getElementById("htwitter").style.left= "72%";

        document.getElementById("hgrdmere").style.zIndex = 10000;
        document.getElementById("hgrdmere").style.opacity = 1;
        document.getElementById("hgrdmere").style.top = (window.pageYOffset+430)+"px";
        document.getElementById("hgrdmere").style.left= "20%";

        document.getElementById("hmanger").style.zIndex = 10000;
        document.getElementById("hmanger").style.opacity = 1;
        document.getElementById("hmanger").style.top = (window.pageYOffset+460)+"px";
        document.getElementById("hmanger").style.left= "48%";

        document.getElementById("hbiere").style.zIndex = 10000;
        document.getElementById("hbiere").style.opacity = 1;
        document.getElementById("hbiere").style.top = (window.pageYOffset+window.innerHeight-120)+"px";
        document.getElementById("hbiere").style.left= "1%";

        document.getElementById("hlorem").style.zIndex = 10000;
        document.getElementById("hlorem").style.opacity = 1;
        document.getElementById("hlorem").style.top = (window.pageYOffset+520)+"px";
        document.getElementById("hlorem").style.left= "43%";

        document.getElementById("hgrille").style.zIndex = 10000;
        document.getElementById("hgrille").style.opacity = 1;
        document.getElementById("hgrille").style.top = (window.pageYOffset+560)+"px";
        document.getElementById("hgrille").style.left= "5%";

        document.getElementById("hliste").style.zIndex = 10000;
        document.getElementById("hliste").style.opacity = 1;
        document.getElementById("hliste").style.top = (window.pageYOffset+630)+"px";
        document.getElementById("hliste").style.left= "46%";
        }
        else{
                info_plus_out();
        }

hpair++;
}
function info_plus_out(){

        document.getElementById("hscout").style.zIndex = -10000;
        document.getElementById("hscout").style.opacity = 0;
        document.getElementById("hscout").style.top = "1300px";
        document.getElementById("hscout").style.left= "50%";

        document.getElementById("hcuisine").style.zIndex = -10000;
        document.getElementById("hcuisine").style.opacity = 0;
        document.getElementById("hcuisine").style.top = "1300px";
        document.getElementById("hcuisine").style.left= "50%";

        document.getElementById("hserie").style.zIndex = 10000;
        document.getElementById("hserie").style.opacity = 0;
        document.getElementById("hserie").style.top = "1300px";
        document.getElementById("hserie").style.left= "80%";

        document.getElementById("hlicorne").style.zIndex = 10000;
        document.getElementById("hlicorne").style.opacity = 0;
        document.getElementById("hlicorne").style.top = "1300px";
        document.getElementById("hlicorne").style.left= "50%";

        document.getElementById("hfamille").style.zIndex = 10000;
        document.getElementById("hfamille").style.opacity = 0;
        document.getElementById("hfamille").style.top = "1300px";
        document.getElementById("hfamille").style.left= "50%";

        document.getElementById("hprof_esiaj").style.zIndex = 10000;
        document.getElementById("hprof_esiaj").style.opacity = 0;
        document.getElementById("hprof_esiaj").style.top = "1300px";
        document.getElementById("hprof_esiaj").style.left= "50%";

        document.getElementById("hfeu").style.zIndex = 10000;
        document.getElementById("hfeu").style.opacity = 0;
        document.getElementById("hfeu").style.top = "1300px";
        document.getElementById("hfeu").style.left= "50%";

        document.getElementById("hdeguiser").style.zIndex = 10000;
        document.getElementById("hdeguiser").style.opacity = 0;
        document.getElementById("hdeguiser").style.top = "1300px";
        document.getElementById("hdeguiser").style.left= "50%";

        document.getElementById("hfb").style.zIndex = 10000;
        document.getElementById("hfb").style.opacity = 0;
        document.getElementById("hfb").style.top = "1300px";
        document.getElementById("hfb").style.left= "50%";

        document.getElementById("hjavascript").style.zIndex = 10000;
        document.getElementById("hjavascript").style.opacity = 0;
        document.getElementById("hjavascript").style.top = "1300px";
        document.getElementById("hjavascript").style.left= "50%";

        document.getElementById("htwitter").style.zIndex = 10000;
        document.getElementById("htwitter").style.opacity = 0;
        document.getElementById("htwitter").style.top = "1300px";
        document.getElementById("htwitter").style.left= "50%";

        document.getElementById("hgrdmere").style.zIndex = 10000;
        document.getElementById("hgrdmere").style.opacity = 0;
        document.getElementById("hgrdmere").style.top = "1300px";
        document.getElementById("hgrdmere").style.left= "50%";

        document.getElementById("hmanger").style.zIndex = 10000;
        document.getElementById("hmanger").style.opacity = 0;
        document.getElementById("hmanger").style.top = "1300px";
        document.getElementById("hmanger").style.left= "50%";

        document.getElementById("hbiere").style.zIndex = 10000;
        document.getElementById("hbiere").style.opacity = 0;
        document.getElementById("hbiere").style.top = "1300px";
        document.getElementById("hbiere").style.left= "50%";

        document.getElementById("hlorem").style.zIndex = 10000;
        document.getElementById("hlorem").style.opacity = 0;
        document.getElementById("hlorem").style.top = "1300px";
        document.getElementById("hlorem").style.left= "50%";

        document.getElementById("hgrille").style.zIndex = 10000;
        document.getElementById("hgrille").style.opacity = 0;
        document.getElementById("hgrille").style.top = (window.pageYOffset+560)+"px";
        document.getElementById("hgrille").style.left= "50%";

        document.getElementById("hliste").style.zIndex = 10000;
        document.getElementById("hliste").style.opacity = 0;
        document.getElementById("hliste").style.top = "1300px";
        document.getElementById("hliste").style.left= "50%";

}


var heajcompteur = 0;
var heajcompteur2 = 0;
function heajvsesiaj(e){
        var key;
        if (!e) var e = window.event;
        if (e.keyCode) key = e.keyCode;
        else if (e.which) key = e.which;
        
        if(key == 72){
                heajcompteur++;
        }

        if(key == 69 && heajcompteur == 1){
                heajcompteur++;
        }

        if(key == 65 && heajcompteur == 2){
                heajcompteur++;
        }

        if(key == 74 && heajcompteur == 3){
                heajok();
                heajcompteur = 0;
        }

        if(key == 69){
                heajcompteur2++;
        }

        if(key == 83 && heajcompteur2 == 1){
                heajcompteur2++;
        }

        if(key == 73 && heajcompteur2 == 2){
                heajcompteur2++;
        }

        if(key == 65 && heajcompteur2 == 3){
                heajcompteur2++;
        }
        if(key == 74 && heajcompteur2 == 4){
                heajok2();
                heajcompteur2 = 0;
        }

}
function heajok(){
        document.getElementById("heajvsesiaj").style.display = "block";
}
function heajok2(){
        document.getElementById("heajvsesiaj").style.display = "none";
}

	window.onscroll = scroll;

	var position_fusee, doc_fusee;
	var position_avion, doc_avion;
	var position_helico, doc_helico;
	var position_para, doc_para;
	var taille_maison;
	function declaration(){
		doc_fusee = document.getElementById('rocket');
		doc_fusee.style.bottom = "-50px";
		position_fusee = parseInt(doc_fusee.style.bottom);

		doc_avion = document.getElementById('plane');
		doc_avion.style.right = "-400px";
		position_avion = parseInt(doc_avion.style.right);

		doc_helico = document.getElementById('helico');
		doc_helico.style.left = "-380px";
		position_helico = parseInt(doc_helico.style.left);

		doc_para = document.getElementById('para');
		doc_para.style.top = "880px";
		position_para = parseInt(doc_para.style.top);
		doc_para.style.display == "none"

		document.getElementById('maison').style.height = (window.innerHeight-50)+"px";
		taille_maison = document.getElementById('maison').offsetWidth;
		taille_maison = taille_maison*0.6;
		document.getElementById('mail').style.left = taille_maison+"px";
		document.getElementById('mail').style.height = (window.innerHeight*0.3)+"px";
	}

	function scroll(){

		//Déplacement de la fusée
		if(position_fusee>1400){
			doc_fusee.style.bottom = "-150px";
			position_fusee = -50;
		}
		position_fusee = (position_fusee + 10);
		doc_fusee.style.bottom = (position_fusee+"px");

		//Déplacement de l'avion
		position_avion = (position_avion + 20);
		doc_avion.style.right = (position_avion+"px");
		
		if(position_avion>window.innerWidth){
			doc_avion.style.right = "-400px";
			position_avion = -400;
		}

		//Déplacement Hélicoptère
		position_helico = (position_helico + 30);
		doc_helico.style.left = (position_helico+"px");
		
		if(position_helico>window.innerWidth){
			doc_helico.style.left = "-380px";
			position_helico = -380;
		}

		//Faire apparaître le parachutiste
		if(doc_para.style.display = "none" && position_helico == 310){
			doc_para.style.display = "block";
		}

		if(doc_para.style.display == "block"){
			position_para = (position_para + 30);
			doc_para.style.top = (position_para+"px");

			if(position_para>2700){
				doc_para.style.top = "880px";
				position_para = 880;
				doc_para.style.display = "none";
			}

		}


}

declaration(); tophouse();
              
            
!
999px

Console