2011-08-25 7 views
-1

http://www.mrspeaker.net/HTML 5 캔버스 입자

이 사람은 자신의 전체 배경 입자를 만들하지만 난에 그가 그것을하지 수있는 방법을 알아 내기 위해 요소를 검사 주위를 배회했습니다. 나는 그것이 어떻게 행해졌는지 잘 모르겠다.

답변

2

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); 
    }; 
} 

추신 마크 업 및 자바 스크립트

2

체크 아웃 speaker.js 파일의 내 빠른 열람에서이 정말 HTML5 아무것도 없다. 페이지가로드되면 빈 div를 만들고 그 안에 18 개의 div를 추가하여 거품을 만듭니다. 각 거품에는 위치를 변경하고 화면을 천천히 기어 다니는 업데이트 방법이 있습니다.

그는 200 밀리 초마다 페이지 전체 업데이트 메서드를 호출하도록 페이지에 타이머를 설정합니다. 페이지 전체 업데이트 메서드 내에서 그는 각 버블에서 업데이트를 호출합니다.

내가 코드를 게시하려고했지만, 나는 qntmfred already has를 참조하십시오.