[html]
<style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto:400';

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
   
    background: #1f263b;
    background: -moz-linear-gradient(top, #1f263b 0%, #2c3654 100%);
    background: -webkit-linear-gradient(top, #1f263b 0%,#2c3654 100%);
    background: linear-gradient(to bottom, #1f263b 0%,#2c3654 100%);
}

div.absolute-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
    opacity: 1;
    visibility: visible;
   
    transition: all .5s;
}

h3, h5 {
    padding: 10px 30px 10px 30px;
    box-sizing: border-box;
   
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 5px 0 black;
   
    font-family: 'Open Sans';
    font-weight: 300;
    text-align: center;
    letter-spacing: 3px;
}

span#close {
    position: absolute;
    top: -15px;
    left: -30px;
   
    color: white;
    font-size: 30px;
    text-shadow: 0 0 5px black;
   
    cursor: pointer;
}

canvas {
    //border: 2px solid;
}
</style>
<script>
//ninivert, September 2016

/*VARIABLES*/

canvas = document.getElementsByTagName('canvas')[0];
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

var ctx = canvas.getContext('2d');

/*Modify options here*/

//possible characters that will appear
var characterList = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

//stocks possible character attributes
var layers = {
    n: 5, //number of layers
    letters: [100, 40, 30, 20, 10], //letters per layer (starting from the deepest layer)
    coef: [0.1, 0.2, 0.4, 0.6, 0.8], //how much the letters move from the mouse (starting from the deepest layer)
    size: [16, 22, 36, 40, 46], //font size of the letters (starting from the deepest layer)
    color: ['#fff', '#eee', '#ccc', '#bbb', '#aaa'], //color of the letters (starting from the deepest layer)
    font: 'Courier' //font family (of every layer)
};

/*End of options*/

var characters = [];
var mouseX = document.body.clientWidth/2;
var mouseY = document.body.clientHeight/2;

var rnd = {
    btwn: function(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    },
    choose: function(list) {
        return list[rnd.btwn(0, list.length)];
    }
};

/*LETTER DRAWING*/

function drawLetter(char) {
    ctx.font = char.size + 'px ' + char.font;
    ctx.fillStyle = char.color;
   
    var x = char.posX + (mouseX-canvas.width/2)*char.coef;
    var y = char.posY + (mouseY-canvas.height/2)*char.coef;

    ctx.fillText(char.char, x, y);
}

/*ANIMATION*/

document.onmousemove = function(ev) {
    mouseX = ev.pageX - canvas.offsetLeft;
    mouseY = ev.pageY - canvas.offsetTop;

    if (window.requestAnimationFrame) {
        requestAnimationFrame(update);
    } else {
        update();
    }
};

function update() {
    clear();
    render();
}

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function render() {
    for (var i = 0; i < characters.length; i++) {
        drawLetter(characters[i]);
    }
}

/*INITIALIZE*/

function createLetters() {
    for (var i = 0; i < layers.n; i++) {
        for (var j = 0; j < layers.letters[i]; j++) {

            var character = rnd.choose(characterList);
            var x = rnd.btwn(0, canvas.width);
            var y = rnd.btwn(0, canvas.height);

            characters.push({
                char: character,
                font: layers.font,
                size: layers.size[i],
                color: layers.color[i],
                layer: i,
                coef: layers.coef[i],
                posX: x,
                posY: y
            });

        }
    }
}

createLetters();
update();

/*REAJUST CANVAS AFTER RESIZE*/

window.onresize = function() {
    location.reload();
};

document.getElementById('close').onclick = function() {
    this.parentElement.style.visibility = 'hidden';
    this.parentElement.style.opacity = '0';
}
</script>

<canvas></canvas>

<div class="absolute-center">
    <h3>MOVE AROUND YOUR MOUSE!</h3>
   
    <h5><i>You can adjust the options by modifying lines 11 to 29 of the JavaScript code<br>Please note that upon resizing the page, it will have to reload</i></h5>
   
    <span id="close"><i class="fa fa-fw fa-times-circle-o"></i></span>
</div>

[/html]

[html]
<style>
#rotate{
  vertical-align:top;
transform:rotate(7deg);
  -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */}
   
#vert{
height: auto;
min-width: auto;
}

button,
input{
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;

  cursor:pointer;
  height:50px;
min-width: 100px;
  position:relative;
 
border: 1px solid #333;
border-radius: 5px;
  padding: 0 10px;

font-size: 20px;
}

input:hover{box-shadow:0px 0px 4px #fff;}
input:active{top:1px;}

body{background-color:#222;}

.button-container {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(3,1fr);
justify-items: center;
width: 400px;
padding: 40px 0;
margin: 0 auto;
}

</style>
<script>

var vert = 'vertical'.split("").join("<br/>")
$('#vert').html(vert);

</script>

<div class="button-container">
<input type="button" value="Rotated text" id="rotate" />
<button id="vert"></button>
<input type="button" value="Default" />       
</div>

[/html]

[html]
<style>
div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 20px auto;
  width: 250px;
  height: 250px;
  background: white;
  border-radius: 75px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: lighter;
  letter-spacing: 2px;
  transition: 1s box-shadow;
}

div:hover {
  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}

div:hover::before, div:hover::after {
  display: block;
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: #FDA8CF;
  border-radius: 75px;
  z-index: -1;
  animation: 1s clockwise infinite;
}

div:hover:after {
  background: #F3CE5E;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;   
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;   
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;   
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;   
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;   
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;   
  }
}
</style>
<script>

</script>

<div>hover over me</div>

[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
body {
  background: #2D3142;
  font-family: 'Raleway', sans-serif;
}

/* Heading */

h1 {
  font-size: 1.5em;
  text-align: center;
  padding: 70px 0 0 0;
  color: #EF8354;
  font-weight: 300;
  letter-spacing: 1px;
}

span {
  border: 2px solid #4F5D75;
  padding: 10px;
}

/* Layout Styling */

#container {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 150px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* Button Styles */

.button {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #BFC0C0;
  margin: 20px 20px 20px 20px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #BFC0C0;
  text-decoration: none;
  letter-spacing: 1px;
}

/* First Button */

#arrow-hover {
  width: 15px;
  height: 10px;
  position: absolute;
  transform: translateX(60px);
  opacity: 0;
  -webkit-transition: all .25s cubic-bezier(.14, .59, 1, 1.01);
  transition: all .15s cubic-bezier(.14, .59, 1, 1.01);
  margin: 0;
  padding: 0 5px;
}

a#button-1:hover img {
  width: 15px;
  opacity: 1;
  transform: translateX(50px);
}

/* Second Button */

#button-2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-2 a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -200px;
  background: #BFC0C0;
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-2:hover #slide {
  left: 0;
}

#button-2:hover a {
  color: #2D3142;
}

/* Third Button */

#button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-3 a {
  position: relative;
  transition: all .45s ease-Out;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #BFC0C0;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}

#button-3:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

#button-3:hover a {
  color: #2D3142;
}

/* Fourth Button */

#button-4 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-4 a {
  position: relative;
  transition: all .45s ease-Out;
}

#underline {
  width: 100%;
  height: 2.5px;
  margin-top: 15px;
  align-self: flex-end;
  left: -200px;
  background: #BFC0C0;
  position: absolute;
  transition: all .3s ease-Out;
  bottom: 0;
}

#button-4:hover #underline {
  left: 0;
}

/* Fifth Button */

#button-5 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-5 a {
  position: relative;
  transition: all .45s ease-Out;
}

#translate {
  transform: rotate(50deg);
  width: 100%;
  height: 250%;
  left: -200px;
  top: -30px;
  background: #BFC0C0;
  position: absolute;
  transition: all .3s ease-Out;
}

#button-5:hover #translate {
  left: 0;
}

#button-5:hover a {
  color: #2D3142;
}

/* Sixth Button */

#button-6 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-6 a {
  position: relative;
  transition: all .45s ease-Out;
}

#spin {
  width: 0;
  height: 0;
  opacity: 0;
  left: 70px;
  top: 20px;
  transform: rotate(0deg);
  background: none;
  position: absolute;
  transition: all .5s ease-Out;
}

