L'histoire d'une pomme (full)

dabblet.css

/**
 * L'histoire d'une pomme (full)
 */
 
body {
	background: white;
	overflow: hidden;
}

.pomme {
	background: url(http://minimal.be/wkid/pomme.jpg);
	width: 312px;
	height: 280px;
	position: absolute;
	left: -40px;
	bottom: 20px;
	-webkit-transition: all .4s ease-in-out;
}

.container {
	width: 239px;
	height: 400px;
	position: absolute;
	right: -250px;
	bottom: -60px;
	-webkit-transition: all .4s ease-in-out;
}

.langue {
	background: url(http://minimal.be/wkid/langue.gif);
	position: absolute;
	width: 239px;
	height: 400px;
	left: 40px;
	-webkit-transition: all .4s ease-out;
}

.tete {
	background: url(http://minimal.be/wkid/tete.png);
	position: absolute;
	width: 239px;
	height: 400px;
}

.machoire {
	background: url(http://minimal.be/wkid/machoire.png);
	width: 147px;
	height: 73px;
	position: absolute;
	left: 23px;
	top: 267px;
	-webkit-transition: all .2s ease-out;
	-webkit-transform-origin: 100% 0;
}
.yeux {
	background: url(http://minimal.be/wkid/yeux.png);
	width: 79px;
	height: 79px;
	position: absolute;
	left: 32px;
	top: 131px;
	-webkit-transition: all .2s ease-out;
	opacity: 0;
}

@media(max-width: 1050px) {
	.container {  right: 0px; bottom: 0px; }
	.pomme { left: -50px ;}
}

@media(max-width: 800px){
	.yeux {	opacity: 1;	}
	.pomme { left: -60px ;}
}
@media(max-width:600px){
	.machoire {	-webkit-transform: rotateZ(-5deg); }
	.pomme { left: -70px ;}
}
@media(max-width:450px){
	.langue {	left: -40px; }
	.pomme { left: -80px ;}
}

dabblet.html

<div class="pomme"></div>
	<div class="container">
		<div class="langue"></div>
		<div class="tete"></div>
		<div class="machoire"></div>
		<div class="yeux"></div>
	</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}