Фон

ugg555 · November 25, 2013

Здравствуйте уважаемые ГУРУ!

Возможно ли установить фоновое изображение (точнее Java скрипт) вот такой

npofopr · November 25, 2013

Берете и вставляете с z-index:-1; или каким хотите.

Поверх уже основной контент будет.

ugg555 · November 25, 2013

Подскажите почему у меня не работает ! вот код перенесенный с сайта...

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>z-index</title>    <style>  body{  margin:0;}  </style>     </head> <body>  <script type="text/javascript">window.onload = init();function init(){canvas = document.getElementById('canvas');context = canvas.getContext('2d');canvas.width = window.innerWidth - 20;canvas.height = window.innerHeight - 20;canvas.addEventListener('mousemove',MouseMove,false);mouse = {x:0,y:0}particleHolder = [0];x = 900;y = 900;angle = 45;radius = 280;particleCount = 4000;color = ['rgba(0, 118, 163, 0.8)','rgba(141, 198, 63, 0.8)',];function MouseMove(event){	mouse.x = event.pageX - canvas.offsetLeft;	mouse.y = event.pageY - canvas.offsetLeft;}for(i = 0; i < particleCount ; i++){particleHolder.push(new generateParticles());}function generateParticles(){this.x = Math.random()*canvas.width;this.y = Math.random()*canvas.height;this.color = color[Math.floor(Math.random()*color.length)];this.rad = Math.floor(Math.random()*8);}function vibrate(){context.fillStyle = 'white';context.fillRect(0, 0, canvas.width, canvas.height);for(var j = 0; j < particleHolder.length; j++){var p = particleHolder[j];var distanceX = p.x - mouse.x;var distanceY = p.y - mouse.y;particleDistance =  Math.sqrt(distanceX*distanceX + distanceY*distanceY);particleMouse = Math.max( Math.min( 50 / ( particleDistance /p.rad ), 10 ), 0.1 );context.fillStyle=p.color;context.fillRect(p.x-((p.rad*particleMouse)/2),p.y-((p.rad*particleMouse)/2),p.rad*particleMouse,p.rad*particleMouse);}}setInterval(vibrate, 15);};      </script>      <canvas id = 'canvas'></canvas> </body></html>

ugg555 · November 25, 2013

Заработал вот так! теперь подумаю как фон превратить

<html> <head>  <meta charset="utf-8">  <title>z-index</title>      <style type="text/css">    body{  margin:0;}    </style> </head>  <body>  <canvas id = 'canvas'></canvas> <script type="text/javascript">window.onload = init();function init(){canvas = document.getElementById('canvas');context = canvas.getContext('2d');canvas.width = window.innerWidth - 20;canvas.height = window.innerHeight - 20;canvas.addEventListener('mousemove',MouseMove,false);mouse = {x:0,y:0}particleHolder = [0];x = 900;y = 900;angle = 45;radius = 280;particleCount = 4000;color = ['rgba(0, 118, 163, 0.8)','rgba(141, 198, 63, 0.8)',];function MouseMove(event){	mouse.x = event.pageX - canvas.offsetLeft;	mouse.y = event.pageY - canvas.offsetLeft;}for(i = 0; i < particleCount ; i++){particleHolder.push(new generateParticles());}function generateParticles(){this.x = Math.random()*canvas.width;this.y = Math.random()*canvas.height;this.color = color[Math.floor(Math.random()*color.length)];this.rad = Math.floor(Math.random()*8);}function vibrate(){context.fillStyle = 'white';context.fillRect(0, 0, canvas.width, canvas.height);for(var j = 0; j < particleHolder.length; j++){var p = particleHolder[j];var distanceX = p.x - mouse.x;var distanceY = p.y - mouse.y;particleDistance =  Math.sqrt(distanceX*distanceX + distanceY*distanceY);particleMouse = Math.max( Math.min( 50 / ( particleDistance /p.rad ), 10 ), 0.1 );context.fillStyle=p.color;context.fillRect(p.x-((p.rad*particleMouse)/2),p.y-((p.rad*particleMouse)/2),p.rad*particleMouse,p.rad*particleMouse);}}setInterval(vibrate, 15);};      </script>     </body></html>

3d_max_9 · November 25, 2013

интересно, данный скрипт сильно грузит систему?

Sign In

Фон

Question

ugg555

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

ugg555

Link to comment

Share on other sites

ugg555

Link to comment

Share on other sites

3d_max_9

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information