#button-6:hover #spin {
  width: 200%;
  height: 500%;
  opacity: 1;
  left: -70px;
  top: -70px;
  background: #BFC0C0;
  transform: rotate(80deg);
}

#button-6:hover a {
  color: #2D3142;
}

/* Seventh Button */

#button-7 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-7 a {
  position: relative;
  left: 0;
  transition: all .35s ease-Out;
}

#dub-arrow {
  width: 100%;
  height: 100%;
  background: #BFC0C0;
  left: -200px;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-7 img {
  width: 20px;
  height: auto;
}

#button-7:hover #dub-arrow {
  left: 0;
}

#button-7:hover a {
  left: 150px;
}

@media screen and (min-width:1000px) {
  h1 {
    font-size: 2.2em;
  }
  #container {
    width: 50%;
  }
}
</style>
<h1><span>CSS</span> Button Animations</h1>

<!-- Flex Container -->
<div id="container">

  <a id="button-1" class="button" href="#">Let's Go!<img id="arrow-hover" src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-paper-plane-1-120.png?raw=true"/></a>

  <div class="button" id="button-2">
    <div id="slide"></div>
    <a href="#">Let's Go!</a>
  </div>

  <div class="button" id="button-3">
    <div id="circle"></div>
    <a href="#">Let's Go!</a>
  </div>

  <div class="button" id="button-4">
    <div id="underline"></div>
    <a href="#">Let's Go!</a>
  </div>

  <div class="button" id="button-5">
    <div id="translate"></div>
    <a href="#">Let's Go!</a>
  </div>

  <div class="button" id="button-6">
    <div id="spin"></div>
    <a href="#">Let's Go!</a>
  </div>

  <div class="button" id="button-7">
    <div id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" /></div>
    <a href="#">Let's Go!</a>
  </div>

  <!-- End Container -->
</div>

[/html]

[html]
<style>
html, body {
  overflow: hidden;
  font: 16px/1.4 'Lato', sans-serif;
  color: #fefeff;
}
body {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
}
h1 {
  font: 2.75em 'Cinzel', serif;
  font-weight: 400;
  letter-spacing: 0.35em;
}
[class^="letter"] {
  -webkit-transition: opacity 3s ease;
  -moz-transition: opacity 3s ease;
  transition: opacity 3s ease;
}
.letter-0 {
  transition-delay: 0.2s;
}
.letter-1 {
  transition-delay: 0.4s;
}
.letter-2 {
  transition-delay: 0.6s;
}
.letter-3 {
  transition-delay: 0.8s;
}
.letter-4 {
  transition-delay: 1.0s;
}
.letter-5 {
  transition-delay: 1.2s;
}
.letter-6 {
  transition-delay: 1.4s;
}
.letter-7 {
  transition-delay: 1.6s;
}
.letter-8 {
  transition-delay: 1.8s;
}
.letter-9 {
  transition-delay: 2.0s;
}
.letter-10 {
  transition-delay: 2.2s;
}
.letter-11 {
  transition-delay: 2.4s;
}
.letter-12 {
  transition-delay: 2.6s;
}
.letter-13 {
  transition-delay: 2.8s;
}
.letter-14 {
  transition-delay: 3.0s;
}
.letter-15 {
  transition-delay: 3.2s;
}
h1 {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

}
h1.transition-in {
  visibility: visible;
}
h1 [class^="letter"] {
  opacity: 0;
}
h1.transition-in [class^="letter"] {
  opacity: 1;
}
</style>
<script>
'use strict';

var canvas = document.getElementsByTagName( 'canvas' )[ 0 ];

canvas.width  = canvas.clientWidth;
canvas.height = canvas.clientHeight;

var config = {
    TEXTURE_DOWNSAMPLE: 1,
    DENSITY_DISSIPATION: 0.98,
    VELOCITY_DISSIPATION: 0.99,
    PRESSURE_DISSIPATION: 0.8,
    PRESSURE_ITERATIONS: 25,
    CURL: 30,
    SPLAT_RADIUS: 0.005
};

var pointers   = [];
var splatStack = [];

var _getWebGLContext     = getWebGLContext( canvas );
var gl                   = _getWebGLContext.gl;
var ext                  = _getWebGLContext.ext;
var support_linear_float = _getWebGLContext.support_linear_float;

function getWebGLContext( canvas ) {

    var params = {
        alpha: false,
        depth: false,
        stencil: false,
        antialias: false
    };

    var gl = canvas.getContext( 'webgl2', params );

    var isWebGL2 = !!gl;

    if ( !isWebGL2 ) gl = canvas.getContext( 'webgl', params ) || canvas.getContext( 'experimental-webgl', params );

    var halfFloat            = gl.getExtension( 'OES_texture_half_float' );
    var support_linear_float = gl.getExtension( 'OES_texture_half_float_linear' );

    if ( isWebGL2 ) {
        gl.getExtension( 'EXT_color_buffer_float' );
        support_linear_float = gl.getExtension( 'OES_texture_float_linear' );
    }

    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

    var internalFormat   = isWebGL2 ? gl.RGBA16F : gl.RGBA;
    var internalFormatRG = isWebGL2 ? gl.RG16F : gl.RGBA;
    var formatRG         = isWebGL2 ? gl.RG : gl.RGBA;
    var texType          = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;

    return {
        gl: gl,
        ext: {
            internalFormat: internalFormat,
            internalFormatRG: internalFormatRG,
            formatRG: formatRG,
            texType: texType
        },
        support_linear_float: support_linear_float
    };
}

function pointerPrototype() {
    this.id    = -1;
    this.x     = 0;
    this.y     = 0;
    this.dx    = 0;
    this.dy    = 0;
    this.down  = false;
    this.moved = false;
    this.color = [ 30, 0, 300 ];
}

pointers.push( new pointerPrototype() );

var GLProgram = function () {
   
    function GLProgram( vertexShader, fragmentShader ) {

        if ( !(this instanceof GLProgram) )
            throw new TypeError( "Cannot call a class as a function" );

        this.uniforms = {};
        this.program  = gl.createProgram();

        gl.attachShader( this.program, vertexShader );
        gl.attachShader( this.program, fragmentShader );
        gl.linkProgram( this.program );

        if ( !gl.getProgramParameter( this.program, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( this.program );

        var uniformCount = gl.getProgramParameter( this.program, gl.ACTIVE_UNIFORMS );
       
        for ( var i = 0; i < uniformCount; i++ ) {
           
            var uniformName = gl.getActiveUniform( this.program, i ).name;
           
            this.uniforms[ uniformName ] = gl.getUniformLocation( this.program, uniformName );
           
        }
    }

    GLProgram.prototype.bind = function bind() {
        gl.useProgram( this.program );
    };

    return GLProgram;
   
}();

function compileShader( type, source ) {

    var shader = gl.createShader( type );
   
    gl.shaderSource( shader, source );
    gl.compileShader( shader );

    if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( shader );

    return shader;

}

var baseVertexShader               = compileShader( gl.VERTEX_SHADER, 'precision highp float; precision mediump sampler2D; attribute vec2 aPosition; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform vec2 texelSize; void main () {     vUv = aPosition * 0.5 + 0.5;     vL = vUv - vec2(texelSize.x, 0.0);     vR = vUv + vec2(texelSize.x, 0.0);     vT = vUv + vec2(0.0, texelSize.y);     vB = vUv - vec2(0.0, texelSize.y);     gl_Position = vec4(aPosition, 0.0, 1.0); }' );
var clearShader                    = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () {     gl_FragColor = value * texture2D(uTexture, vUv); }' );
var displayShader                  = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; void main () {     gl_FragColor = texture2D(uTexture, vUv); }' );
var splatShader                    = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio; uniform vec3 color; uniform vec2 point; uniform float radius; void main () {     vec2 p = vUv - point.xy;     p.x *= aspectRatio;     vec3 splat = exp(-dot(p, p) / radius) * color;     vec3 base = texture2D(uTarget, vUv).xyz;     gl_FragColor = vec4(base + splat, 1.0); }' );
var advectionManualFilteringShader = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; vec4 bilerp (in sampler2D sam, in vec2 p) {     vec4 st;     st.xy = floor(p - 0.5) + 0.5;     st.zw = st.xy + 1.0;     vec4 uv = st * texelSize.xyxy;     vec4 a = texture2D(sam, uv.xy);     vec4 b = texture2D(sam, uv.zy);     vec4 c = texture2D(sam, uv.xw);     vec4 d = texture2D(sam, uv.zw);     vec2 f = p - st.xy;     return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } void main () {     vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;     gl_FragColor = dissipation * bilerp(uSource, coord);     gl_FragColor.a = 1.0; }' );
var advectionShader                = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; void main () {     vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;     gl_FragColor = dissipation * texture2D(uSource, coord); }' );
var divergenceShader               = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; vec2 sampleVelocity (in vec2 uv) {     vec2 multiplier = vec2(1.0, 1.0);     if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }     if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }     if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }     if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }     return multiplier * texture2D(uVelocity, uv).xy; } void main () {     float L = sampleVelocity(vL).x;     float R = sampleVelocity(vR).x;     float T = sampleVelocity(vT).y;     float B = sampleVelocity(vB).y;     float div = 0.5 * (R - L + T - B);     gl_FragColor = vec4(div, 0.0, 0.0, 1.0); }' );
var curlShader                     = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; void main () {     float L = texture2D(uVelocity, vL).y;     float R = texture2D(uVelocity, vR).y;     float T = texture2D(uVelocity, vT).x;     float B = texture2D(uVelocity, vB).x;     float vorticity = R - L - T + B;     gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); }' );
var vorticityShader                = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt; void main () {     float L = texture2D(uCurl, vL).y;     float R = texture2D(uCurl, vR).y;     float T = texture2D(uCurl, vT).x;     float B = texture2D(uCurl, vB).x;     float C = texture2D(uCurl, vUv).x;     vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L));     force *= 1.0 / length(force + 0.00001) * curl * C;     vec2 vel = texture2D(uVelocity, vUv).xy;     gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); }' );
var pressureShader                 = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uDivergence; vec2 boundary (in vec2 uv) {     uv = min(max(uv, 0.0), 1.0);     return uv; } void main () {     float L = texture2D(uPressure, boundary(vL)).x;     float R = texture2D(uPressure, boundary(vR)).x;     float T = texture2D(uPressure, boundary(vT)).x;     float B = texture2D(uPressure, boundary(vB)).x;     float C = texture2D(uPressure, vUv).x;     float divergence = texture2D(uDivergence, vUv).x;     float pressure = (L + R + B + T - divergence) * 0.25;     gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); }' );
var gradientSubtractShader         = compileShader( gl.FRAGMENT_SHADER, 'precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uVelocity; vec2 boundary (in vec2 uv) {     uv = min(max(uv, 0.0), 1.0);     return uv; } void main () {     float L = texture2D(uPressure, boundary(vL)).x;     float R = texture2D(uPressure, boundary(vR)).x;     float T = texture2D(uPressure, boundary(vT)).x;     float B = texture2D(uPressure, boundary(vB)).x;     vec2 velocity = texture2D(uVelocity, vUv).xy;     velocity.xy -= vec2(R - L, T - B);     gl_FragColor = vec4(velocity, 0.0, 1.0); }' );

var textureWidth  = void 0;
var textureHeight = void 0;
var density       = void 0;
var velocity      = void 0;
var divergence    = void 0;
var curl          = void 0;
var pressure      = void 0;

initFramebuffers();

var clearProgram           = new GLProgram( baseVertexShader, clearShader );
var displayProgram         = new GLProgram( baseVertexShader, displayShader );
var splatProgram           = new GLProgram( baseVertexShader, splatShader );
var advectionProgram       = new GLProgram( baseVertexShader, support_linear_float ? advectionShader : advectionManualFilteringShader );
var divergenceProgram      = new GLProgram( baseVertexShader, divergenceShader );
var curlProgram            = new GLProgram( baseVertexShader, curlShader );
var vorticityProgram       = new GLProgram( baseVertexShader, vorticityShader );
var pressureProgram        = new GLProgram( baseVertexShader, pressureShader );
var gradienSubtractProgram = new GLProgram( baseVertexShader, gradientSubtractShader );

function initFramebuffers() {

    textureWidth  = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
    textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

    var iFormat   = ext.internalFormat;
    var iFormatRG = ext.internalFormatRG;
    var formatRG  = ext.formatRG;
    var texType   = ext.texType;

    density    = createDoubleFBO( 0, textureWidth, textureHeight, iFormat, gl.RGBA, texType, support_linear_float ? gl.LINEAR : gl.NEAREST );
    velocity   = createDoubleFBO( 2, textureWidth, textureHeight, iFormatRG, formatRG, texType, support_linear_float ? gl.LINEAR : gl.NEAREST );
    divergence = createFBO( 4, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );
    curl       = createFBO( 5, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );
    pressure   = createDoubleFBO( 6, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST );

}

function createFBO( texId, w, h, internalFormat, format, type, param ) {

    gl.activeTexture( gl.TEXTURE0 + texId );

    var texture = gl.createTexture();

    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE );
    gl.texImage2D( gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null );

    var fbo = gl.createFramebuffer();

    gl.bindFramebuffer( gl.FRAMEBUFFER, fbo );
    gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0 );
    gl.viewport( 0, 0, w, h );
    gl.clear( gl.COLOR_BUFFER_BIT );

    return [ texture, fbo, texId ];

}

function createDoubleFBO( texId, w, h, internalFormat, format, type, param ) {

    var fbo1 = createFBO( texId, w, h, internalFormat, format, type, param );
    var fbo2 = createFBO( texId + 1, w, h, internalFormat, format, type, param );

    return {
        get first() {
            return fbo1;
        },
        get second() {
            return fbo2;
        },
        swap: function swap() {
            var temp = fbo1;

            fbo1 = fbo2;
            fbo2 = temp;
        }
    };

}

var blit = function () {

    gl.bindBuffer( gl.ARRAY_BUFFER, gl.createBuffer() );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [ -1, -1, -1, 1, 1, 1, 1, -1 ] ), gl.STATIC_DRAW );
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer() );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( [ 0, 1, 2, 0, 2, 3 ] ), gl.STATIC_DRAW );
    gl.vertexAttribPointer( 0, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( 0 );

    return function ( destination ) {
        gl.bindFramebuffer( gl.FRAMEBUFFER, destination );
        gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
    };

}();

var lastTime = Date.now();

update();

