Ленточка Canvas + CSS3 для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Ленточка Canvas + CSS3 для uCoz


Даже не знаю, где такую ленту можно использовать, но это очень красиво. Ленточка Canvas + CSS3 следует за курсором, и двигается, как по ветру. Такой эффект можно умудриться установить фоном сайта. Вернее, оптически это будет выглядеть как фон, а конкретно по коду это будет просто один из слоев на странице. За HTML5 будущее веб-дизайна, это лишь простой пример использования Canvas.

Код HTML 
Код
<canvas id='world' width='500' height='500'></canvas>   
   <header>   
   <h1>Ленточка Canvas + CSS3</h1>   
   </header>


Код JavaScript 
Код
<script type="text/javascript">   
   var TWO_PI = Math.PI * 2;   
   var HALF_PI = Math.PI * 0.5;   
   var THICKNESS = 10;   
   var LENGTH = 10;   
   var STEP = 0.1;   
   var FPS = 1000 / 60;   

   function Particle(x, y, mass) {   

   this.x = x || 0;   
   this.y = y || 0;   
   this.ox = this.x;   
   this.oy = this.y;   
   this.mass = mass || 1.0;   
   this.massInv = 1.0 / this.mass;   
   this.fixed = false;   

   this.update = function (dt) {   
   if (!this.fixed) {   
   var fx = 0.0000;   
   var fy = 0.0000;   
   var tx = this.x,   
   ty = this.y;   

   this.x += (this.x - this.ox) + fx * this.massInv * dt * dt;   
   this.y += (this.y - this.oy) + fy * this.massInv * dt * dt;   
   this.ox = tx;   
   this.oy = ty;   
   }   
   };   
   };   

   function Spring(p1, p2, restLength, strength) {   

   this.p1 = p1;   
   this.p2 = p2;   
   this.restLength = restLength || 10;   
   this.strength = strength || 1.0;   

   this.update = function (dt) {   

   // Compute desired force   
   var dx = p2.x - p1.x,   
   dy = p2.y - p1.y,   
   dd = Math.sqrt(dx * dx + dy * dy) + 0.0001,   
   tf = (dd - this.restLength) / (dd * (p1.massInv + p2.massInv)) * this.strength,   
   f;   

   // Apply forces   
   if (!p1.fixed) {   
   f = tf * p1.massInv;   
   p1.x += dx * f;   
   p1.y += dy * f;   
   }   

   if (!p2.fixed) {   
   f = -tf * p2.massInv;   
   p2.x += dx * f;   
   p2.y += dy * f;   
   }   
   }   
   };   

   function Sim() {   

   this.particles = [];   
   this.springs = [];   

   this.tick = function (dt) {   

   var i, n;   

   for (i = 0, n = this.springs.length; i < n; ++i) {   
   this.springs[i].update(dt);   
   }   

   for (i = 0, n = this.particles.length; i < n; ++i) {   
   this.particles.update(dt);   
   }   
   }   
   };   

   // Create a new system   
   var sim = new Sim(),   
   old = new Date().getTime(),   
   canvas = document.getElementById('world'),   
   context = canvas.getContext('2d');   

   function init() {   

   var np,   
   op,   
   mouse,   
   anchor,   
   step = STEP,   
   length = LENGTH,   
   count = length / step;   

   var sx = canvas.width * 0.5;   
   var sy = canvas.height * 0.5;   

   for (var i = 0; i < count; ++i) {   

   //np = new Particle(i*8,i*8,0.1+Math.random()*0.01);   
   np = new Particle(sx + (Math.random() - 0.5) * 200, sy + (Math.random() - 0.5) * 200, 0.1 + Math.random() * 0.01);   
   sim.particles.push(np);   

   if (i > 0) {   
   s = new Spring(np, op, step, 0.95);   
   sim.springs.push(s);   
   }   

   op = np;   
   }   

   // Fix the first particle   
   anchor = sim.particles[0];   
   //anchor.fixed = true;   
   anchor.x = 50;   
   anchor.y = 50;   

   // Move last particle with mouse   
   mouse = sim.particles[count - 1];   
   mouse.fixed = true;   

   canvas.addEventListener('mousemove', function (event) {   
   mouse.x = event.clientX;   
   mouse.y = event.clientY;   
   });   
   };   

   function step() {   

   var now = new Date().getTime(),   
   delta = now - old;   

   sim.tick(delta);   

   // Clear canvas   
   canvas.width = canvas.width;   

   var points = []; // Midpoints   
   var angles = []; // Delta angles   

   var i, n, p1, p2, dx, dy, mx, my, sin, cos, theta;   

   // Compute midpoints and angles   
   for (i = 0, n = sim.particles.length - 1; i < n; ++i) {   

   p1 = sim.particles;   
   p2 = sim.particles[i + 1];   

   dx = p2.x - p1.x;   
   dy = p2.y - p1.y;   

   mx = p1.x + dx * 0.5;   
   my = p1.y + dy * 0.5;   

   points = {   
   x: mx,   
   y: my   
   };   
   angles = Math.atan2(dy, dx);   
   }   

   // Render   
   context.beginPath();   

   for (i = 0, n = points.length; i < n; ++i) {   

   p1 = sim.particles;   
   p2 = points;   

   theta = angles;   

   r = Math.sin((i / n) * Math.PI) * THICKNESS;   
   sin = Math.sin(theta - HALF_PI) * r;   
   cos = Math.cos(theta - HALF_PI) * r;   

   context.quadraticCurveTo(   
   p1.x + cos,   
   p1.y + sin,   
   p2.x + cos,   
   p2.y + sin);   
   }   

   for (i = points.length - 1; i >= 0; --i) {   

   p1 = sim.particles[i + 1];   
   p2 = points;   

   theta = angles;   

   r = Math.sin((i / n) * Math.PI) * THICKNESS;   
   sin = Math.sin(theta + HALF_PI) * r;   
   cos = Math.cos(theta + HALF_PI) * r;   

   context.quadraticCurveTo(   
   p1.x + cos,   
   p1.y + sin,   
   p2.x + cos,   
   p2.y + sin);   

   }   

   context.strokeStyle = 'rgba(255,255,255,0.1)';   
   context.lineWidth = 8;   
   context.stroke();   

   context.strokeStyle = 'rgba(0,0,0,0.8)';   
   context.lineWidth = 0.5;   
   context.stroke();   

   context.fillStyle = 'rgba(255,255,255,0.9)';   
   context.fill();   

   old = now;   

   setTimeout(step, FPS);   
   };   

   function resize() {   
   canvas.width = window.innerWidth;   
   canvas.height = window.innerHeight;   
   }   

   window.addEventListener("resize", resize);   
   resize();   

   init();   
   step();   
   </script>


Код CSS 
Код
<style type="text/css">   
   body {   
   margin:0;   
   padding:0;   
   font-family: Arial;   
   background-color:#10729c;   
   background-image: -moz-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);   
   background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);   
   background-image: -o-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);   
   background-image: -ms-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);   
   background-image: radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);   
   width:100%;   
   height:100%;   
   overflow:hidden   
   }   
   header {   
   background-color: rgba(0,0,0,0.2);   
   position: absolute;   
   height: 40px;   
   width: 100%;   
   left: 0px;   
   top: 0px;   
   }   

   header h1 {   
   text-transform: uppercase;   
   margin-left: 20px;   
   line-height: 30px;   
   font-weight: 400;   
   font-size: 12px;   
   color: #fff;   
   }   
   </style>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 18.01.2015 в 13:29
Материал просмотрен: 902 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта