Креативный подход к jQuery.
всем привет.
Хочу кое чем поделится. Не то чтобы это что-то немыслимое, но меня это забавляет, надеюсь это позабавит и вас. Насчёт практического применения сильно сомневаюсь, эти демки очень ноглядно демонмтрируют насколько хром мощнее других браузеров. Ладно к делу. Буквально пару дней назад я своял вот эту демку. Впринципе нечего особенного, единственное что необычно это то что я добавил шлейф от движения из координат. Получилась синусоида из цифр. В этот момент я и подумал, что было бы забавно рисовать что нибудь html элементами. Сказано, сделано ! Благодаря обсолютному позиционированию и div, на свет появился первый псевдо пиксель :) В принципе сейчас уже можно рисовать почти все геометрические фигуры, но об этом позже. Забавно оказалось то что анимация jquery вполне способна превратить эти пикселы в некое подобие системы частиц. Хотя если уж говорить о системе частиц, тут наверное эффективнее будет один таймер чем множество, но опять же об этом позже. Тестировать есть смысл только под ХРОМ. У остальных браузеров нехватает производительности короче вотЪ :) Шлейф от курсора мышки. Переменная 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;
// background-color:#abc;
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){
$("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 trig=0;
$(document).ready(function(){
$("body").css("background-color","#000000");
graph.setRGB(255,150,0);
$(document).mousemove(function(e){
graph.point(e.layerX/graph.r,e.layerY/graph.r).hide(500,function(){$(this).remove()});
});
});
</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.layerX,e.layerY,blueColor);
graph.point(e.layerX/graph.r+rxs,e.layerY/graph.r+rys).animate({left:e.layerX+rx,top:e.layerY+ry},1000).hide(500,function(){$(this).remove()});
}
});
} );
$(document).mouseup(function(){$(document).unbind('mousemove');});
});
</script>
</body>
</html>
3я демка ВЕТЕР, Почти аналогичная 2й.
<!--
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()*50-15;
rxs=Math.random()*4-2;
rys=Math.random()*4-2;
graph.setRGB(e.layerX,e.layerY,blueColor);
graph.point(e.layerX/graph.r+rxs,e.layerY/graph.r+rys).animate({left:0,top:e.layerY+ry},1000,function(){$(this).remove()});
}
});
} );
$(document).mouseup(function(){$(document).unbind('mousemove');});
});
</script>
</body>
</html>
Тему слил в блоги, оказывается они тут есть, и их даже читают иногда :) |
| Часовой пояс GMT +3, время: 22:53. |