function update() {

    resizeCanvas();

    var dt = Math.min( (Date.now() - lastTime) / 1000, 0.016 );
    lastTime = Date.now();

    gl.viewport( 0, 0, textureWidth, textureHeight );

    if ( splatStack.length > 0 ) {
        for ( var m = 0; m < splatStack.pop(); m++ ) {

            var color = [ Math.random() * 10, Math.random() * 10, Math.random() * 10 ];
            var x     = canvas.width * Math.random();
            var y     = canvas.height * Math.random();
            var dx    = 1000 * (Math.random() - 0.5);
            var dy    = 1000 * (Math.random() - 0.5);

            splat( x, y, dx, dy, color );
        }
    }

    advectionProgram.bind();
    gl.uniform2f( advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( advectionProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( advectionProgram.uniforms.uSource, velocity.first[ 2 ] );
    gl.uniform1f( advectionProgram.uniforms.dt, dt );
    gl.uniform1f( advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.uniform1i( advectionProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( advectionProgram.uniforms.uSource, density.first[ 2 ] );
    gl.uniform1f( advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION );
    blit( density.second[ 1 ] );
    density.swap();

    for ( var i = 0, len =  pointers.length; i < len; i++ ) {
        var pointer = pointers[ i ];

        if ( pointer.moved ) {
            splat( pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color );
            pointer.moved = false;
        }
    }

    curlProgram.bind();
    gl.uniform2f( curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( curlProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( curl[ 1 ] );

    vorticityProgram.bind();
    gl.uniform2f( vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( vorticityProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    gl.uniform1i( vorticityProgram.uniforms.uCurl, curl[ 2 ] );
    gl.uniform1f( vorticityProgram.uniforms.curl, config.CURL );
    gl.uniform1f( vorticityProgram.uniforms.dt, dt );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    divergenceProgram.bind();
    gl.uniform2f( divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( divergenceProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( divergence[ 1 ] );

    clearProgram.bind();

    var pressureTexId = pressure.first[ 2 ];

    gl.activeTexture( gl.TEXTURE0 + pressureTexId );
    gl.bindTexture( gl.TEXTURE_2D, pressure.first[ 0 ] );
    gl.uniform1i( clearProgram.uniforms.uTexture, pressureTexId );
    gl.uniform1f( clearProgram.uniforms.value, config.PRESSURE_DISSIPATION );
    blit( pressure.second[ 1 ] );
    pressure.swap();

    pressureProgram.bind();
    gl.uniform2f( pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( pressureProgram.uniforms.uDivergence, divergence[ 2 ] );
    pressureTexId = pressure.first[ 2 ];
    gl.activeTexture( gl.TEXTURE0 + pressureTexId );

    for ( var _i = 0; _i < config.PRESSURE_ITERATIONS; _i++ ) {
        gl.bindTexture( gl.TEXTURE_2D, pressure.first[ 0 ] );
        gl.uniform1i( pressureProgram.uniforms.uPressure, pressureTexId );
        blit( pressure.second[ 1 ] );
        pressure.swap();
    }

    gradienSubtractProgram.bind();
    gl.uniform2f( gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight );
    gl.uniform1i( gradienSubtractProgram.uniforms.uPressure, pressure.first[ 2 ] );
    gl.uniform1i( gradienSubtractProgram.uniforms.uVelocity, velocity.first[ 2 ] );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
    displayProgram.bind();
    gl.uniform1i( displayProgram.uniforms.uTexture, density.first[ 2 ] );
    blit( null );

    requestAnimationFrame( update );

}

function splat( x, y, dx, dy, color ) {

    splatProgram.bind();
    gl.uniform1i( splatProgram.uniforms.uTarget, velocity.first[ 2 ] );
    gl.uniform1f( splatProgram.uniforms.aspectRatio, canvas.width / canvas.height );
    gl.uniform2f( splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height );
    gl.uniform3f( splatProgram.uniforms.color, dx, -dy, 1.0 );
    gl.uniform1f( splatProgram.uniforms.radius, config.SPLAT_RADIUS );
    blit( velocity.second[ 1 ] );
    velocity.swap();

    gl.uniform1i( splatProgram.uniforms.uTarget, density.first[ 2 ] );
    gl.uniform3f( splatProgram.uniforms.color, color[ 0 ] * 0.3, color[ 1 ] * 0.3, color[ 2 ] * 0.3 );
    blit( density.second[ 1 ] );
    density.swap();

}

function resizeCanvas() {

    ( canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight ) && ( canvas.width  = canvas.clientWidth, canvas.height = canvas.clientHeight, initFramebuffers() );

}

var count    = 0;
var colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ];

canvas.addEventListener( 'mousemove', function ( e ) {

    count++;

    ( count > 25 ) && (colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ], count = 0);

    pointers[ 0 ].down  = true;
    pointers[ 0 ].color = colorArr;
    pointers[ 0 ].moved = pointers[ 0 ].down;
    pointers[ 0 ].dx    = (e.offsetX - pointers[ 0 ].x) * 10.0;
    pointers[ 0 ].dy    = (e.offsetY - pointers[ 0 ].y) * 10.0;
    pointers[ 0 ].x     = e.offsetX;
    pointers[ 0 ].y     = e.offsetY;

} );

canvas.addEventListener( 'touchmove', function ( e ) {

    e.preventDefault();

    var touches = e.targetTouches;

    count++;

    ( count > 25 ) && (colorArr = [ Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2 ], count = 0);

    for ( var i = 0, len = touches.length; i < len; i++ ) {

        if ( i >= pointers.length ) pointers.push( new pointerPrototype() );

        pointers[ i ].id    = touches[ i ].identifier;
        pointers[ i ].down  = true;
        pointers[ i ].x     = touches[ i ].pageX;
        pointers[ i ].y     = touches[ i ].pageY;
        pointers[ i ].color = colorArr;

        var pointer = pointers[ i ];

        pointer.moved = pointer.down;
        pointer.dx    = (touches[ i ].pageX - pointer.x) * 10.0;
        pointer.dy    = (touches[ i ].pageY - pointer.y) * 10.0;
        pointer.x     = touches[ i ].pageX;
        pointer.y     = touches[ i ].pageY;

    }

}, false );

function m( t ) {

    for ( var e, n = document.getElementById( t ), i = n.innerHTML.replace( "&amp;", "&" ).split( "" ), a = "", o = 0, s = i.length; s > o; o++ ) {
        e = i[ o ].replace( "&", "&amp" );
        a += e.trim() ? '<span class="letter-' + o + '">' + e + "</span>" : "&nbsp;";
    }

    n.innerHTML = a;

    setTimeout( function () {
        n.className = "transition-in";
    }, 500 * Math.random() + 500 );

}

window.onload = function() {
    m( "h1" );
};
</script>
<canvas></canvas>
<h1 id="h1">Smoke Simulation</h1>

[/html]

[html]
<style>
.cc
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.bc
{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*============================*/
/*============TREE============*/

.tree
{
  width: 70vh;
  height: 80%;
}

.segment::before
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #1f4f15 transparent;
  border-radius: 40%;
}

.segment
{
  top: 35%;
  overflow: hidden;
}

.segment::after
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-color: transparent transparent #F9F9F9 transparent;
  border-radius: 35%;
}

.segment[value="0"]{width: 70vh; height: 70vh; z-index:0;}
.segment[value="1"]{width: 50vh; height: 50vh; z-index:1;}
.segment[value="2"]{width: 30vh; height: 30vh; z-index:2;}
.segment[value="0"]::before{border-width: 35vh;}
.segment[value="1"]::before{border-width: 25vh;}
.segment[value="2"]::before{border-width: 15vh;}
.segment[value="0"]::after{border-width: 23.5vh;}
.segment[value="1"]::after{border-width: 14vh;}
.segment[value="2"]::after{border-width: 7vh;}

.highlight
{
  position: absolute;
  width: 10%;
  height: 35%;
  bottom: 3.25%;
  left: 67.25%;
  border-radius: 0 0 0 100%;
  transform: rotate(-45deg);
  background: #216315;
}

.stump
{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 15vh;
  height: 25vh;
  background: #3f2b27;
  transform: translateX(-50%);
  border-radius: 6vh;
  overflow: hidden;
}

.stump::after
{
  content: ' ';
  position: absolute;
  right: 0;
  width: 15%;
  height: 100%;
  background: #47332b;
  border-radius: 0 0 0 100%;
}

.ball
{
  position: absolute;
  bottom: 0;
  width: 5vh;
  height: 5vh;
  border-radius: 5vh;
  background: #7a3232;
  transform-origin: 50% -50%;
  transition: all 0.2s ease-in-out;
  z-index: 3;
}
.ball::after
{
  content: ' ';
  position: absolute;
  top: 10%;
  right: 12.5%;
  width: 50%;
  height: 40%;
  border-radius: 100%;
  background: #D14B4B;
}

.ball:nth-child(1)
{
    bottom: 10%;
    left: 20%;
}

.ball:nth-child(2)
{
    bottom: 7.5%;
    left: 65%;
}

.ball:nth-child(3)
{
    bottom: 3%;
    left: 42.5%;
}

/*============TREE============*/
/*============================*/

/*============================*/
/*==========PRESENTS==========*/
.present:before
{
  content: ' ';
  display: none;
}

.present.open::before
{
  position: absolute;
  width: 100%;
  height: 35%;
  transform: translateY(-100%);
  background: #5B1616;
  border-radius: 10%;
  display: block;
}

.present
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 12vh;
  height: 12vh;
  background: #7f2121;
  transition: transform 0.2s ease-in;
  transform-origin: center center;
  border-radius: 10%;
  cursor: pointer;
}

.bow
{
  width: 30%;
  height: 100%;
  background: #D4C228;
  z-index: 2;
}

.bow::after
{
  content: ' ';
  display: block;
  width: 90%;
  height: 100%;
  background: #E0CF43;
  transform: rotate(90deg);
}

.bow:nth-child(2)
{
  top: 0;
  left: -62.5%;
  width: 175%;
  height: 30%;
  transform: translate(14%,-100%) scale(0.575);
  z-index: 2;
  background: #847A23;
  display: none;
}

.bow:nth-child(2)::after
{
  position: absolute;
  top: -49%;
  left: 31.5%;
  width: 37.5%;
  height: 175%;
  background: #9D912D;
}

.present.open .bow:nth-child(2)
{
  display: block;
}
/*==========PRESENTS==========*/
/*============================*/
/*============================*/
/*==========LETTERS===========*/
.letter
{
  position: absolute;
  font-size: 5vh;
  color: white;
  transition: all 1.2s ease-in-out;
  text-align: center;
}
/*==========LETTERS===========*/
/*============================*/
</style>
<script>
/*
  * Made by C.Dinkelborg for GetDigital
  * Geekolaus Aktion
  * Aktionscode: G6NK5AUVB
  * @2016 all rights reserved
*/

var balls = document.getElementsByClassName("ball");

var presents = document.getElementsByClassName("present");

for(var i=0; i<balls.length; i++)
{
  balls[i].addEventListener("mouseover",onMouseOverBall);
  balls[i].addEventListener("touchstart",onMouseOverBall);
};

for(var i=0; i<presents.length; i++)
{
  presents[i].addEventListener("mouseover",onMouseOverPresent);
  presents[i].addEventListener("click",onClickPresent);
};

function onMouseOverBall(e)
{
  if(!this.swinging)
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of ball
    {
      this.swinging = true;
      this.style.transform = "rotate(-45deg)";
      setTimeout(function(){swing(this,300-70)}.bind(this),300);
    }
    else
    {
      this.swinging = true;
      swing(this,300);
    }
  }
}

function swing(ball,time)
{
  //console.log(ball);
  if(ball.style.transform == "rotate(45deg)")
  {
    ball.style.transform = "rotate(-45deg)";
  }
  else
  {
    ball.style.transform = "rotate(45deg)";
  }
  if(time>0)
  {
    setTimeout(function()
    {
      swing.call(this, ball,time-70);
    },time);
  }
  else
  {
    ball.style.transform = "";
    ball.swinging = false;
  }
}

function onMouseOverPresent(e)
{
  if(!this.wiggling && !this.classList.contains("open"))
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of present
    {
      this.wiggling = true;
      this.style.transform = "rotate(45deg)";
      setTimeout(function(){wiggle(this,300-70,"left")}.bind(this),300);
    }
    else
    {
      this.wiggling = true;
      wiggle(this,300,"right");
    }
  }
}

function onClickPresent()
{
  setTimeout(function()
  {
    this.classList.add("open");
    unfold();
  }.bind(this),1000);
}

function wiggle(present,time,direction)
{
  if(direction == "left")
  {
    if(present.style.transform == "rotate(45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(45deg)";
    }
  }
  else
  {
    if(present.style.transform == "rotate(-45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(-45deg)";
    }
  }
  if(time>0)
  {
    setTimeout(function()
    {
      wiggle.call(this, present,time-70,(direction == "left")?"right":"left");
    },time);
  }
  else
  {
    present.style.transform = "";
    present.wiggling = false;
  }
}

var letters = document.getElementsByClassName("letter");
function unfold()
{
  for(var i=0; i<letters.length; i++)
  {
    letters[i].style.top = "-75vh";
    letters[i].style.transform = "translateY("+i*5+"vh)";
  }
}

//SNOW EFFECT WITH KIND SUPPORT FROM
//http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
    particles.push({
    x: Math.random()*W, //x-coordinate
    y: Math.random()*H, //y-coordinate
    r: Math.random()*4+1, //radius
    d: Math.random()*mp //density
    })
}

//Lets draw the flakes
function draw()
{
    ctx.clearRect(0, 0, W, H);
   
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.beginPath();
    for(var i = 0; i < mp; i++)
    {
    var p = particles[i];
    ctx.moveTo(p.x, p.y);
    ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
    }
    ctx.fill();
    update();
}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
    angle += 0.01;
    for(var i = 0; i < mp; i++)
    {
    var p = particles[i];
    //Updating X and Y coordinates
    //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
    //Every particle has its own density which can be used to make the downward movement different for each flake
    //Lets make it more random by adding in the radius
    p.y += Math.cos(angle+p.d) + 1 + p.r/2;
    p.x += Math.sin(angle) * 2;
   
    //Sending flakes back from the top when it exits
    //Lets make it a bit more organic and let flakes enter from the left and right also.
    if(p.x > W+5 || p.x < -5 || p.y > H)
    {
        if(i%3 > 0) //66.67% of the flakes
        {
        particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
        }
        else
        {
        //If the flake is exitting from the right
        if(Math.sin(angle) > 0)
        {
            //Enter from the left
            particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
        }
        else
        {
            //Enter from the right
            particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
        }
        }
    }
    }
}

//animation loop
setInterval(draw, 33);
}
</script>
<canvas id="canvas"></canvas>

<div class="tree cc">
  <div class="stump">
  </div>
  <div class="segment cc" value="0">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="highlight bc"></div>
    <div class="segment cc" value="1">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="highlight bc"></div>
      <div class="segment cc" value="2">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="highlight bc"></div>
      </div>
    </div>
  </div>
  <div class="present">
    <div class="bow cc"></div>
    <div class="bow cc"></div>
    <div class="letter cc">F</div>
    <div class="letter cc">R</div>
    <div class="letter cc">O</div>
    <div class="letter cc">H</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc"> </div>
    <div class="letter cc">F</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc">T</div>
    <div class="letter cc">!</div>
  </div>
</div>

[/html]

[html]
<style>
.nav-list{
  list-style:none;
}

.nav-list a{
  text-decoration:none;
  transition:color 0.3s ease-out;
  color:inherit;
}

.nav-list li{
  position:relative;
  display:inline-block;
  margin:5px;
  letter-spacing:-1px;
}

.download:after,
.download:before,
.download a:after,
.download a:before{
  background-color:#CEDD3E;
}

.download:hover{
  color:#CEDD3E
}

.features:after,
.features:before,
.features a:after,
.features a:before{
  background-color:#F27132;
}

.features:hover{
  color:#F27132;
}

.method:after,
.method:before,
.method a:after,
.method a:before{
  background-color:#85C3E9;
}

.method:hover{
  color:#85C3E9;
}

.purchase:after,
.purchase:before,
.purchase a:after,
.purchase a:before{
  background-color:#FDBE2A;
}

.purchase:hover{
  color:#FDBE2A;
}

.nav-list li:after,
.nav-list li:before,
.nav-list  a:before,
.nav-list  a:after{
  position:absolute;
  content:'';
  border-radius:4px;
}

.nav-list li:after,
.nav-list li:before{
  bottom:-4px;
  height:4px;
}

.nav-list li:not(.selected):before{
  left:0;
  right:-2px;
}

.nav-list li.selected:after{
  left:0;
  right:39px;
}

.nav-list li.selected:before{
  right:-2px;
  width:13px;
}

.nav-list .selected a:before{
  height:22px;
  width:4px;
  bottom:-22px;
  right:7px;
}

.nav-list .selected a:after{
  height:4px;
  width:40px;
  bottom:-13px;
  right:5px;
  transform:rotate(30deg);
}

/* Booring stuff*/

body{
  font-family: 'Varela Round', sans-serif;
}

.wrapper{
  width:500px;
  margin:0 auto;
}

h1{
  text-align:center;
  padding-bottom:.5em;
}

footer{
  margin-top:5em;
  float:right;
  font-size:.7em;
}

footer a{
  color:#79B1D4;
  text-decoration:none;
}

footer a:hover{
  border-bottom:1px solid black;
}

.red{
  color:#F27132;
}
</style>
<script>
var $navList = $('.nav-list');

$navList.on('click', 'li:not(.selected)', function(e){
  $navList.find(".selected").removeClass("selected");
  $(e.currentTarget).addClass("selected");
});
</script>

<div class="wrapper" style="height:200px">
  <!--ul.nav-list>li*5>a-->
  <ul class="nav-list">
    <li class="download selected"><a href="#">Download</a></li>
    <li class="features"><a href="#">Features</a></li>
    <li class="method"><a href="#">Method</a></li>
    <li class="purchase"><a href="#">Purchase</a></li>
  </ul>
</div>

[/html]

[html]<style>
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
.container {
  height: 200px;
  font-family: Lora, serif;
  overflow-x: hidden;
}

.slide {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.2em;
  color: white;
  background-size: cover;
  background-position: center;

  h1 {
    font-size: 250%;
    text-shadow: 0 2px 2px black;
  }
}

#slide1 {
  background-image: url("https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg");
}

#slide2 {
  background-image: url("https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg");
}

