html - HTML5キャンバスパーティクル

Question

http://www.mrspeaker.net/

この男は背景のパーティクル全体を作成しますが、私はInspect Elementを歩き回って、彼がどのようにそれを実行でき、実行できないかを理解しています。それがどのように行われるのかよくわかりませんが、誰かがこれを行うためのコードを知っていますか？

Answer 1

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

HTML5psマークアップとJavaScriptをざっと読んだだけで、これについては何もわかりません。

Answer 2

Speaker.jsファイルを確認してください。ページが読み込まれると、彼は空のdivを作成し、その中に「バブル」と呼ばれる18個のdivを追加します。各バブルには、その場所を変更する更新メソッドがあり、画面をゆっくりと忍び寄ります。

さらに、彼はページにタイマーを設定して、200ミリ秒ごとにページ全体の更新メソッドを呼び出します。ページ全体の更新メソッド内で、彼は各バブルで更新を呼び出します。

コードを投稿するつもりでしたが、qntmfredにはすでにがあります。