رفتن به مطلب

افکت بکگراند اسلایدر


پست های پیشنهاد شده

اگر منظورتون اون نقطه هایی هست که با حرکت موس به هم وصل میشن باید عرض کنم جاوا هستش

یک نمونه : http://modern-carpentry.com/workshop/html5/waveform/

لینک به ارسال

این کدش هست ، یه خورده جاوا اسکریپ یا بگیری می تونی بفهمی چطوریه


window.onload = function(){
travers();

var lastHeight=$("#asb").height();


var canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

color = '#aaa';
var check =respondCanvas();
canvas.width = check[1];
canvas.height =lastHeight;
canvas.style.display = 'block';
ctx.fillStyle = color;
ctx.lineWidth = .1;
ctx.strokeStyle = color;
function respondCanvas(){
var width = [];
width[0]= $('#smile').width(); //max width
width[1]= $('canvas').width(); //max width

return width;
//Call a function to redraw other content (texts, images etc)
}

function checkheight(){
var height= $('#asb').height(); //max width
//console.log(height);
// return height;
}
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};

if(canvas.width<=1000)
{
var numdot=100;
}
else if(canvas.width<=800){
var numdot=80;
}
else if(canvas.width<=500)
{
var numdot=35;
}
else
{
var numdot=300;
}

var dots = {
nb: numdot,
distance: 70,
d_radius: 50,
array: []
};
function Dot(){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
this.radius = Math.random();
}
Dot.prototype = {
create: function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
},
animate: function(){
for(i = 0; i < dots.nb; i++){
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height){
dot.vx = dot.vx;
dot.vy = - dot.vy;
}
else if(dot.x < 0 || dot.x > canvas.width){
dot.vx = - dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
},
line: function(){
for(i = 0; i < dots.nb; i++){
for(j = 0; j < dots.nb; j++){
i_dot = dots.array[i];
j_dot = dots.array[j];
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
ctx.beginPath();
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
};
function createDots(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(i = 0; i < dots.nb; i++){
dots.array.push(new Dot());
dot = dots.array[i];
dot.create();
}
dot.line();
dot.animate();
}

$("canvas").mousemove(function(parameter){

mousePosition.x = parameter.pageX-0;
mousePosition.y = parameter.pageY-300;
});
setInterval(createDots, 1000/30);
};

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...