#slide3 {
  background-image: url("https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg");
}

#slide4 {
  background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
}

</style>
<script>

</script>
<main class="container">
  <section class="slide sticky" id="slide1">
    <h1>Pure CSS Sticky Sections</h1>
  </section>
  <section class="slide sticky" id="slide2">
    <h1>Set to full page for best experience.</h1>
  </section>
  <section class="slide sticky" id="slide3">
    <h1>No JavaScript Required</h1>
  </section>
  <section class="slide sticky" id="slide4">
    <h1>End</h1>
  </section>
</main>

[/html]

[html]
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #404040;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .4px;
  background: #eee;
  padding-top: 30px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
  margin: 20px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #549D3C;
  cursor: pointer;
  -ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

</style>

<html lang="en">

<head>
  <title>Pure CSS Material Design cards</title>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2">
        <div class="card">

          <div class="image">
            <img src="http://assets.materialup.com/uploads/fc97b003-ba72-4c6e-9dd3-19bf5002c244/preview.jpg" width="100%">
          </div>

          <div class="text">
           
            <div class="fab">+</div>

            <h3>Descrição da funcionalidade deve vir abaixo do título do caso de uso.</h3>
            <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>

          </div>

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

</body>

</html>

[/html]

[html]
<style>
span{
  -webkit-transition:all 10s ease-in;
  transition:all 10s ease-in;
  display:inline-block;
}
.fallen{
  -webkit-transform:translate(0,1000px);
  transform:translate(0,1000px);
}
p{
margin:3em 5em;
  font-family:Georgia,serif;
  font-size:large;
  color:#cde ;
 
}
html{
  background:#082940;
}
</style>
<script>
var p = $('p');
p.each(function(){
    var t = $(this).text().replace(/\s/g, unescape('%a0')); /* Spaces collapse, so make them non-breaking */
    var o = '';
    for(var i = 0; i< t.length; i++){
        o += '<span class="normal">' + t[i] + '</span>';
    }
    $(this).html(o);
});

