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


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

554
10 из 10
Проголосовало: 5






Даже не знаю, где такую ленту можно использовать, но это очень красиво. Ленточка 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[i].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[i];  
  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[i] = {  
  x: mx,  
  y: my  
  };  
  angles[i] = Math.atan2(dy, dx);  
  }  

  // Render  
  context.beginPath();  

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

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

  theta = angles[i];  

  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[i];  

  theta = angles[i];  

  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>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: