flying-fuck

_.md

[ Launch: flying-fuck ] 81aad5e022afb282802c by ptvans
[ Launch: flying-fuck ] 6ebeff7f7dbf98474afa by ptvans
[ Launch: flying-fuck ] e8ae6baa035b7c5c6423 by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"flying-fuck","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Y7b2OA9.gif","fullscreen":true,"ajax-caching":true}

index.html

<div id="background">
</div>

<div id="author"><a target="_blank" href="https://twitter.com/ptvan">@ptvan</a></div>

<a target="_blank" href="http://www.goodreads.com/quotes/625490-go-take-a-flying-fuck-at-a-rolling-doughnut-murmured">
<div id="kurt">
  <div id="quote">" Go take a flying fuck at a rolling donut "</div>
  </div>
</a>


<div id="flying-1" class="flying">
  <div class="hover">
  	<div class="wing wing-1"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-left.png"></div>
  	<div class="wing wing-2"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-right.png"></div>
    <div class="fuck">FUCK</div>
  	<div class="shadow"></div>
  </div>
	
</div>


<div id="flying-2" class="flying">
  <div class="hover">
  	<div class="wing wing-1"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-left.png"></div>
  	<div class="wing wing-2"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-right.png"></div>
    <div class="fuck">FUCK</div>
    <div class="shadow"></div>
  </div>
	
</div>


<div id="flying-3" class="flying">
  <div class="hover">
  	<div class="wing wing-1"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-left.png"></div>
  	<div class="wing wing-2"><img src="https://dl.dropboxusercontent.com/u/99302338/wing-right.png"></div>
    <div class="fuck">FUCK</div>
    <div class="shadow"></div>
  </div>
	
</div>



<div class="donut donut-2">
  <div class="bounce">
	<div class="donut-inner"> 

    </div>
  </div>
</div>


<div class="donut donut-1">
  <div class="bounce">
	<div class="donut-inner">
    </div>
  </div>
</div>


<div class="donut donut-3">
  <div class="bounce">
	<div class="donut-inner"> 
    </div>
  </div>
</div>

inlet.js

/*“Go take a flying fuck at a rolling doughnut”*/
/*http://www.goodreads.com/quotes/625490-go-take-a-flying-fuck-at-a-rolling-doughnut-murmured*/

style.css

#author {
	position: absolute;
  top: 10px;
  left: 20px;
font-size: 14px; 
 
}
  
a {
}

a:link, a:visited {
  	color: #4374ac;
  text-decoration: none;
  }

a:active, a:hover {
  	color: #335984;
    text-decoration: underline;

  }

#background {
	position: absolute;
  top: 0px;
  left: 0px;
	opacity: 0.5;
  	width: 100%;
  height: 100%;
   background-image: url('https://dl.dropboxusercontent.com/u/99302338/Blue_sky_and_green_grass-wide.jpg');
	background-position: 50% 80%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#kurt {
	position: absolute;
  top: 20px;
  right: 10px;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  background-size: 100px;
  border: 5px solid #444;
  box-shadow: 0px 3px 5px rgba(20,20,20,0.3);
  background-position: center;
    background-image: url('https://dl.dropboxusercontent.com/u/99302338/2778055.jpg');
}

#quote {
	width: 24px;
  height: 20px;
  position: relative;
  top: 40px;
  right: 60px;
  float: right;
  text-indent: 8px;
  border-radius: 10px;
	font-size: 19px;
  text-wrap: none;
  font-family: 'Georgia','Garamond','Times New Roman', serif;
    overflow: hidden;
  background-color: #eee;
 transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

  #quote:hover {
  	width: 390px;
    height: 50px;
  padding: 10px;
    border: 2px solid #fe23b2;
  }


/*~~~ FUCKS! ~~~ */
.flying {
  position: absolute;
  left: -220px;
}

#flying-3 {
  top: 60px;
  -webkit-animation-duration: 20s;
  -webkit-animation-delay: 9654ms;
  animation-duration: 20s;
  animation-delay: 9654ms;
}


#flying-2 {
  top: 180px;
  -webkit-animation-duration: 16s;
  -webkit-animation-delay: 3953ms;
  animation-duration: 16s;
  animation-delay: 3953ms;
}

#flying-1 {
  top: 100px;
  -webkit-animation-duration: 12s;
  -webkit-animation-delay: 500ms;
  animation-duration: 12s;
  animation-delay: 500ms;
}

.hover{
  position: relative;
}

.wing {
  width: 95px;
  height: 20px;
  position: relative;
  top: 0px;
  display: inline-block;
}

.wing img {
width: 95px;}

.wing-1 {
  float: left;
  margin-left: -70px;
}

