Animated Disk

<div class='spiralContainer'><div class='spiral'></div></div>
<h1>Please put a image in css </h1>

.spiralContainer {
  border-radius: 50%;
  width:200px;
  height:200px;
  overflow:hidden;
  margin:20px; box-shadow:2px 4px 6px #000000;
  
  -webkit-animation: spin 3s linear 0s infinite reverse;
  -moz-animation: spin 3s linear 0s infinite reverse;  
  -ms-animation: spin 3s linear 0s infinite reverse;
  -o-animation: spin 3s linear 0s infinite reverse;
  animation: spin 3s linear 0s infinite reverse;
  
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;  
  animation-play-state: paused;
}
.spiral {
  width:200px;
  height:200px;
  border-radius: 50%;
/*image load disk*/
background-image: url(../../Web-Sites/knowlegde/images/round-metal-background_1053-158.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 6s linear 0s infinite normal;
  -moz-animation: spin 6s linear 0s infinite normal;
  -ms-animation: spin 6s linear 0s infinite normal;
  -o-animation: spin 6s linear 0s infinite normal;
  animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

Dancer Boy

Dog Cartoon

<div class='container'>
  <div class='bk'>
    <div class='mid'>
      <div class='fore'>
        <div class='figure'></div>
      </div>
    </div>
  </div>
</div>

html {
  background: #000;
}

.container {
  margin: 30px auto;
  border: 1px solid #333;
  background: #55c1e7;
}

/*--extend--*/
.area {
  width: 600px;
  height: 288px;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

.fore, .mid, .bk, .container { 
  @extend .area; 
}

.figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/dog-walk.svg") no-repeat;
  width: 220px;
  height: 266px;
  transform: translate3D(200px, 50px, 0);
  animation: walk 0.78s steps(9) infinite;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}
.no-svg .figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/dog-walk.png");
}

.fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/foreground.svg");
  transform: translateZ(0);
  animation: bk 7s -5s linear infinite;
}
.no-svg .fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/foreground.png");
}

.mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/midground.svg");
  animation: bk 15s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/midground.png");
}

.bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/background.svg");
  animation: bk 20s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/background.png");
}

@keyframes walk {
  100% { background-position: 0 -2376px; }
}

@keyframes bk {
  100% { background-position: 200% 0; }
}

@media screen and ( max-width: 600px ) {
  .container { 
    width: 100%; 
    margin-top: 0;
  }
  .figure { transform: translate3D(40%, 50px, 0); }
}

Mouse move Animated

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
   google.load("jquery", "1.3.2");
   google.load("jqueryui", "1.7.2");
</script>

<body class="index">
     <canvas style="border-radius:15px; box-shadow: 2px 4px 6px #000000;" height="700" width="700" id="canvas">Cheetah program</canvas>
     
  <div id="explain">
<span>
      <button class="type" name="fade" onClick="toggleFade()">On</button>
      
      <button class="type" name="fade" onClick="toggleFade()">Off</button>
</span></div>

body {
 background-color: #ffffff;
 color:white;
 padding:0px;
 margin:0px;
 word-spacing:.06em;
}

#canvas {
 position:absolute;
 top:0px;
}

#explain {
 width:180px;
 left:0px;
 top:0px;
 position:absolute;
 font-family:arial, sans-serif;
 font-size:25px;
 color:white; margin-left:10px;
}