function lift(){
$('.fallen').removeClass('fallen').addClass('normal');
window.setTimeout(drop, 60);
}

function drop(){
  var s = $('span.normal');
  if (s.length == 0){
   window.setTimeout(lift, 10000);
   return;
  }
 
  s.eq(Math.floor(Math.random() *   s.length)).addClass('fallen').removeClass('normal');
window.setTimeout(drop, 60);
}

drop();

</script>
<p>Seen from the Pequod's deck, then, as she would rise on a high hill of the sea, this host of vapoury spouts, individually curling up into the air, and beheld through a blending atmosphere of bluish haze, showed like the thousand cheerful chimneys of some dense metropolis, descried of a balmy autumnal morning, by some horseman on a height.</p>

[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Lato');

body {
  background-color: #F2F3F4;
}

#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}

h1 {
  padding-top:30px;
  font-size:25px;
  letter-spacing:15px;
  color: #3AB09E;
}

#toolbar { 
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}

.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}

.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}

.button:after {
  content:"+";
}

.button.active {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
  left:60px;
}

.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}

.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}

.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}

.icons.open li {
  width:16%;
  display: inline-block;
}

</style>
<script>
$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );

});
</script>

<div id="wrapper">
   <h1>Animated toolbar</h1>
<div id="toolbar">
  <div class="button"></div>
  <ul class="icons">
    <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
    <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
    <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
    <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
    <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
  </ul>

</div>
</div>
[/html]

[hideprofile][html]
<style>
body {
  line-height: 1.5;
  padding: 0 1.5rem;
}
   
a {
  color: blue; 
}
 
p {
  margin-bottom: 1.5rem;
  margin-top: 0;
}
 
.post {
  margin: 0 auto;
  max-width: 30em;
}
 
.post-marker::before {
  content: "\00a0"; /* A non-breaking space glues a marker to its target word. */
  font-size: 0.25em;
}
 
.post-marker a {
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
}
   
.post-marker a::before {
  content: "["; 
}
 
.post-marker a::after {
  content: "]"; 
}
   
.post-subject {
  position: relative; 
}
   
.post-sidenote {
  box-sizing: border-box;
  color: #999;
  display: none;
  font-style: italic;
  left: 100%;
  padding-left: 1.5rem;
  position: absolute;
  top: 0;
  width: 33.333333%;
}
 
.post-footnotes {
  border-top: 1px solid #999;
  color: #999;
  padding-top: 1.5rem;
}

@media screen and (min-width: 50em) {
  .post.has-sidenotes .post-marker {
    display: none;
  }
     
  .post.has-sidenotes .post-sidenote {
    display: block;
  }
 
  .post.has-sidenotes .post-footnotes { 
    display: none;
  }
}

</style>
<script>
var $post = $('.post'),
    $markers = $('.post-marker'),
    $footnotes = $('.post-footnotes');

function createSidenotes() {
    var $footnoteArray = $footnotes.children();

    $markers.parent().wrap("<div class='post-subject'></div>");

    for (var i = 0, len = $markers.length; i < len; i++) {
        $($('.post-subject')[i]).append(
            // role='complementary' provided for ARIA support
            "<aside class='post-sidenote' role='complementary'><p>"
            + $($footnoteArray[i]).html()
            + "</p></aside>"
        );
    }
 
    $post.addClass('has-sidenotes');
}

createSidenotes();
</script>
<article class="post">
  <h1>Responsive Footnotes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita atque cum nihil nostrum voluptatibus dolor possimus totam delectus rerum harum. Nisi perspiciatis neque modi harum quidem laudantium earum possimus. Fugit dolorem quam doloremque tempore sequi nesciunt id sint culpa harum maxime quidem quibusdam et dolore eum maiores expedita sunt laboriosam quos illo ratione autem soluta veniam.<sup class="post-marker"><a href="#note:1">1</a></sup> Nostrum architecto omnis quod sunt ratione mollitia cupiditate ipsa tempore!</p>
  <p>Architecto blanditiis hic doloribus amet ullam molestiae necessitatibus iure dolor et adipisci possimus id omnis error optio est pariatur porro sapiente eligendi maiores eaque voluptas veritatis expedita sed aliquam consectetur? Expedita itaque quaerat veniam pariatur! Officia adipisci beatae unde quaerat quisquam eveniet est dolorem voluptatem numquam animi.</p>
  <p>Perspiciatis atque voluptas voluptatum eligendi minima officia tenetur. Qui asperiores animi pariatur sapiente error velit eius veritatis nisi blanditiis ratione iure vero hic nesciunt maiores sint ab provident iste neque aliquid impedit delectus eaque voluptatum sequi tempore reprehenderit nulla accusantium. Voluptas porro temporibus quisquam officiis neque tempore sunt maiores iste quos in. Ipsum eveniet doloremque voluptas perferendis veritatis! Ullam amet quam totam commodi consectetur et ducimus.<sup class="post-marker"><a href="#note:2">2</a></sup></p>
  <p>Quasi animi ex error recusandae dolor rerum saepe numquam veritatis ducimus pariatur aliquam praesentium quaerat alias sequi qui aperiam ad inventore quibusdam fuga voluptates consectetur minus labore?<sup class="post-marker"><a href="#note:3">3</a></sup> Totam eaque adipisci dolorum delectus magnam inventore praesentium hic perferendis odit amet maxime nesciunt nisi. Sit a asperiores error pariatur iste nam aut repellendus at ipsa nulla earum distinctio hic quisquam aperiam laudantium delectus placeat voluptatum inventore obcaecati possimus! Magni veniam praesentium natus laboriosam fuga itaque accusantium sequi labore expedita voluptate ullam fugiat nobis non iusto ex nihil.</p>
  <ol class="post-footnotes">
    <li id="note:1">Read the tutorial <a href="http://johndjameson.com/blog/responsive-sidenotes/">here</a>.</li>
    <li id="note:2">Saepe nisi dolor ex qui et iusto molestiae?</li>
    <li id="note:3">Voluptas ex quam blanditiis quia placeat in ut maiores illum fuga itaque quos fugiat eos mollitia cum neque ipsam.</li>
  </ol>
