HomeAll Tutorials

HTML5 Animated 3D Card

Memasang kode HTML5 Animated 3D Card
Kode ini menampilkan Gambar serta musik Mp3. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="mys2010-styles">
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(http://Link Gambar.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}

div#scatter {
  perspective: 700px;
  width: 100%;
  height: 493px;
  overflow: hidden;
  background: linear-gradient(#000  0%, #fff 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#Sule  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#Sule  { transform: translateX(30%) rotateZ(700deg);
}
figure a#Mys2010 {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#Mys2010 {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}

figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }</style>
</head><body>
<div id="scatter">
<figure id="desk">
<a href="#" id="Sule">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
<a href="#" id="Mys2010">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
</figure>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
(function () {
    var desk = document.getElementById('desk');
    var links = desk.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        links[i].addEventListener('click', handler, false);
    }
    window.CP.exitedLoop(1);
    ;
    function handler(e) {
        e.preventDefault();
        var x = e.target;
        var video = x.querySelector('video');
        x.play();
        x.parentNode.classList.add('playing');
    }
    ;
}());
//# sourceURL=pen.js
</script>
Penjelsan :
Terapkan Link Musik dan Link Gambar pada kode yang diwarnai
Edited by. Myscript2010
Sources by. Dudley Storey  on Codepen
DEMOSHOW

Category:

Canvas & Js Fireworks HTML5

Memasang kode Canvas & Js Fireworks HTML5
Kode ini menampilkan Fireworks yang mengikuti kursor. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>     
/* basic styles for black background and crosshair cursor */
body {
    background: #000;
    margin: 0;
}
canvas {
    cursor: crosshair;
    display: block;
}
    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
                function( callback ) {
                window.setTimeout( callback, 1000 / 60 );
                };
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
        ctx = canvas.getContext( '2d' ),
        // full screen dimensions
        cw = window.innerWidth,
        ch = window.innerHeight,
        // firework collection
        fireworks = [],
        // particle collection
        particles = [],
        // starting hue
        hue = 120,
        // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
        limiterTotal = 5,
        limiterTick = 0,
        // this will time the auto launches of fireworks, one launch per 80 loop ticks
        timerTotal = 80,
        timerTick = 0,
        mousedown = false,
        // mouse x coordinate,
        mx,
        // mouse y coordinate
        my;      
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
    return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
    var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
    return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
    // actual coordinates
    this.x = sx;
    this.y = sy;
    // starting coordinates
    this.sx = sx;
    this.sy = sy;
    // target coordinates
    this.tx = tx;
    this.ty = ty;
    // distance from starting point to target
    this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
    this.distanceTraveled = 0;
    // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 3;
    // populate initial coordinate collection with the current coordinates
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    this.angle = Math.atan2( ty - sy, tx - sx );
    this.speed = 2;
    this.acceleration = 1.05;
    this.brightness = random( 50, 70 );
    // circle target indicator radius
    this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );  
    // cycle the circle target indicator radius
    if( this.targetRadius < 8 ) {
        this.targetRadius += 0.3;
    } else {
        this.targetRadius = 1;
    }  
    // speed up the firework
    this.speed *= this.acceleration;  
    // get the current velocities based on angle and speed
    var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
    // how far will the firework have traveled with velocities applied?
    this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );  
    // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
    if( this.distanceTraveled >= this.distanceToTarget ) {
        createParticles( this.tx, this.ty );
        // remove the firework, use the index passed into the update function to determine which to remove
        fireworks.splice( index, 1 );
    } else {
        // target not reached, keep traveling
        this.x += vx;
        this.y += vy;
    }
}
// draw firework
Firework.prototype.draw = function() {
    ctx.beginPath();
    // move to the last tracked coordinate in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
    ctx.stroke();  
    ctx.beginPath();
    // draw the target for this firework with a pulsing circle
    ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
    ctx.stroke();
}
// create particle
function Particle( x, y ) {
    this.x = x;
    this.y = y;
    // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 5;
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    // set a random angle in all possible directions, in radians
    this.angle = random( 0, Math.PI * 2 );
    this.speed = random( 1, 10 );
    // friction will slow the particle down
    this.friction = 0.95;
    // gravity will be applied and pull the particle down
    this.gravity = 1;
    // set the hue to a random number +-50 of the overall hue variable
    this.hue = random( hue - 50, hue + 50 );
    this.brightness = random( 50, 80 );
    this.alpha = 1;
    // set how fast the particle fades out
    this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );
    // slow down the particle
    this.speed *= this.friction;
    // apply velocity
    this.x += Math.cos( this.angle ) * this.speed;
    this.y += Math.sin( this.angle ) * this.speed + this.gravity;
    // fade out the particle
    this.alpha -= this.decay;  
    // remove the particle once the alpha is low enough, based on the passed in index
    if( this.alpha <= this.decay ) {
        particles.splice( index, 1 );
    }
}
// draw particle
Particle.prototype.draw = function() {
    ctx. beginPath();
    // move to the last tracked coordinates in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
    ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
    // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
    var particleCount = 30;
    while( particleCount-- ) {
        particles.push( new Particle( x, y ) );
    }
}
// main demo loop
function loop() {
    // this function will run endlessly with requestAnimationFrame
    requestAnimFrame( loop );  
    // increase the hue to get different colored fireworks over time
    //hue += 0.5;
  // create random color
  hue= random(0, 360 );  
    // normally, clearRect() would be used to clear the canvas
    // we want to create a trailing effect though
    // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
    ctx.globalCompositeOperation = 'destination-out';
    // decrease the alpha property to create more prominent trails
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect( 0, 0, cw, ch );
    // change the composite operation back to our main mode
    // lighter creates bright highlight points as the fireworks and particles overlap each other
    ctx.globalCompositeOperation = 'lighter';  
    // loop over each firework, draw it, update it
    var i = fireworks.length;
    while( i-- ) {
        fireworks[ i ].draw();
        fireworks[ i ].update( i );
    }  
    // loop over each particle, draw it, update it
    var i = particles.length;
    while( i-- ) {
        particles[ i ].draw();
        particles[ i ].update( i );
    }  
    // launch fireworks automatically to random coordinates, when the mouse isn't down
    if( timerTick >= timerTotal ) {
        if( !mousedown ) {
            // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
        }
    } else {
        timerTick++;
    }  
    // limit the rate at which fireworks get launched when mouse is down
    if( limiterTick >= limiterTotal ) {
        if( mousedown ) {
            // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
        }
    } else {
        limiterTick++;
    }
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
    mx = e.pageX - canvas.offsetLeft;
    my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});