.type{border-radius:15px; background-color:#FFF;text-decoration:overline;}

span {
 padding: 2px;
 line-height:16px;
 background-color: #000; border-radius:12px; padding-top:50px; border:dotted;}

var pcMode = false;
var fadeStage = false;
var grayScale = false;
var dx = 2;
var dy = 4;
var lineColor = 'rgba(255,0,100,.2)';
var particleCount = 0;
var particleList = {};

function draw() {
 
 if (system){
  system.update();
 }
  
 
 if (fadeStage){
  fade(); 
 }
}

function initParticleSystem(){
 system = new ParticleSystem();
 system.init(systemSize);
}

function ParticleSystem(){
 
}

ParticleSystem.prototype.init = function(_systemSize){
 this.list = [];
 var i = 0;
 for(i=0; i < _systemSize+1; i++){
  this.createParticle();
 }
}

ParticleSystem.prototype.createParticle = function(){
 var newParticle = new Particle();
 newParticle.init();
 this.list.push(newParticle);
}

ParticleSystem.prototype.update = function(){
 var i = 0;
 for(i = 0; i < systemSize-1; i++){
  this.list[i].draw();
 }
}

function Particle(){
 
}

Particle.prototype.init = function(){
 setColor(this);
 this.x = Math.random() * WIDTH;
 this.y = Math.random() * HEIGHT;
 this.vel = Math.random() * 5 + 1;
 this.ang = Math.random() * (Math.PI);
 this.diameter = Math.random() * 5 + 1;
 this.oldX = this.x;
 this.oldY = this.y;
 this.speedModX = Math.random() * 20 + 8;
 this.speedModY = Math.random() * 20 + 8;
 this.speedModTargX = Math.random() * 3 + 2;
 this.speedModTargY = Math.random() * 3 + 2;
 this.maxSpeed = Math.random() * 20 + 5;
 this.speedX = 0;
 this.speedY = 0;
}

Particle.prototype.draw = function(){
 ctx.fillStyle = this.color;
 
 var _x = this.x;
 var _y = this.y;
 var _d = this.diameter;
 var _vel = this.vel;
 var _ang = this.ang;
 var _smx = this.speedModX;
 var _smy = this.speedModY;
 
 var _sX = this.speedX;
 var _sY = this.speedY;
 
 this.oldX = _x;
 this.oldY = _y;
 
 var targSpeedX = (cursorX - _x)/this.speedModTargX;
 var targSpeedY = (cursorY - _y)/this.speedModTargY;
 
 var maxSpeed = this.maxSpeed;
 if (Math.abs(_sX) > maxSpeed){
  if (_sX > 0){
   _sX = maxSpeed;
  } else {
   _sX = 0 - maxSpeed;
  }
 }
 if (Math.abs(_sY) > maxSpeed){
  if (_sY > 0){
   _sY = maxSpeed;
  } else {
   _sY = 0 - maxSpeed;
  }
 }
 
 _sX += (targSpeedX - _sX)/_smx;
 _sY += (targSpeedY - _sY)/_smy;
 
 _x += _sX;
 _y += _sY;
 
 this.speedX = _sX;
 this.speedY = _sY;
 
 this.x = _x;
 this.y = _y;
 this.vel = _vel;
 this.ang = _ang;
 
 particleLine(this)
 
}

function particleLine(p) {
 
 
 var _x = p.x;
 var _y = p.y;
 var _oldX = p.oldX;
 var _oldY = p.oldY;
 ctx.lineWidth = .5;
 if (p.colorTint > 5){
  ctx.lineWidth = 1.2; 
 }
 ctx.strokeStyle = p.color;
    ctx.beginPath();
    ctx.moveTo(_oldX,_oldY);
    ctx.lineTo(_x,_y);
    ctx.stroke();
 
}

function toggleFade(){
 log("toggle fade");
 if (fadeStage == false){
  fadeStage = true;
 } else {
  fadeStage = false;
 }
}

function toggleAmount(){
 if (lots == false){
  lots = true;
  systemSize = 150;
 } else {
  lots = false;
  systemSize = 10;
 }
 
 initParticleSystem();
}
</script>

var ctx;
var ctCanvas;
var WIDTH = 2000;
var HEIGHT = 1000;

var intervalID = 0;
var cursorX = 150;
var cursorY = 150;
var fadeRate = .05;
var showLog = true;

function init() {
   
   ctx = $('#canvas')[0].getContext('2d');
 HEIGHT =  window.innerHeight;
  WIDTH =  window.innerWidth;
 ctCanvas = document.getElementById("canvas");
    
   if ($.browser.msie && document.all){
    
    pcMode = true;
    showLog = false;
    initCanvasSize();
   } else {
    initCanvasSize();
   }

intervalId = setInterval(draw, 1);
 return intervalId;

}

function onMouseMove(evt) {
  cursorX = evt.pageX;
  cursorY = evt.pageY;
}

function line(x,y,r) {
 ctx.lineWidth = 1;
 ctx.strokeStyle = lineColor;
    ctx.beginPath();
    ctx.moveTo(oldX,oldY);
    ctx.lineTo(x,y);
    ctx.stroke();
 
 oldX = x;
 oldY = y;
}

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function fade() {
  ctx.fillStyle = "rgba(255, 255, 255, "+fadeRate+")"
  ctx.beginPath();
  ctx.rect(0,0,WIDTH,HEIGHT);
  ctx.closePath();
  ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

$(document).mousemove(onMouseMove);

function log(m){
 if (showLog){
  console.log(m);}}</script>

Lighting Balls

<canvas style="border-radius:15px; box-shadow:2px 4px 6px #000000;" id="canvas" width="1330" height="650"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = 1330; var H = 650;
var particles = [];
for(var i = 0; i < 20; i++)
{particles.push(new create_particle());}function create_particle()
{this.x = Math.random()*W;this.y = Math.random()*H;this.vx = Math.random()*20-10;this.vy = Math.random()*20-10;
var r = Math.random()*255>>0;var g = Math.random()*255>>0;var b = Math.random()*255>>0;
this.color = "rgba("+r+", "+g+", "+b+", 0.5)";
this.radius = Math.random()*20+20;}
var x = 100; var y = 100;
function draw(){ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";ctx.fillRect(0, 0, W, H);ctx.globalCompositeOperation = "lighter";
for(var t = 0; t < particles.length; t++)
{var p = particles[t];ctx.beginPath();var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);gradient.addColorStop(0, "white");gradient.addColorStop(0.4, "white");gradient.addColorStop(0.4, p.color);gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);ctx.fill();p.x += p.vx;p.y += p.vy;if(p.x < -50) p.x = W+50;if(p.y < -50) p.y = H+50;if(p.x > W+50) p.x = -50;if(p.y > H+50) p.y = -50;}}setInterval(draw, 20);
</script>

Blood Rain

<canvas id="canvas" style="box-shadow: 2px 4px 6px #000000; border-radius:10px;"></canvas>

* {margin: 0; padding: 0;}

body {background: #fff;}
canvas {display: block;}

window.onload = function(){
 
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 
 var mp = 500; 
 var particles = [];
 for(var i = 0; i < mp; i++)
 {
  particles.push({
   x: Math.random()*W, 
   y: Math.random()*H, 
   r: Math.random()*4+1, 
   d: Math.random()*mp 
  })
 }
 
 
 function draw()
 {
  ctx.clearRect(2, 0, W, H);
  
  ctx.fillStyle = "rgba(900,1,1,1)";
  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();
 }
 
 
 var angle = 0;
 function update()
 {
  angle += 0.01;
  for(var i = 0; i < mp; i++)
  {
   var p = particles[i];
   
   
   p.y += Math.cos(angle+p.d) + 1 + p.r/2;
   p.x += Math.sin(angle) * 2;
   
   
   if(p.x > W+5 || p.x < -5 || p.y > H)
   {
    if(i%3 > 0) 
    {
     particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
    }
    else
    {
     
     if(Math.sin(angle) > 0)
     {
      
      particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
     }
     else
     {
      
      particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
     }
    }
   }
  }
 }
 
//speed control 
 setInterval(draw, 0);
}

AS Program's

Sunday, 25 March 2018

Animations :