</article>
[/html]

[html]
<script>
/*
* @author  - @sebagarcia
* @version 1.1.0
* Inspired & based on "Particleground" by Jonathan Nicol
*/

;(function(window, document) {
  "use strict";
  var pluginName = 'particleground';

  // http://youmightnotneedjquery.com/#deep_extend
  function extend(out) {
    out = out || {};
    for (var i = 1; i < arguments.length; i++) {
      var obj = arguments[i];
      if (!obj) continue;
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object')
            deepExtend(out[key], obj[key]);
          else
            out[key] = obj[key];
        }
      }
    }
    return out;
  };

  var $ = window.jQuery;

  function Plugin(element, options) {
    var canvasSupport = !!document.createElement('canvas').getContext;
    var canvas;
    var ctx;
    var particles = [];
    var raf;
    var mouseX = 0;
    var mouseY = 0;
    var winW;
    var winH;
    var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
    var orientationSupport = !!window.DeviceOrientationEvent;
    var tiltX = 0;
    var pointerX;
    var pointerY;
    var tiltY = 0;
    var paused = false;

    options = extend({}, window[pluginName].defaults, options);

    /**
     * Init
     */
    function init() {
      if (!canvasSupport) { return; }

      //Create canvas
      canvas = document.createElement('canvas');
      canvas.className = 'pg-canvas';
      canvas.style.display = 'block';
      element.insertBefore(canvas, element.firstChild);
      ctx = canvas.getContext('2d');
      styleCanvas();

      // Create particles
      var numParticles = Math.round((canvas.width * canvas.height) / options.density);
      for (var i = 0; i < numParticles; i++) {
        var p = new Particle();
        p.setStackPos(i);
        particles.push(p);
      };

      window.addEventListener('resize', function() {
        resizeHandler();
      }, false);

      document.addEventListener('mousemove', function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      }, false);

      if (orientationSupport && !desktop) {
        window.addEventListener('deviceorientation', function () {
          // Contrain tilt range to [-30,30]
          tiltY = Math.min(Math.max(-event.beta, -30), 30);
          tiltX = Math.min(Math.max(-event.gamma, -30), 30);
        }, true);
      }

      draw();
      hook('onInit');
    }

    /**
     * Style the canvas
     */
    function styleCanvas() {
      canvas.width = element.offsetWidth;
      canvas.height = element.offsetHeight;
      ctx.fillStyle = options.dotColor;
      ctx.strokeStyle = options.lineColor;
      ctx.lineWidth = options.lineWidth;
    }

    /**
     * Draw particles
     */
    function draw() {
      if (!canvasSupport) { return; }

      winW = window.innerWidth;
      winH = window.innerHeight;

      // Wipe canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Update particle positions
      for (var i = 0; i < particles.length; i++) {
        particles[i].updatePosition();
      };
      // Draw particles
      for (var i = 0; i < particles.length; i++) {
        particles[i].draw();
      };

      // Call this function next time screen is redrawn
      if (!paused) {
        raf = requestAnimationFrame(draw);
      }
    }

    /**
     * Add/remove particles.
     */
    function resizeHandler() {
      // Resize the canvas
      styleCanvas();

      var elWidth = element.offsetWidth;
      var elHeight = element.offsetHeight;

      // Remove particles that are outside the canvas
      for (var i = particles.length - 1; i >= 0; i--) {
        if (particles[i].position.x > elWidth || particles[i].position.y > elHeight) {
          particles.splice(i, 1);
        }
      };

      // Adjust particle density
      var numParticles = Math.round((canvas.width * canvas.height) / options.density);
      if (numParticles > particles.length) {
        while (numParticles > particles.length) {
          var p = new Particle();
          particles.push(p);
        }
      } else if (numParticles < particles.length) {
        particles.splice(numParticles);
      }

      // Re-index particles
      for (i = particles.length - 1; i >= 0; i--) {
        particles[i].setStackPos(i);
      };
    }

    /**
     * Pause particle system
     */
    function pause() {
      paused = true;
    }

    /**
     * Start particle system
     */
    function start() {
      paused = false;
      draw();
    }

    /**
     * Particle
     */
    function Particle() {
      this.stackPos;
      this.active = true;
      this.layer = Math.ceil(Math.random() * 3);
      this.parallaxOffsetX = 0;
      this.parallaxOffsetY = 0;
      // Initial particle position
      this.position = {
        x: Math.ceil(Math.random() * canvas.width),
        y: Math.ceil(Math.random() * canvas.height)
      }
      // Random particle speed, within min and max values
      this.speed = {}
      switch (options.directionX) {
        case 'left':
          this.speed.x = +(-options.maxSpeedX + (Math.random() * options.maxSpeedX) - options.minSpeedX).toFixed(2);
          break;
        case 'right':
          this.speed.x = +((Math.random() * options.maxSpeedX) + options.minSpeedX).toFixed(2);
          break;
        default:
          this.speed.x = +((-options.maxSpeedX / 2) + (Math.random() * options.maxSpeedX)).toFixed(2);
          this.speed.x += this.speed.x > 0 ? options.minSpeedX : -options.minSpeedX;
          break;
      }
      switch (options.directionY) {
        case 'up':
          this.speed.y = +(-options.maxSpeedY + (Math.random() * options.maxSpeedY) - options.minSpeedY).toFixed(2);
          break;
        case 'down':
          this.speed.y = +((Math.random() * options.maxSpeedY) + options.minSpeedY).toFixed(2);
          break;
        default:
          this.speed.y = +((-options.maxSpeedY / 2) + (Math.random() * options.maxSpeedY)).toFixed(2);
          this.speed.x += this.speed.y > 0 ? options.minSpeedY : -options.minSpeedY;
          break;
      }
    }

    /**
     * Draw particle
     */
    Particle.prototype.draw = function() {
      // Draw circle
      ctx.beginPath();
      ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();

      // Draw lines
      ctx.beginPath();
      // Iterate over all particles which are higher in the stack than this one
      for (var i = particles.length - 1; i > this.stackPos; i--) {
        var p2 = particles[i];

        // Pythagorus theorum to get distance between two points
        var a = this.position.x - p2.position.x
        var b = this.position.y - p2.position.y
        var dist = Math.sqrt((a * a) + (b * b)).toFixed(2);

        // If the two particles are in proximity, join them
        if (dist < options.proximity) {
          ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
          if (options.curvedLines) {
            ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
          } else {
            ctx.lineTo(p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
          }
        }
      }
      ctx.stroke();
      ctx.closePath();
    }

    /**
     * update particle position
     */
    Particle.prototype.updatePosition = function() {
      if (options.parallax) {
        if (orientationSupport && !desktop) {
          // Map tiltX range [-30,30] to range [0,winW]
          var ratioX = (winW - 0) / (30 - -30);
          pointerX = (tiltX - -30) * ratioX + 0;
          // Map tiltY range [-30,30] to range [0,winH]
          var ratioY = (winH - 0) / (30 - -30);
          pointerY = (tiltY - -30) * ratioY + 0;
        } else {
          pointerX = mouseX;
          pointerY = mouseY;
        }
        // Calculate parallax offsets
        this.parallaxTargX = (pointerX - (winW / 2)) / (options.parallaxMultiplier * this.layer);
        this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10; // Easing equation
        this.parallaxTargY = (pointerY - (winH / 2)) / (options.parallaxMultiplier * this.layer);
        this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10; // Easing equation
      }

      var elWidth = element.offsetWidth;
      var elHeight = element.offsetHeight;

      switch (options.directionX) {
        case 'left':
          if (this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
            this.position.x = elWidth - this.parallaxOffsetX;
          }
          break;
        case 'right':
          if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth) {
            this.position.x = 0 - this.parallaxOffsetX;
          }
          break;
        default:
          // If particle has reached edge of canvas, reverse its direction
          if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth || this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
            this.speed.x = -this.speed.x;
          }
          break;
      }

      switch (options.directionY) {
        case 'up':
          if (this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
            this.position.y = elHeight - this.parallaxOffsetY;
          }
          break;
        case 'down':
          if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight) {
            this.position.y = 0 - this.parallaxOffsetY;
          }
          break;
        default:
          // If particle has reached edge of canvas, reverse its direction
          if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight || this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
            this.speed.y = -this.speed.y;
          }
          break;
      }

      // Move particle
      this.position.x += this.speed.x;
      this.position.y += this.speed.y;
    }

    /**
     * Setter: particle stacking position
     */
    Particle.prototype.setStackPos = function(i) {
      this.stackPos = i;
    }

    function option (key, val) {
      if (val) {
        options[key] = val;
      } else {
        return options[key];
      }
    }

    function destroy() {
      console.log('destroy');
      canvas.parentNode.removeChild(canvas);
      hook('onDestroy');
      if ($) {
        $(element).removeData('plugin_' + pluginName);
      }
    }

    function hook(hookName) {
      if (options[hookName] !== undefined) {
        options[hookName].call(element);
      }
    }

    init();

    return {
      option: option,
      destroy: destroy,
      start: start,
      pause: pause
    };
  }

  window[pluginName] = function(elem, options) {
    return new Plugin(elem, options);
  };

  window[pluginName].defaults = {
    minSpeedX: 0.1,
    maxSpeedX: 0.7,
    minSpeedY: 0.1,
    maxSpeedY: 0.7,
    directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
    directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
    density: 10000, // How many particles will be generated: one particle every n pixels
    dotColor: '#666666',
    lineColor: '#666666',
    particleRadius: 7, // Dot size
    lineWidth: 1,
    curvedLines: false,
    proximity: 100, // How close two dots need to be before they join
    parallax: true,
    parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect
    onInit: function() {},
    onDestroy: function() {}
  };

  // nothing wrong with hooking into jQuery if it's there...
  if ($) {
    $.fn[pluginName] = function(options) {
      if (typeof arguments[0] === 'string') {
        var methodName = arguments[0];
        var args = Array.prototype.slice.call(arguments, 1);
        var returnVal;
        this.each(function() {
          if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
            returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
          }
        });
        if (returnVal !== undefined){
          return returnVal;
        } else {
          return this;
        }
      } else if (typeof options === "object" || !options) {
        return this.each(function() {
          if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
          }
        });
      }
    };
  }

})(window, document);

