montgolfière

dabblet.css

/**
 * montgolfière
**/


#nacelle {
				width: 200px; height: 150px;
				background: #BADA55;
				position: absolute;
				left: 50%; margin-left: -100px;
				bottom: 15%;
				-webkit-transition: all .2s ease-in;
			}
			.ballon {
				width: 200px;
				height: 400px;
				position: absolute;
				left: 50%; 
				margin-left: -100px;
				-webkit-transition: all .2s ease-in;
			}
			.boule {
				width: 200px; height: 200px;
				border-radius: 100px;
				background: blue;
				position: absolute;
				cursor: pointer;
				display: block;
			}
			.file {
				height: 400px;
				width: 2px;
				background: #000;
				position: absolute;
				left: 50%;
				bottom: 0;
			}
			
			input[type=checkbox] {
				position: absolute;
				left: -9999px;
			}
			
			#boule1:checked ~ #nacelle {
				bottom: -5%;
				-webkit-transform: rotate(10deg);
			}
			 
			#boule1:checked ~ .ballon {
				top: -500px;
			}

dabblet.html

<div id="mongolfiere">

		<input type="checkbox" id="boule1" />				
		
		<div class="ballon">
			<div class="file"></div><!-- end -->	
			<label class="boule" for="boule1"></label>	
		</div><!-- end -->
		
		<div id="nacelle"></div><!-- end -->		
		
	</div><!-- end -->	

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}