http://www.mrspeaker.net/HTML 5 캔버스 입자
이 사람은 자신의 전체 배경 입자를 만들하지만 난에 그가 그것을하지 수있는 방법을 알아 내기 위해 요소를 검사 주위를 배회했습니다. 나는 그것이 어떻게 행해졌는지 잘 모르겠다.
http://www.mrspeaker.net/HTML 5 캔버스 입자
이 사람은 자신의 전체 배경 입자를 만들하지만 난에 그가 그것을하지 수있는 방법을 알아 내기 위해 요소를 검사 주위를 배회했습니다. 나는 그것이 어떻게 행해졌는지 잘 모르겠다.
http://www.mrspeaker.net/wp-content/themes/stuartspeaker/scripts/speaker.js
$(window).load(function(){
bubbleController.init();
setInterval(function(){
bubbleController.update()
}, 200);
$(window).resize(function(){
bubbleController.setBoundaries();
});
if($(".leftcolumn").length)
{
//main page
var leftColumn = parseInt($(".leftcolumn").height(), 10);
var rightColumn = parseInt($(".rightcolumn").height(), 10);
/* Going to add extra stuff if the columns are uneven */
}
else{
swapTwitterPix();
}
});
var bubbleController = {
bubbles : [],
screenWidth : 0,
leftEdge : 0,
rightEdge : 0,
channelWidths : [],
minBubbleWidth : 10,
maxBubbleWidth : 100,
init : function(){
this.setBoundaries();
$("<div></div>").attr("id", "bubbleContainer").appendTo($("body"));
for(var i = 0; i < 18; i++) {
var side = (i % 2 === 0) ? 1 : 0;
var bub = new bubble();
this.bubbles.push(bub);
var width = Math.floor(Math.random() * this.maxBubbleWidth) + this.minBubbleWidth;
bub.init(
this.getXPos(side),
Math.floor(Math.random() * 800),
side,
(Math.random()*20/100).toFixed(2),
width,
Math.floor((((this.maxBubbleWidth + this.minBubbleWidth) - width)/8)/5) + 1,
"#bubbleContainer");
}
},
getXPos : function(blnLeftOrRight) {
var xpos = (Math.random() * this.channelWidths[ blnLeftOrRight ]);// + (this.maxBubbleWidth/2);
return Math.floor( xpos/(this.channelWidths[ blnLeftOrRight ]) * 100);
},
setBoundaries : function() {
this.screenWidth = $("body").width();
this.leftEdge = $("#outerWrapper").position().left;
this.rightEdge = this.leftEdge + 1040;
this.channelWidths[ 0 ] = this.leftEdge < 150 ? 150 : this.leftEdge;
this.channelWidths[ 1 ] = this.screenWidth - this.rightEdge;
},
update : function() {
$.each(this.bubbles, function() {
this.update();
});
}
};
function bubble(){
this.domRef;
this.diameter;
this.x;
this.xPerc;
this.y;
this.side;
this.opacity;
this.speed;
this.init = function(x, y, side, opacity, diameter, speed, addToElement){
this.side = side;
this.xPerc = x;
this.y = y;
this.speed = speed;
this.opacity = opacity;
this.diameter = diameter;
this.domRef = $("<div></div")
.addClass("bubble")
.css("top", this.y)
.css("left", this.getXPos())
.css("opacity", this.opacity)
.appendTo($(addToElement));
//.css("z-index", "-1")
var img = $("<img></img>")
//.attr("src", baseUrl + "/images/circle_" + this.colour + "_des.png")
.attr("src", "/images/circleeye.png")
.attr("height", this.diameter)
.appendTo(this.domRef)
.show()
/*.load(function(){
// Whoa... cpu == 90% for long fades
$(this).fadeIn(20000);
});*/
};
this.getXPos = function() {
this.x = (bubbleController.channelWidths[ this.side ] * (this.xPerc/100)) - (this.diameter/2);
this.x += this.side == 1 ? bubbleController.rightEdge : 0;
return this.x;
};
this.update = function() {
this.y -= this.speed;
this.x = this.getXPos();
if(this.y < -this.diameter) {
this.y = 800;
this.xPerc = bubbleController.getXPos(this.side);
this.x = this.getXPos();
this.opacity = (Math.random()*15/100).toFixed(2);
this.fireFadeIn();
}
this.updateDom();
};
this.setInit = function(){
};
this.updateDom = function() {
this.domRef
.css("top", this.y)
.css("left", this.x);
};
this.fireFadeIn = function() {
this.domRef
.hide()
.css("opacity", this.opacity)
.fadeIn(5000);
};
}
추신 마크 업 및 자바 스크립트
체크 아웃 speaker.js 파일의 내 빠른 열람에서이 정말 HTML5
아무것도 없다. 페이지가로드되면 빈 div를 만들고 그 안에 18 개의 div를 추가하여 거품을 만듭니다. 각 거품에는 위치를 변경하고 화면을 천천히 기어 다니는 업데이트 방법이 있습니다.
그는 200 밀리 초마다 페이지 전체 업데이트 메서드를 호출하도록 페이지에 타이머를 설정합니다. 페이지 전체 업데이트 메서드 내에서 그는 각 버블에서 업데이트를 호출합니다.
내가 코드를 게시하려고했지만, 나는 qntmfred already has를 참조하십시오.