/**
* requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
* @see: http://paulirish.com/2011/requestanimat … animating/
* @see: http://my.opera.com/emoller/blog/2011/1 … -animating
* @license: MIT license
*/
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                 || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
}());

document.addEventListener('DOMContentLoaded', function () {
  particleground(document.getElementById('particles'), {
    dotColor: '#eee',
    lineColor: '#eee'
  });
  var intro = document.getElementById('intro');
  intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);

</script>
<div id="particles">
  <div class="overlay"></div>
</div>

[/html]

[html]
<style>
/* Buttons at the center */

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -259px;
  margin-left: -89px;
  text-align: center;
}

/* General styling for the links */

a {
  padding: 15px 30px;
  text-decoration: none;
  font-size: 18px;
  display: block;
  margin: 20px auto;
}

/* BUTTON 1 */

.btn, .btn:link, .btn:visited {
  color: #2c3e50;
  line-height: 1em;
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  background-color: #fff;
  background-color: rgba(255,255,255, 0);
  box-shadow: 0 0 0 0 #2c3e50 inset, 0.3em 0.2em 0 0 #bbb;
  border: 0.2em solid #2c3e50;
  padding: 0.8em;
  text-align: center;
  transition: 0.25s box-shadow, 0.25s transform;
 
  &:hover {
    box-shadow: 0 4em 0 0 #2c3e50 inset, 0em 0em 0 0 #bbb;
    transform: translate(0.3em, 0.2em);
    color: #fff;
  }
}

/* BUTTON 2 */

.btn2, .btn2:link, .btn2:visited {
   background-color: #5b657c;
   border: none;
   border-radius: 3px;
   box-shadow: 0 -3px 0 rgba(0,0,0,0.15) inset;
   color: #fff;
  letter-spacing: .1em;
   cursor: pointer;
   position: relative;
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
   white-space: nowrap;
  transition-property: transform;
  transform: translateZ(0);
  transition: box-shadow 0.5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
   
   &:hover {
     box-shadow: 0 0 0 28px rgba(0,0,0,0.25) inset;
   }
 
  &:active {
    transform: translateY(3px);
  }
}

/* BUTTON 3 */

.btn3, .btn3:link, .btn3:visited {
  color: #333;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 100px;
  max-width: 60%;
  position: relative;
  margin: 0 auto;
  border: 2px solid transparent;
  transition: all .2s cubic-bezier(0.455, 0.030, 0.515, 0.955);

  &:after, &:before {
    content: "";
    position: absolute;
    left: - 1em;
    top: -2px;
    height: 3.3em;
    width: 0;
    border: 1px solid #c75842;
    transition: inherit;
  }

  &:after {
    left: auto;
    right: -1em;
  }

  &:hover {
    border-color: #c75842;
    transition: border-color .2s .2s cubic-bezier(0.455, 0.030, 0.515, 0.955);
   
    &:after, &:before {
      right: -2px;     
      transition: all .2s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
   
    &:before {
      left: -2px;
      right: auto;
    }
  }
}

/* BUTTON 4 */

.btn4, .btn4:link, .btn4:visited {
  background: #f1c40f;
  color: #fefefe;
  transition: box-shadow .18s ease;
 
  &:hover {
    box-shadow: inset 0 0 0 5px darken(#f1c40f, 10%);
  }
}

/* BUTTON 5 */

.btn5, .btn5:link, .btn5:visited {
  border: none;
  outline: none;
  color: #fefefe;
  background-color: #9b59b6;
  border-radius: 3px;
 
  &:hover, &:focus {
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: gelatine 0.5s 1;
  }
}

// Bourbon mixin

@include keyframes(gelatine) {
  from,to {
    @include transform(scale(1, 1));
  }
  25% {
    @include transform(scale(0.9, 1.1));
  }
  50% {
    @include transform(scale(1.1, 0.9));
  }
  75% {
    @include transform(scale(0.95, 1.05));
  }
  from,to {
    @include transform(scale(1, 1));
  }
  25% {
    @include transform(scale(0.9, 1.1));
  }
  50% {
    @include transform(scale(1.1, 0.9));
  }
  75% {
    @include transform(scale(0.95, 1.05));
  }
}

/* BUTTON 6 */

.btn6, .btn6:link, .btn6:visited {
  padding: 13px 0;
  border: 1px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
 
  &:hover {
    background: #333;
    border: 1px solid #333;
    color: #fefefe;
    border-radius: 30px;
  }
}

</style>
<div class="wrap">
  <a href="#" class="btn">Cool Button</a>
  <a href="#" class="btn2">Cool Button</a>
  <a href="#" class="btn3">Cool Button</a>
  <a href="#" class="btn4">Cool Button</a>
  <a href="#" class="btn5">Cool Button</a>
  <a href="#" class="btn6">Cool Button</a></a>
</div>

[/html]