// once the window loads, we are ready for some fireworks!
window.onload = loop;
      //@ sourceURL=pen.js
    </script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
Penjelsan :
Kode Fireworks dapat memperindah tampilan blogg, Modifikasi sesuai keinginan
Edited by. Myscript2010
Sources by. haiqing wang on Codepen
DEMOSHOW

Category:

Sahre Playing with math in Js

Memasang kode CSS Button Hover Rotate
Kode ini menampilkan Tombol Sosial Media yang berputar. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
      @import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
html { overflow:hidden;    }
body { background:#EDEABB; }

.menuitem {
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
        -moz-transition: -moz-transform 300ms ease-in-out;
                  transition: transform 300ms ease-in-out;
}
.menuitem:nth-of-type(1) {
  z-index:20;
  background:#3b5998;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #d2d2d2,0 0 0 1px #133783;
}
.menuitem:nth-of-type(2) {
  z-index:18;
  background:#00aced;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #00aced;
}
.menuitem:nth-of-type(3) {
  z-index:16;
  background:#cc2226;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f5f5f5,0 0 0 1px #333;
}
.menuitem:nth-of-type(4) {
  z-index:14;
  background:#201f1f;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f4cab1,0 0 0 1px #201f1f;
}
.menuitem:nth-of-type(5) {
  z-index:12;
  background:#f4a221;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #e47408;
}

.menuitem a {
  text-decoration:none;
  display:block;
  border-radius:50%;
  height:100%;
  width:100%;
  font-size:1.9em;
  line-height:2;
  text-align:center;
}

.fontawesome-facebook  { color:#fff; }
.fontawesome-twitter   { color:#fff; }
.fontawesome-pinterest { color:#f5f5f5; }
.fontawesome-github    { color:#f9f9f9; }
.fontawesome-rss       { color:#f5f5f5; }

.menuitem:hover {
  z-index:25;
  -webkit-transform:scale(1.3);
     -moz-transform:scale(1.3);
          transform:scale(1.3);
}
    </style>
<div class="menuitem">
<a class="fontawesome-facebook" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-twitter" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-pinterest" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-github" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-rss" href="https://Your Link"></a>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
      var maxspeed = 0.14,
    minspeed = 0.03,
    speed = maxspeed,
    radius = 50,
    count = 0;

function rotate() {
    var x = $(document).width() / 2,
        y = $(document).height() / 2,
        length = $('.menuitem').length;

    $('.menuitem').each(function () {
        var angle = count * (Math.PI / 180),
            newx = x + Math.cos(angle) * radius - $(this).width() / 2,
            newy = y + Math.sin(angle) * radius - $(this).height() / 2;
        $(this).css({
            'left': newx + 'px',
                'top': newy + 'px'
        });
        count += 360 / length + speed;
    });
}

$(function () {
    setInterval(rotate, 3000 / 360);
    $(window).mousemove(function (e) {
        var dw = $(document).width(),
            dh = $(document).height(),
            mh = $('.menuitem').height(),
            mw = $('.menuitem').width();

        if (e.pageX > dw / 2 - radius - mw / 2 && e.pageX < dw / 2 + radius + mw / 2 && e.pageY > dh / 2 - radius - mh / 2 && e.pageY < dh / 2 + radius + mh / 2) {
            speed = minspeed;
        } else {
            speed = maxspeed;
        }
    });
});
      //@ sourceURL=pen.js
    </script>
Penjelasan :
Terapkan Link Title pada code yang berwarna magenta, tambahkan background gambar jika diperlukan,
Copy kode berikut pastekan dibawah kode :  //@ sourceURL=pen.js
                          </script> kemudian klik publish selesai
<style class="background-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 } 
 </style>
Edited by. Myscript2010
Sources by. John Motyl on Codepen
DEMOSHOW

Category:

CSS-only responsive buttons

Memasang kode CSS Responsive Buttons
Kode ini menampilkan Tombol Menu Horizontal. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="styles">
body{background:;font-family:Arial,Helvetica,sans-serif;color:#666666;height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.navigation{padding:20px;background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:-moz-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-o-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-khtml-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-ms-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:linear-gradient(top, #bfbfbf, #999999 100%);background-repeat:repeat-x;}.navigation .container{padding:8px;}
.navigation .nav_outer{background-color:#cccccc;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#808080), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:-moz-linear-gradient(top, #808080, #cccccc 100%);background-image:-o-linear-gradient(top, #808080, #cccccc 100%);background-image:-khtml-linear-gradient(top, #808080, #cccccc 100%);background-image:-ms-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:linear-gradient(top, #808080, #cccccc 100%);background-repeat:repeat-x;padding:1px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
.navigation ul{background-color:#a6a6a6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(100%, #a6a6a6));background-image:-webkit-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:-moz-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-o-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-khtml-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-ms-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:linear-gradient(top, #999999, #a6a6a6 100%);background-repeat:repeat-x;padding:8px 0 8px 8px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;overflow:hidden;}
.navigation li{background-color:#fff;font-size:13px;line-height:16px;margin-right:8px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);margin-bottom:8px;}
.navigation li:last-child{margin-bottom:0;}
.navigation a{text-decoration:none;display:block;text-align:center;padding:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-weight:bold;color:#555;text-shadow:1px 1px rgba(255, 255, 255, 0.4),-1px -1px rgba(0, 0, 0, 0.075);}
.navigation li:not(.active){position:relative;top:-2px;-webkit-transition:top 0.1s linear;-moz-transition:top 0.1s linear;-o-transition:top 0.1s linear;-khtml-transition:top 0.1s linear;-ms-transition:top 0.1s linear;transition:top 0.1s linear;}.navigation li:not(.active):hover{top:0;}
.navigation li:not(.active) a{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-webkit-transition:box-shadow 0.1s linear;-moz-transition:box-shadow 0.1s linear;-o-transition:box-shadow 0.1s linear;-khtml-transition:box-shadow 0.1s linear;-ms-transition:box-shadow 0.1s linear;transition:box-shadow 0.1s linear;color:#666666;}.navigation li:not(.active) a:hover{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);color:#555;}
.navigation span{display:block;padding:5px 10px;background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:-moz-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-o-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-khtml-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:linear-gradient(top, #dddddd, #ffffff 100%);background-repeat:repeat-x;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;background-color:#fff;}
@media only screen and (min-width:420px){.main{padding-top:48px;} .navigation{position:absolute;top:0;left:0;width:100%;}.navigation li{margin-bottom:0;} .navigation ul{padding-right:8px;} .navigation li{display:inline-block;vertical-align:top;width:18%;margin-right:1.25%;} .navigation li:last-child{margin-right:0;}}</style>
<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
</ul>
</div>
</div>
Penjelasan :
Terapkan Link title yang diwarnai, tambahkan teks animasi jika diperlukan. Copy code berikut pastekan dibawah code :  .navigation li:last-child{margin-right:0;}}</style>
<style class="Text Animasi-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 } 
 </style>

<style class="text-animated-styles">
.intro-text h2 {
    font-size: 70px;
    font-weight: 200;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 14px;
    text-align: center;
    opacity: 0;
}

.intro-text h2,
.intro-text h2 > span {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.intro-text h2 > span {
    margin: 0 15px;
}

.intro-text h2 > span > span {
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.intro-text h2 > span > span > span {
    display: inline-block;
    color: hsla(0,0%,0%,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: TextSequence 5.2s linear forwards;
    -moz-animation: TextSequence 5.2s linear forwards;
    animation: TextSequence 5.2s linear forwards;
}

.intro-text h2:nth-child(2) > span > span > span {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
}

.intro-text h2:nth-child(3) > span > span > span {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    animation-delay: 10s;
}

.intro-text h2:nth-child(4) > span > span > span {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
}

.intro-text h2:nth-child(5) > span > span > span {
    font-size: 150px;
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    animation-delay: 21s;
    -webkit-animation-duration: 8s;
    -moz-animation-duration: 8s;
    animation-duration: 8s;
}

.intro-text h2:nth-child(6) > span > span > span {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    animation-delay: 30s;
}

.intro-text h2:nth-child(7) > span > span > span {
    -webkit-animation-delay: 34s;
    -moz-animation-delay: 34s;
    animation-delay: 34s;
}

@-webkit-keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        -webkit-transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        -webkit-transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        -webkit-transform: translateZ(130px);
        pointer-events: none;
    }
}

@-moz-keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        -moz-transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        -moz-transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        -moz-transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        -moz-transform: translateZ(130px);
        pointer-events: none;
    }
}

@keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        transform: translateZ(130px);
        pointer-events: none;
    }
}

.intro-text h2:nth-child(8) > span > span > span {
    font-size: 30px;
    -webkit-animation: FadeIn 4s linear 40s forwards;
    -moz-animation: FadeIn 4s linear 40s forwards;
    animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@-moz-keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;


        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

/* Bold Text */
.intro-text h2:first-child .word3,
.intro-text h2:nth-child(2) .word2,
.intro-text h2:nth-child(4) .word2 {
    font-weight: 600;
}</style>
<div class="intro-text" id="intro-text">
                <h2>
WELCOME</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
LEARN EDITING </h2>
<h2>
SCRIPT CSS HTML </h2>
<h2>
CODEPEN</h2>
<h2>
EDITED BY.</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
COPYRIGHT2015 CIBEBER CIMAHI</h2>
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
$(document).ready(function () {
    $('#intro-text > h2').css('opacity', 1).lettering('words').children('span').lettering().children('span').lettering();
});
//# sourceURL=pen.js
</script>
Edited by. Myscript2010
Sources by. Kevadamson On Codepen
DEMOSHOW

Category:

Button Share CSS3

Memasang kode Button Share CSS3
Kode ini menampilkan Tombol Link Hover. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
* {
  font-smoothing: antialiased;
}
body {
  background: #faa;
}
.wrapper {
  max-width: 960px;
  margin: 65px auto 0;
  background-color: #000;
}
.listc {
  position: relative;
  width: 570px;
  margin: auto;
}
ul {
  list-style: none;
  float: left;
}
ul li {
  position: relative;
  width: 100px; height: 100px;
  float: left;
  background: #474644;
  border-radius: 15px;
  border-bottom: 5px solid #33322f;
  border-left: 3px solid #000000;
  box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
  -webkit-transition: -webkit-box-shadow .15s ease-in-out;  
}
ul li a {
  position: absolute;
  width: 50px; height: 50px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  top: 31%;
  left: 25%;
}
ul li i{
  text-shadow:
    0px 0px #504F4E,
    0px 1px #424241,
    -1px 2px #353534,
    -2px 3px #282827,
    0px 6px 5px rgba(51, 50, 47, 0.8);
  color: #858482;
}


/* Colors */
.facebook:hover i{
  text-shadow:
    0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3f5598;
  color: #3f5598;
}
.twitter:hover i{
  text-shadow:
    0px 0px #34AEDF, 0px 1px #2E9AC6, -1px 2px #2987AE, -2px 3px #237495, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3ac1f8;
  color: #3ac1f8;
}
.youtube:hover i{
  text-shadow:
    0px 0px #C42829, 0px 1px #AE2425, -1px 2px #991F20, -2px 3px #831B1C, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #da2d2e;
  color: #da2d2e;
}
.instagram:hover i{
  text-shadow:
    0px 0px #5C228E, 0px 1px #521E7E, -1px 2px #471B6F, -2px 3px #3D175F, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #66269e;
  color: #66269e;
}
.linkedin:hover i{
  text-shadow:
    0px 0px #195CAF, 0px 1px #16529B, -1px 2px #144788, -2px 3px #113D74, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #1c66c2;
  color: #1c66c2;
}
ul li:hover i{
  -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
  border-bottom: 1px solid #33322f;
  top: 5px;
  border-left: 1px solid #000000;
  margin-right: 2px;
  box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
  z-index: -1; }
</style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
  <div class="listc">
    <ul>
      <li class="facebook"><a href="http://#"><i class="fa fa-facebook fa-2x"></i></a></li>
      <li class="twitter"><a href="http://#"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li class="youtube"><a href="http://#"><i class="fa fa-youtube fa-2x"></i></a></li>
      <li class="pinterest">  <a href="http://#"><i class="fa fa-pinterest fa-2x"></i></a></li>
      <li class="google-plus"><a href="http://#"><i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>
Penjelasan :
Jika ingin menambahkan code teks animasi, copy code berikut :
<style class="cp-pen-styles">html {
 width:100%;
 height:100%;
 min-width:440px;
}
body {
 margin:0;
 opacity:0;
 color:#3584B2;
 text-align:center;
 text-shadow:0 1px 1px #FFF;
 font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
 background-image:-webkit-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-moz-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:-ms-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-o-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:radial-gradient(50% 10%, cover, #eee, #dad);
 -webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
     -ms-transition:opacity 0.3s ease;
      -o-transition:opacity 0.3s ease;
         transition:opacity 0.3s ease;
}
header {
 height:80px;
}
h1 {
 font-size:46px;
 margin:10px 0 0 0;
 font-weight:normal;
}
h2 {
 font-size:24px;
 margin:28px 0 0 0;
 font-weight:normal;
}
p {
 width:320px;
 margin:0 auto;
 font-size:13px;
}
i {
 display:block;
 margin:0 0 20px 0;
}
nav a {
 color:#FFF;
 width:120px;
 font-size:14px;
 cursor:pointer;
 overflow:hidden;
 border-radius:3px;
 position:relative;
 background:#40A1DD;
 display:inline-block;
 padding:10px 0 10px 0;
 margin:10px 10px 30px 10px;
 border:1px solid rgba(255,255,255,.30);
 text-shadow:1px 1px 2px rgba(0,0,0,.50);
 font-family:Verdana, Geneva, sans-serif;
 box-shadow:0 0 0 1px #008ADB, 0 2px 0 1px #008ADB, 0 3px 6px #000;
}
nav a:active {
 top:3px;
 box-shadow:0 0 0 1px #008ADB, 0 0 0 1px #008ADB, 0 0 4px #000;
}
nav a span {
 display:block;
}</style></head><body>
<header>
<h1>
Let's Share</h1>
<h2>
Through</h2>
<h2>
Social Networking</h2>
</header>
Pastekan dibawah code : z-index: -1; }  Lalu copy code berikut :
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>
Pastekan dibawah code  :  <i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>
Kemudian klik pratinjau untuk melihat hasil dan klik publish selesai
Edited by. Myscript2010
Sources by. Michelle Ortner on Codepen
DEMOSHOW

Category:

Pure CSS Dancing Tree

Memasang kode Pure CSS Dancing Tree
Kode ini menampilkan Gambar animasi Pohon. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
 <style>
body, html {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #000;
}
body {
  -webkit-perspective: 100px;
          perspective: 100px;
}
.info {
  margin: 20px;
  padding: 0px 20px;
  background-color: #ccc;
  display: inline-block;
}
.trunk, .trunk div {
  background: #136086;
  /*border-radius:$w;*/
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  -webkit-animation-name: rot;
          animation-name: rot;
  -webkit-animation-duration: 2.02s;
          animation-duration: 2.02s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  /* &:before{
     content:'';
       display:block;
       width :$w/2;
       height:$w/2;
       background:black;
       overflow:hidden;
       position:absolute;
       top:$w/4;
       border-radius:$w;
       left:$w/4;
     }*/
}
.trunk.trunk, .trunk div.trunk {
  bottom: 0;
  left: 50%;
  -webkit-animation-name: rot-root;
          animation-name: rot-root;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.trunk > div, .trunk div > div {
  /*opacity:0.9;*/
  top: 0;
  left: 100px;
  -webkit-animation-duration: calc(inherit / 2);
          animation-duration: calc(inherit / 2);
  /* don't works :( */
}
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) {
  /*animation-duration:15s;*/
  -webkit-animation-name: rot-inv;
          animation-name: rot-inv;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
}
@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}

@keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}
@-webkit-keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@-webkit-keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
@keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
 </style>
<div class="trunk">
<div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div>/div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div>div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div></div>
Sources by. Codepen
Edited by. Myscript2010
DEMOSHOW

Category:

Fish flocking simulation

Memasang kode Fish flocking simulation
Kode ini menampilkan animasi ikan berkelompok. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
      body {
 background: #000;
 overflow:hidden;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbSjPVBOO_9BlIsG_0w85t1d6P1fLns3oHzfslmk7L0owcf9rTU92fGnkKu_nHNITbwBxIp-y7wVnos0WEvHwNBZCVbxisSRW00vE-eEP6xQGgywEnphopzRse53LIoFz2JYXRabwZqo/s1600-r/bg-mys2010.jpg') no-repeat center center fixed;
 background-size:cover;
}
.container {
  position:absolute;
 left: 50%;
 margin-left: -700px;
  top: 50%;
  margin-top: -300px;
  height: 600px;
 width: 1400px;
}
* {
 margin: 0;
 padding: 0;
}
#fishbitmap {
 display: none;
}
    </style>

<script>
  window.console = window.console || function(t) {};
</script>

<div class="container">
<canvas width="1400" height="600" id="fishtank">
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>


<script>
      /* ---------------- FISH "CLASS" START -------------- */
var FOLLOW_DISTANCE = 100;
var Fish = function(id) {
 this.id = id;
 this.entourage = [];
 // dx/yx is current speed, ox/oy is the previous one
 this.ox = this.dx = Math.random() - 0.5;
 this.oy = this.dy = Math.random() - 0.5;
 this.x = canvas.width * Math.random();
 this.y = canvas.height * Math.random();
 // A couple of helper functions, the names should describe their purpose
 Fish.prototype.angleToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.atan2(otherFish.y - this.y, otherFish.x - this.x);
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleFromFishDirectionToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.abs(deltaAngle(this.angle, this.angleToClosestFish(otherFish)));
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleDirectionDifference = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   Math.abs(deltaAngle(this.angle, otherFish.angle));
  } else {
   return Number.MAX_VALUE;
  }
 }
 // Update the fish "physics"
 Fish.prototype.calc = function() {
  this.ox = this.dx;
  this.oy = this.dy;
  var MAX_SPEED = 1.1;
  var maxSpeed = MAX_SPEED;
  //Do I need to find another fish buddy?
  if (this.following == null || py(this.x - this.following.x, this.y - this.following.y) > FOLLOW_DISTANCE) {
   if (this.following != null) {
    if (keyDown) affinityLine(this.following, this, "white");    this.following.entourage.splice(this.following.entourage.indexOf(this));
   }
   this.following = null;
   //attract closer to other fish - find closest
   var closestDistance = Number.MAX_VALUE;
   var closestFish = null;
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    if (fish != this) {
     var distance = py(this.x - fish.x, this.y - fish.y);
     // Is it closer, within the max distance and within the sector that the fish can see?
     if (distance < closestDistance && fish.following != this && distance < FOLLOW_DISTANCE && this.angleFromFishDirectionToClosestFish(fish) < Math.PI * 0.25) {
      closestDistance = distance;
      closestFish = fish;
     }
    }
   }
   if (closestFish != null) {
    this.following = closestFish;
    closestFish.entourage.push(this);
   }
  }
  // Fish is following another
  if (this.following != null) {
   // Go closer to other fish
   this.followingDistance = py(this.x - this.following.x, this.y - this.following.y);
   this.distanceFactor = 1 - this.followingDistance / FOLLOW_DISTANCE;
   // If going head on, just break a little before following
   if (this.angleDirectionDifference() > (Math.PI * 0.9) && // On colliding angle?
    this.angleFromFishDirectionToClosestFish() < (Math.PI * 0.2)) { // In colliding sector?
    this.dx += this.following.x * 0.1;
    this.dy += this.following.y * 0.1;
    if (keyDown) affinityLine(this.following, this, "yellow");
   } else if (this.followingDistance > FOLLOW_DISTANCE * 0.3) { // Dont go closer if close
    this.dx += Math.cos(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
    this.dy += Math.sin(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
   }
   if (keyDown) affinityLine(this.following, this, "red");
  }
  // Go closer to center, crashing into the canvas walls is just silly!
  if (this.x < canvas.width * .1 || this.x > canvas.width * .9 || this.y < canvas.height * .2 || this.y > canvas.height * .8) {
   this.dx += (canvas.width / 2 - this.x) / 5000;
   this.dy += (canvas.height / 2 - this.y) / 5000;
  }
  // Poor little fishies are scared of your cursor
  if (py(this.x - cursor.x, this.y - cursor.y) < FOLLOW_DISTANCE * 0.75) {
   this.dx -= (cursor.x - this.x) / 500;
   this.dy -= (cursor.y - this.y) / 500;
   maxSpeed = 4;
   if (keyDown) affinityLine(cursor, this, "green");
  }
  // If following fish, try avoid going close to your siblings
  if (this.following != null) {
   for (var i = 0; i < this.following.entourage.length; i++) {
    var siblingFish = this.following.entourage[i];
    if (siblingFish !== this) {
     if (py(this.x - siblingFish.x, this.y - siblingFish.y) < FOLLOW_DISTANCE * 0.2) {
      if (keyDown) affinityLine(siblingFish, this, "yellow");
      this.dx -= (siblingFish.x - this.x) / 1000;
      this.dy -= (siblingFish.y - this.y) / 1000;
     }
    }
   }
  }
  // Calculate heading from new speed
  this.angle = Math.atan2(this.dy, this.dx);

  // Grab the speed from the vectors, and normalize it
  var speed = Math.max(0.1, Math.min(maxSpeed, py(this.dx, this.dy)));
  // Recreate speed vector from recombining angle of direction with normalized speed
  this.dx = Math.cos(this.angle) * (speed + speedBoost);
  this.dy = Math.sin(this.angle) * (speed + speedBoost);
  // Fish like to move it, move it!
  this.x += this.dx;
  this.y += this.dy;
 }
}
/* ---------------------- FISH "CLASS" END -------------- */

/* ---------------------- MAIN START -------------------- */
var canvas = document.getElementById('fishtank');
var context = canvas.getContext('2d');
var fishes = [];
var speedBoostCountdown = 200,
 speedBoost = 0,
 SPEED_BOOST = 2;
var fishBitmap = new Image()
fishBitmap.onload = function() {
 update();
};
fishBitmap.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGz5auUkk_i4xq4_n8QqYIdYM7NTpZZCSSfwl3noWcTyhxjX_0ymQxNqQfdqFjawRIt7DuQvuxTNE3RrLOtQLv2nAcIfMIQ-G1ufZAIpUXeLrPTKpobMHbB1jBzFi6HlCGkP_GCW5UDkA/s1600-r/fish-mys2010.png";
//Draw Circle
function draw(f) {
 var r = f.angle + Math.PI;
 context.translate(f.x, f.y);
 context.rotate(r);
 var w = 20;
 var acc = py(f.dx - f.ox, f.dy - f.oy) / 0.05;
 // If a fish does a "flip", make it less wide
 if (acc > 1) {
  w = 10 + 10 / acc;
 }
 context.drawImage(fishBitmap, 0, 0, w, 6);
 context.rotate(-r);
 context.translate(-f.x, -f.y);
}
// Pythagoras shortcut
function py(a, b) {
 return Math.sqrt(a * a + b * b);
}
//------------ USER INPUT START -------------
var cursor = {
 x: 0,
 y: 0
};
var cursorDown = false,
 keyDown = false;
document.onmousemove = function(e) {
 cursor.x = e.pageX - (window.innerWidth / 2 - canvas.width / 2);
 cursor.y = e.pageY - (window.innerHeight / 2 - canvas.height / 2);
}
document.onmouseout = function(e) { //Out of screen is not a valid pos
 cursor.y = cursor.x = Number.MAX_VALUE;
}
document.onmousedown = function() {
 activateSpeedBoost();
 cursorDown = true;
}
document.onmouseup = function() {
 cursorDown = false;
}
document.onkeydown = function() {
 keyDown = true;
}
document.onkeyup = function() {
  keyDown = false;
 }

 //------------ USER INPUT STOP -------------
function deltaAngle(f, o) { //Find the shortest angle between two
 var r = f - o;
 return Math.atan2(Math.sin(r), Math.cos(r));
}
function affinityLine(f, o, c) { //Draw a line with pretty gradient
 var grad = context.createLinearGradient(f.x, f.y, o.x, o.y);
 grad.addColorStop(0, c);
 grad.addColorStop(1, "black");
 context.strokeStyle = grad;
 context.beginPath();
 context.moveTo(f.x, f.y);
 context.lineTo(o.x, o.y);
 context.stroke();
}
function activateSpeedBoost() {
 speedBoostCountdown = 400 + Math.round(400 * Math.random());
 speedBoost = SPEED_BOOST;
}
//Update and draw all of them
function update() {
  if (fishes.length < 500) {
   fishes.push(new Fish(fishes.length));
  }
  if (!cursorDown) {
   //clear the canvas
   canvas.width = canvas.width; //Try commenting this line :-)
   //Update and draw fish
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    fish.calc();
    draw(fish);
   }
  }
  speedBoostCountdown--;
  if (speedBoostCountdown < 0) {
   activateSpeedBoost();
  }
  if (speedBoost > 0) {
   speedBoost -= SPEED_BOOST / 80; //Reduce speed bost fast!
  } else {
   speedBoost = 0;
  }
  requestAnimationFrame(update);
 }

 /* ---------------------- MAIN END ----------------------- */
      //@ sourceURL=pen.js
    </script>

<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
Edited by. Myscript2010
Sources by. P.S Amundsen
DEMOSHOW

Category:
Subscribe to: Posts (Atom)