.wing-2 {
  float: right;
  margin-right: -70px;
}

.fuck {
	position: relative;
  font-size: 48px;
  top: 20px;
  left: 0px;
  color: #444;
  font-weight: bold;
}

.shadow {
	background-color: rgba(20,20,20,0.4);
  width:100px;
  height: 20px;
  border-radius: 50%;
 	position: relative;
  left: 10px;
  top: 360px; 
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
  opacity:0.2;
}


/*color*/
.wing-1 {
    -webkit-animation: flap-left 0.3s ease-in infinite alternate; /* Chrome, Safari, Opera */
	animation: flap-left 0.3s ease-in infinite alternate;
}

.wing-2 {
    -webkit-animation: flap-right 0.3s ease-in infinite alternate; /* Chrome, Safari, Opera */
	animation: flap-right 0.3s ease-in infinite alternate;
}

@-webkit-keyframes flap-right {
    from {
    	top: 0px;
    	-webkit-transform: translate3d(1px,1px,1px) rotate(-10deg) scale3d(1.0, 1.0, 1.0) ;}
    to {
    	top: 50px;
    	-webkit-transform: translate3d(1px,1px,1px) rotate(35deg) scale3d(1.2, 1.1, 1.1) ;}
}


@-webkit-keyframes flap-left {
    from {
    	top: 0px;
    	-webkit-transform: translate3d(1px,1px,1px) rotate(10deg) scale3d(1.0, 1.0, 1.0) ;}
    to {
    	top: 50px;
    	-webkit-transform: translate3d(1px,1px,1px) rotate(-35deg) scale3d(1.2, 1.1, 1.1) ;}
}

.hover {
    -webkit-animation: hover 0.6s ease-in-out infinite alternate; /* Chrome, Safari, Opera */
	animation: hover 0.6s ease-in-out infinite alternate;
}

@-webkit-keyframes hover {
    from {
    	top: 100px;
    	-webkit-transform: translate3d(1px,1px,1px) ;}
    to {
    	top: 120px;     	
    	-webkit-transform: translate3d(1px,1px,1px) ;}
}


.flying {
    -webkit-animation: move linear infinite; /* Chrome, Safari, Opera */
	animation: move linear infinite;
}

@-webkit-keyframes move {
    from {
    	left: -180px;
    	-webkit-transform: translate3d(1px,1px,1px) ;}
    to {
    	left: 1250px;     	
    	-webkit-transform: translate3d(1px,1px,1px) ;}
}






/*~~~ DONUTS! ~~~ */

.donut {
     position: absolute;
  left: -200px;
  -webkit-animation: rolling linear infinite; /* Chrome, Safari, Opera */
	animation: rolling linear infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes rolling {
    from {
    	left: -200px;
    	-webkit-transform: translate3d(1px,1px,1px) ;}
    to {
    	left: 1250px;     	
    	-webkit-transform: translate3d(1px,1px,1px) ;}
}


.donut-inner {
  -webkit-animation: spinning linear infinite; /* Chrome, Safari, Opera */
	animation: spinning linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes spinning {
    from {
    	-webkit-transform: translate3d(1px,1px,1px) rotate(0deg) ;}
    to {   
    	-webkit-transform: translate3d(1px,1px,1px) rotate(360deg);}
}


.bounce {
  -webkit-animation: bounce ease-in infinite alternate; /* Chrome, Safari, Opera */
	animation: bounce ease-in infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bounce {
    from {
    	top: 0px ;
  }
    to {   
    	top: 40px ;
  }
}




.donut-1 {
	bottom: 20px;
    -webkit-animation-duration: 6s;
  -webkit-animation-delay: 500ms;
  animation-duration: 6s;
  animation-delay: 500ms;
}
.donut-2 {
	bottom: 50px;
    -webkit-animation-duration: 10s;
  -webkit-animation-delay: 3500ms;
  animation-duration: 10s;
  animation-delay: 3500ms;
}
.donut-3 {
	bottom: 0px;
    -webkit-animation-duration: 8s;
  -webkit-animation-delay: 1500ms;
  animation-duration: 8s;
  animation-delay: 1500ms;
}


.donut-inner {
	position: relative;
    background-image: url('https://dl.dropboxusercontent.com/u/99302338/donut.png');
  height: 180px;
  width: 180px;
  background-size: 180px;
  background-position: center;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 500ms;
  animation-duration: 4s;
  animation-delay: 500ms;
}

.bounce {
	position: relative;
   -webkit-animation-duration: 0.5s;
  -webkit-animation-delay: 500ms;
  animation-duration: 0.5s;
  animation-delay: 500ms;
}