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

685
10 из 10
Проголосовало: 6






Даже не знаю, где такую ленту можно использовать, но это очень красиво. Ленточка 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 25
Скрипты и модификации для Ucoz 2123
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Site_Test написал:
  • вместо
    Код
    <script type="text/javascript">  
    <!-- Progess bar - NEW uCoz "By Lekus" 2017. uFace -->  
    <!--  
    document.write(unescape('%3C%6C%69%6E%6B%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%72%65%6C%3D%22%53%74%79%6C%65%53%68%65%65%74%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%75%66%61%63%65%2E%61%74%2E%75%61%2F%64%65%6D%6F%2F%50%72%6F%67%65%73%73%5F%62%61%72%4E%45%57%2F%73%74%79%6C%65%2E%63%73%73%22%20%2F%3E'));
    //-->  
    </script>


    пишем просто
    Код
    <link type="text/css" rel="StyleSheet" href="http://uface.at.ua/demo/Progess_barNEW/style.css" />
    в страница добавления/редактирования материала отображается следуещее ,success:function(a){var a=$(a);!a.text().match('myWinError')? plusrep(a) : _uWnd.content('addEnt',a.text().match(/<div[^<>]*>(.+)<\/div>/i)[0])||$('input.manFlSbm').attr('disabled',0)}

    и не работает ничего(, что делать?
  • modelswar3 написал:
  • Обновите ссылку!!
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
    Последние темы
    Опрос
    291
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: