HTML 5 Частицы холста

Question

http://www.mrspeaker.net/

Этот парень делает все свои фоновые частицы, но я бродил в Inspect Element, чтобы выяснить, как он это сделал и не может. Я не совсем уверен, как это сделать, кто-нибудь знает код для него, чтобы сделать это?

Answer 1

Проверьте файл speaker.js.Когда страница загружается, он создает пустой div и добавляет в него 18 div, которые называются «пузыри».У каждого пузыря есть метод обновления, который меняет свое местоположение, медленно ползая вверх по экрану.

Кроме того, он устанавливает на странице таймер для вызова метода обновления всей страницы каждые 200 миллисекунд.В рамках метода обновления всей страницы он вызывает update для каждого пузыря.

Я собирался опубликовать код, но я вижу, что qntmfred уже имеет .

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

ps на самом деле ничего нет HTML5 из-за моего быстрого прочтения разметки и javascript