smoke

_.md

[ Launch: smoke ] 89e2dfb4623487a89ef7 by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"smoke","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/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

<div id="smoke">
  <span class="s0"></span>
  <span class="s1"></span>
  <span class="s2"></span>
  <span class="s3"></span>
  <span class="s4"></span>
  <span class="s5"></span>
  <span class="s6"></span>
  <span class="s7"></span>
  <span class="s8"></span>
  <span class="s9"></span>
</div>

inlet.js

{}

style.css

body {background: #18d0f0}

/* Smoke container */

#smoke {
	position: absolute;
	z-index: 3;
	width: 1px; height: 160px;
	left: 50%; bottom: 30px;
}

/* No animations? Display a static smoke image */

.disableAnimations #smoke,
.no-cssanimations #smoke {
	width: 86px;
	margin-left: -25px;
	bottom: 146px;
	background: url('../img/smokeNoAni.png') no-repeat center bottom;
}

/* smoke balls */

.cssanimations #smoke span { 
	display: block;
	position: absolute;
	bottom: -35px; left: 50%; margin-left:-20px;
	height: 0px; width: 0px;
	border: 35px solid #4b4b4b;
	border-radius: 35px;
	left: -14px; opacity: 0;
	transform: scale(0.2);
}

/* Smoke animation */

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @-o-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

@mixin animation($parameters) {
    -webkit-animation: $parameters;
    -moz-animation: $parameters;
    -o-animation: $parameters;
    animation: $parameters;
}

@include keyframes(smokeL) {
	0%   { @include transform(scale(0.2) translate(0, 0)) }
	10%  { opacity: 1; @include transform(scale(0.2) translate(0, -5px)) }
	100% { opacity: 0; @include transform(scale(1) translate(-20px, -130px)) }
}


@include keyframes(smokeR) {
	0%   { @include transform(scale(0.2) translate(0, 0)) }
	10%  { opacity: 1; @include transform(scale(0.2) translate(0, -5px)) }
	100% { opacity: 0; @include transform(scale(1) translate(20px, -130px)) }
}

#smoke .s0 { @include animation(smokeL 5s 0s infinite) }
#smoke .s1 { @include animation(smokeR 5s 1s infinite) }
#smoke .s2 { @include animation(smokeL 5s 2s infinite) }
#smoke .s3 { @include animation(smokeR 5s 3s infinite) }
#smoke .s4 { @include animation(smokeL 5s 4s infinite) }
#smoke .s5 { @include animation(smokeR 5s 5s infinite) }
#smoke .s6 { @include animation(smokeL 5s 6s infinite) }
#smoke .s7 { @include animation(smokeR 5s 7s infinite) }
#smoke .s8 { @include animation(smokeL 5s 8s infinite) }
#smoke .s9 { @include animation(smokeR 5s 9s infinite) }