Система частиц силами jquery.
Вам не приходила в голову мысль, что было бы забавно рисовать что нибудь html элементами ? А мне вдруг пришла! Благодаря обсолютному позиционированию и div, на свет появился первый псевдо пиксель  Забавно оказалось то что анимация jquery вполне способна превратить эти пикселы в некое подобие системы частиц.
Хотя если уж говорить о системе частиц, тут наверное эффективнее будет один таймер чем множество, но опять же об этом позже.
Нужен был механизьм работы с псевдо графикой - graph.
Суть его проста как валенок, функция point создаёт div с указанными характеристиками, и возвращает созданный экземпляр через return.
К характеристикам относятся
- x,y - координаты, при отображении они умножаются на множетель r
- R- это размер матрицы пикселей, точнее размер пикселя. Если R=1 то все псевдо пиксели соответствуют пикселям, если двум то размер обьектов и координаты обьекта умножаются на 2 и тд
- color - св во в котором хранится текущий цвет
- setRGB - метод упрощающий установку значений в формате rgb, так как мы можем играться цветом оперировать rgb нам удобнее чем hex
graph = {
// размер точки, в реальных пикселах
r:4,
// текущий цвет
color:"#abc",
// установить текущий цвет в формате rgb
setRGB:function(r,g,b){
this.color="rgb("+ r +","+ g +","+ b +")";
},
// рисуем точку текущим цветом.
point:function(x,y){
$("body").append("<div class='point'></div>");
//позиционируем
ob=$(".point:last").offset({top: y*this.r,left:x*this.r});
//Устанавливаем фон
ob.css("background-color",this.color);
//Устанавливаем размер
ob.css("width",this.r).css("height",this.r);
return ob;
}
};
Суть работы надеюсь будет понятна из ремарок.
===========================================
Тестировать есть смысл только под ХРОМ.
У остальных браузеров нехватает производительности
===========================================
Переменная R задаёт размерность координатной сетки, чем выше R тем больше сетка, и крупнее псевдо пиксели.
<!--
jquery след от мыши
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.point {
position:absolute;
width:14px;
height:14px;
margin:5px;
}
</style>
</head>
<script>
graph = {
// размер точки, в реальных пикселах
r:4,
// текущий цвет
color:"#abc",
// установить текущий цвет в формате rgb
setRGB:function(r,g,b){
this.color="rgb("+ r +","+ g +","+ b +")";
},
// рисуем точку текущим цветом.
point:function(x,y){
//добавим div к body
$("body").append("<div class='point'></div>");
//от позиционируем последний добавленный div
ob=$(".point:last").offset({top: y*this.r,left:x*this.r});
// зададим цвет и размеры
ob.css("background-color",this.color);
ob.css("width",this.r).css("height",this.r);
return ob;
}
};
//====================== Основная часть ======================//
$(document).ready(function(){
$("body").css("background-color","#000000");
//задаём точке цвет
graph.setRGB(255,150,0);
//событие перемещения мыши
$(document).mousemove(function(e){
//рисуем точку
//координаты, приходится переводить из стандартных в координаты псевдо пикселей
graph.point(e.pageX/graph.r,e.pageY/graph.r).hide(500,function(){$(this).remove()});
//точка скроется после 500 мс, после чего будет удалена.
});
});
</script>
</body>
</html>
Оставляет цветной шлейф при нажатой левой кнопки мыши.
Цикл внутри mousemove определяет сколькол пикселей генерится за один мышиный шаг
Запускать только под ХРОМ !
Зажмите лувую кнопку мышки, и водите из стороны в сторону.
<!--
jquery частицы
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.point {
position:absolute;
width:14px;
height:14px;
margin:5px;
}
</style>
</head>
<script>
graph = {
// размер точки, в реальных пикселах
r:2,
// текущий цвет
color:"#abc",
// установить текущий цвет в формате rgb
setRGB:function(r,g,b){
this.color="rgb("+ r +","+ g +","+ b +")";
},
// рисуем точку текущим цветом.
point:function(x,y){
$("body").append("<div class='point'></div>");
ob=$(".point:last").offset({top: y*this.r,left:x*this.r});
ob.css("background-color",this.color);
//==================================================//
ob.css("width",this.r).css("height",this.r);
return ob;
}
};
var blueColor=0;
var trig=0;
$(document).ready(function(){
graph.setRGB(100,0,0);
$("body").css("background-color","#000000");
$(document).mousedown(function(e){
$(document).mousemove(function(e){
// цикл определяет сколько частиц можно генеририруется за шаг
for (var i=0;i<2;i++) {
blueColor=blueColor+1;
if (blueColor>256)blueColor=0;
rx=Math.random()*30-15;
ry=Math.random()*30-15;
rxs=Math.random()*4-2;
rys=Math.random()*4-2;
graph.setRGB(e.pageX,e.pageY,blueColor);
graph.point(e.pageX/graph.r+rxs,e.pageY/graph.r+rys).animate({left:e.pageX+rx,top:e.pageY+ry},1000).hide(500,function(){$(this).remove()});
}
});
} );
$(document).mouseup(function(){$(document).unbind('mousemove');});
});
</script>
</body>
</html>
<!--
jquery частицы
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.point {
position:absolute;
width:14px;
height:14px;
margin:5px;
}
</style>
</head>
<script>
graph = {
// размер точки, в реальных пикселах
r:2,
// текущий цвет
color:"#abc",
// установить текущий цвет в формате rgb
setRGB:function(r,g,b){
this.color="rgb("+ r +","+ g +","+ b +")";
},
// рисуем точку текущим цветом.
point:function(x,y){
$("body").append("<div class='point'></div>");
ob=$(".point:last").offset({top: y*this.r,left:x*this.r});
ob.css("background-color",this.color);
//==================================================//
ob.css("width",this.r).css("height",this.r);
return ob;
}
};
// ====================== основная часть ====================//
var blueColor=0;
$(document).ready(function(){
graph.setRGB(100,0,0);
$("body").css("background-color","#000000");
$(document).mousedown(function(e){
$(document).mousemove(function(e){
// цикл определяет сколько частиц можно генеририруется за шаг
for (var i=0;i<2;i++) {
blueColor=blueColor+1;
if (blueColor>256)blueColor=0;
rx=Math.random()*30-15;
ry=Math.random()*50-15;
rxs=Math.random()*4-2;
rys=Math.random()*4-2;
graph.setRGB(e.pageX,e.pageY,blueColor);
// анимация заключается в перемещении к нулю по координате X, координата y-смещается на пару пикселей.
graph.point(e.pageX/graph.r+rxs,e.pageY/graph.r+rys).animate({left:0,top:e.pageY+ry},1000,function(){$(this).remove()});
}
});
} );
$(document).mouseup(function(){$(document).unbind('mousemove');});
});
</script>
</body>
</html>
Данный пример более менее кросс браузерный
вполне сносно работает даже в ie 7.0
<!--
jquery Loading
Автор: DjDiablo aki 3dInterface
специально для javaScript.ru
31.10.2011
-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.point {
position:absolute;
width:14px;
height:14px;
margin:5px;
}
.textL{
position:absolute;
color:#666666;
font-family: "Times roman", courier, serif
}
</style>
</head>
<body>
<div class="textL">Loading</div>
<script>
graph = {
// размер точки, в реальных пикселах
r:1,
// текущий цвет
color:"#abc",
// установить текущий цвет в формате rgb
setRGB:function(r,g,b){
this.color="rgb("+ r +","+ g +","+ b +")";
},
// рисуем точку текущим цветом.
point:function(x,y){
$("body").append("<div class='point'></div>");
ob=$(".point:last").offset({top: y*this.r,left:x*this.r});
ob.css("background-color",this.color);
//==================================================//
ob.css("width",this.r).css("height",this.r);
return ob;
}
};
// ====================== основная часть ====================//
$(document).ready(function(){
graph.setRGB(100,0,0);
$("body").css("background-color","#000000");
// координаты
e={};
e.layerY=50;
e.layerX=0;
//характеристики области отображения
paramScreen={
body:$("body"),
width:$("body").width(),
height:($(document).height()/100)*80
}
$(".textL").offset({top: (paramScreen.height/2+55).toFixed(0),left:(paramScreen.width/2 - ( $(".textL").width()/2) ).toFixed(0)});
f=function(){
//вычислим конечную точку полёта звёздочки
randX =(Math.random()*paramScreen.width).toFixed(0);
randY =(Math.random()*paramScreen.height).toFixed(0);
graph.setRGB(155,155,155);
//добавим пиксель (звёздочку)
graph.point((paramScreen.width/2)/graph.r,(paramScreen.height/2)/graph.r)
//отправим её в координаты randX,randY
.animate({left:randX ,top:randY,opacity:0,width:10,height:10},1000,function(){$(this).remove()});
//вызовем метод снова
setTimeout(f,10);
};
f();
});
</script>
</body>
</html>
Забавно, в предыдущей версии примеров я брал координаты мыши из layerX, layerY, и всё было хорошо. Но в первых числах ноября примеры внезапно перестали работать. Когда начал копать оказалась что теперь не с того, не с сего, layerX возвращает undefined. Причины такого поведения одному богу известны, либо баг в jquery, либо убрали эту возможность в новой версии. Сижу чешу репу, пришлось заменить layerX/layerY на pageX/pageY
7.11.2011
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(document).click(function(e){
alert("pageX="+e.pageX);
alert("layerX="+e.layerX);
})
});
</script>
</body>
</html>
|
красиво
Понравился эффект загрузки
Roksa brusy
Roksa środa wielkopolska
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.