HTML5 PixiJS 响应式平行视差城堡景观

Castles, responsive parallax landscape

pixi, gsap, city

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4911
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var HEIGHT = window.innerHeight,
    WIDTH = window.innerWidth;
var castle,
    frame, maskIllu, cornerTL, cornerTR, cornerBL, cornerBR, frameLineTop, frameLineBottom, frameTopMiddle, frameBottomMiddle;

var sizeL = 1200;
var sizeM = 960;
var sizeS = 720;
var sizeXS = 480;

var pixiCanvas = document.getElementById("pixiCanvas");

var framePadding = -20;
var framePaddingTarget = 40;
var parallaxCoeff = 3;
var globalScale = 1;
var brightness = 1.5;
var repulsion = .95;
var noise = .0;

var elements = [];
var mousePos = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
};
var myDisplayResolution = window.devicePixelRatio;

var renderer = PIXI.autoDetectRenderer(800, 600, {
    antialiasing: true,
    transparent: true,
    resolution: 1
});
pixiCanvas.appendChild(renderer.view);
var container = new PIXI.Container();

//*
var noiseFilter = new PIXI.filters.NoiseFilter()
noiseFilter.noise = noise;
var colorMatrix = new PIXI.filters.ColorMatrixFilter();
colorMatrix.brightness(brightness);
container.filters = [noiseFilter, colorMatrix];
//*/

var loader = new PIXI.loaders.Loader('https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/', 30);

loader.add('world', 'world.json');
loader.once('complete', onAssetsLoaded);
loader.load();

window.addEventListener('resize', onWindowResize, false);

document.addEventListener("mousemove", onMouseMove);

function onMouseMove(event) {
    var tx = -1 + (event.clientX / WIDTH) * 2;
    var ty = 1 - (event.clientY / HEIGHT) * 2;
    mousePos = {
        x: tx,
        y: ty
    };
    globalScale = .8 + (event.clientX / WIDTH) * .4;
    repulsion = .95 + (event.clientX / WIDTH) * .05;
}

function onWindowResize() {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    renderer.resize(WIDTH, HEIGHT);
    repositionAll();
}

function repositionAll(speed) {

for (var i = 0, l = elements.length; i < l; i++) {
        var el = elements[i];
        el.updatePosition(speed);
    }
    repositionFrame();
}

function repositionFrame() {

if (frameLineTop) {
        frameLineTop.sprite.width = WIDTH - framePadding * 2;
        frameLineTop.sprite.y = framePadding;
        frameLineTop.sprite.x = framePadding;

frameLineBottom.sprite.width = WIDTH - framePadding * 2;
        frameLineBottom.sprite.y = HEIGHT - framePadding;
        frameLineBottom.sprite.x = framePadding;

frameLineRight.sprite.width = HEIGHT - framePadding * 2;
        frameLineRight.sprite.x = WIDTH - framePadding;
        frameLineRight.sprite.y = framePadding;

frameLineLeft.sprite.width = HEIGHT - framePadding * 2;
        frameLineLeft.sprite.x = framePadding;
        frameLineLeft.sprite.y = framePadding;

frameTopMiddle.sprite.x = WIDTH / 2;
        frameTopMiddle.sprite.y = framePadding + 5;

frameBottomMiddle.sprite.x = WIDTH / 2;
        frameBottomMiddle.sprite.y = HEIGHT - framePadding - 5;

cornerTL.sprite.x = framePadding;
        cornerTL.sprite.y = framePadding;

cornerTR.sprite.x = WIDTH - framePadding;
        cornerTR.sprite.y = framePadding;

cornerBR.sprite.x = WIDTH - framePadding;
        cornerBR.sprite.y = HEIGHT - framePadding;

cornerBL.sprite.x = framePadding;
        cornerBL.sprite.y = HEIGHT - framePadding;

backgroundPlane.sprite.width = WIDTH * 2;
        backgroundPlane.sprite.height = HEIGHT * 2;
    }

if (maskIllu) {
        maskIllu.clear();
        maskIllu.beginFill(0xFFFF00);
        maskIllu.drawRect(framePadding + 2, framePadding + 2, WIDTH - framePadding * 2, HEIGHT - framePadding * 2);
    }
}

TweenMax.to(this, 4, {
    framePadding: framePaddingTarget,
    ease: Power4.easeInOut,
    onUpdate: repositionFrame
});

var pic;

function onAssetsLoaded(loader, resources) {

backgroundPlane = new FloatingObject("background-base.png", container, {
        tiling: true,
        depth: 0,
        initPcX: 0,
        initPcY: 0,
        initDispY: 0,
        initDispX: 0,
        centerPivotX: false,
        centerPivotY: false,
        affectedByScale: false
    });

illu = new PIXI.Sprite();
    container.addChild(illu);

maskIllu = new PIXI.Graphics();
    container.addChild(maskIllu);
    illu.mask = maskIllu;

cupolaLeft = new FloatingObject("cupola-left.png", illu, {
        depth: -7,
        initPcX: .5,
        initPcY: 0,
        initDispY: 125,
        initDispX: -220,
        hideBelowX: sizeM
    });

cupolaRight = new FloatingObject("cupola-left.png", illu, {
        depth: -7,
        initPcX: .5,
        initPcY: 0,
        initDispY: 125,
        initDispX: 220,
        initScaleX: -.5,
        hideBelowX: sizeM
    });

starTopBig = new FloatingObject("star-top-big.png", illu, {
        depth: -8,
        initPcX: .5,
        initPcY: .1,
        hideBelowX: sizeM
    });

starTopSmall = new FloatingObject("star-top-small.png", illu, {
        depth: -8,
        initPcX: .55,
        initPcY: .11,
        hideBelowX: sizeS
    });

sun = new FloatingObject("sun.png", illu, {
        depth: -6,
        initPcX: 0,
        initPcY: 0,
        initDispY: 140,
        initDispX: 240,
        hideBelowX: sizeXS
    });

moonTopRight = new FloatingObject("moon-top-right.png", illu, {
        depth: -6,
        initPcX: 1,
        initPcY: 0,
        initDispX: -125,
        initDispY: 125,
        hideBelowX: sizeXS
    });

saturnTopRight = new FloatingObject("saturn-top-right.png", illu, {
        depth: -6,
        initPcX: 1,
        initPcY: 0,
        initDispX: -185,
        initDispY: 60,
        hideBelowX: sizeS
    });

saturnCloudTopRight = new FloatingObject("saturn-cloud-top-right.png", illu, {
        depth: -7,
        initPcX: .77,
        initPcY: .15,
        hideBelowX: sizeL
    });

planetTopLeft = new FloatingObject("planet-top-left.png", illu, {
        depth: -7,
        initPcX: .35,
        initPcY: .13,
        hideBelowX: sizeS
    });

meteorite = new FloatingObject("meteorite.png", illu, {
        depth: -7,
        initPcX: .92,
        initPcY: .35,
        hideBelowX: sizeL
    });

planetOrbitTopRight = new FloatingObject("planet-orbit-top-right.png", illu, {
        depth: -6,
        initPcX: 1,
        initPcY: 0,
        initDispX: -145,
        initDispY: 200
    });

mountainTopRight = new FloatingObject("mountain-top-right.png", illu, {
        depth: -5,
        initPcX: .65,
        initPcY: .2,
        hideBelowX: sizeS
    });
    mountainTopLeft = new FloatingObject("mountain-top-left.png", illu, {
        depth: -5,
        initPcX: .35,
        initPcY: .2,
        hideBelowX: sizeS
    });
    cloudTop = new FloatingObject("cloud-top.png", illu, {
        depth: -5,
        initPcX: .5,
        initPcY: .2,
        hideBelowX: sizeS
    });

cloudB3 = new FloatingObject("cloud-b.png", illu, {
        depth: -4,
        initRotation: .1,
        initPcX: .71,
        initPcY: .27,
        hideBelowX: sizeS
    });

shelfLeftSmall = new FloatingObject("shelf-left-small.png", illu, {
        depth: -4,
        initPcX: .23,
        initPcY: .48,
        hideBelowX: sizeL,
        floatFrequency: .02,
        floatAmplitude: 2,
        floatAngle: 0
    });

cloudB = new FloatingObject("cloud-b.png", illu, {
        depth: -3,
        initPcX: .25,
        initPcY: .53,
        hideBelowX: sizeM
    });

shipLeftSmall = new FloatingObject("ship-left-small.png", illu, {
        depth: -3,
        initPcX: .28,
        initPcY: .55,
        hideBelowX: sizeS,
        floatFrequency: .035,
        floatAmplitude: 3,
        floatAngle: 0
    });

cloudA = new FloatingObject("cloud-a.png", illu, {
        depth: -2,
        initPcX: .25,
        initPcY: .6,
        hideBelowX: sizeS
    });

balloonRightSmall = new FloatingObject("balloon-right-small.png", illu, {
        depth: -3,
        initPcX: .77,
        initPcY: .48,
        hideBelowX: sizeL,
        floatFrequency: .02,
        floatAmplitude: 2,
        floatAngle: 0
    });

balloonsCastle = new FloatingObject("balloons-castle.png", illu, {
        depth: -1,
        initPcX: .25,
        initPcY: .15,
        hideBelowX: sizeM
    });

troy = new FloatingObject("troy.png", illu, {
        depth: 2,
        initPcX: .7,
        initPcY: .45,
        hideBelowX: sizeM,
        floatFrequency: .02,
        floatAmplitude: 3,
        floatAngle: 0
    });

cloudC = new FloatingObject("cloud-c.png", illu, {
        depth: 2,
        initPcX: .03,
        initPcY: .27
    });

bubblesCastle = new FloatingObject("bubbles-castle.png", illu, {
        depth: 3,
        initPcX: .23,
        initPcY: .35,
        hideBelowX: sizeM,
        floatFrequency: .01,
        floatAmplitude: 3,
        floatAngle: 0
    });

smallCastle = new FloatingObject("small-castle.png", illu, {
        depth: 3,
        initPcX: .80,
        initPcY: .25,
        hideBelowX: sizeL,
        floatFrequency: .025,
        floatAmplitude: 2,
        floatAngle: 0
    });

balloonTopRightSmall = new FloatingObject("balloon-top-right-small.png", illu, {
        depth: 3,
        initPcX: .70,
        initPcY: .22,
        hideBelowX: sizeL,
        floatFrequency: .02,
        floatAmplitude: 1,
        floatAngle: 0
    });

mountainLeftSmall = new FloatingObject("mountain-left-small.png", illu, {
        depth: 7,
        initPcX: .05,
        initPcY: .4,
        hideBelowX: sizeS
    });

mountainLeftSmall4 = new FloatingObject("mountain-right-small2.png", illu, {
        depth: 7.5,
        initPcX: .12,
        initPcY: .46,
        hideBelowX: sizeL
    });

var mountain = new PIXI.Sprite();
    container.addChild(mountain)

cloudA2 = new FloatingObject("cloud-a.png", illu, {
        depth: 8,
        initPcX: .13,
        initPcY: .5,
        hideBelowX: sizeL
    });

cloudBottomLeft = new FloatingObject("cloud-top.png", illu, {
        depth: 8,
        initPcX: .35,
        initPcY: .75,
        initRotation: Math.PI / 6,
        hideBelowX: sizeL
    });

mountainLeftBig = new FloatingObject("mountain-left-big.png", illu, {
        depth: 9,
        initPcX: .15,
        initPcY: .69
    });

mountainRightSmall3 = new FloatingObject("mountain-right-small3.png", illu, {
        depth: 8,
        initPcX: .90,
        initPcY: .50
    });

smokeBig = new FloatingObject("smoke-big.png", mountainRightSmall3.sprite, {
        initScaleX: 1,
        initScaleY: 1,
        initDispX: 90,
        initDispY: 30,
        hideBelowX: sizeL
    });

smokeSmall = new FloatingObject("smoke-small.png", mountainRightSmall3.sprite, {
        initScaleX: 1,
        initScaleY: 1,
        initDispX: 70,
        initDispY: -80,
        hideBelowX: sizeM
    });

cloudB2 = new FloatingObject("cloud-b.png", illu, {
        depth: 8,
        initRotation: -.75,
        initPcX: .71,
        initPcY: .57,
        hideBelowX: sizeS
    });

mountainRightBig = new FloatingObject("mountain-right-big.png", illu, {
        depth: 9,
        initPcX: .80,
        initPcY: .65
    });

diamond = new FloatingObject("diamond.png", mountainRightBig.sprite, {
        initScaleX: 1,
        initScaleY: 1,
        initDispX: 440,
        initDispY: -60,
        hideBelowX: sizeM,
        floatFrequency: .02,
        floatAmplitude: 4,
        floatAngle: 0
    });

cloudC2 = new FloatingObject("cloud-c.png", illu, {
        depth: 11,
        initPcX: .6,
        initPcY: .7,
        hideBelowX: sizeM
    });

mountainRightSmall3 = new FloatingObject("mountain-right-small2.png", illu, {
        depth: 12,
        initPcX: .77,
        initPcY: .65,
        hideBelowX: sizeS
    });

mountainRightSmall1 = new FloatingObject("mountain-right-small1.png", illu, {
        depth: 12,
        initPcX: .70,
        initPcY: .70,
        hideBelowX: sizeS
    });

cloudC3 = new FloatingObject("cloud-c.png", illu, {
        depth: 13,
        initPcX: .55,
        initPcY: .75,
        initRotation: -Math.PI / 6,
        hideBelowX: sizeL
    });

mountainRightSmall2 = new FloatingObject("mountain-right-small2.png", illu, {
        depth: 12,
        initPcX: .95,
        initPcY: .65,
        hideBelowX: sizeS
    });

cloudC4 = new FloatingObject("cloud-c.png", illu, {
        depth: 13,
        initPcX: .85,
        initPcY: .7,
        hideBelowX: sizeL
    });

hillsBottomLeft = new FloatingObject("hills-bottom-left.png", illu, {
        depth: 11,
        initPcX: .15,
        initPcY: .74,
        hideBelowX: sizeS
    });

waterSurfaceA = new FloatingObject("water-surface-a.png", illu, {
        depth: 12,
        initPcX: .25,
        initPcY: .91,
        initDispY: -65,
        hideBelowX: sizeM
    });

waterSurfaceB = new FloatingObject("water-surface-b.png", illu, {
        depth: 12,
        initPcX: .35,
        initPcY: .91,
        initDispY: -65
    });

waterSurfaceC = new FloatingObject("water-surface-c.png", illu, {
        depth: 12,
        initPcX: .45,
        initPcY: .91,
        initDispY: -65
    });

waterSurfaceD = new FloatingObject("water-surface-d.png", illu, {
        depth: 12,
        initPcX: .65,
        initPcY: .91,
        initDispY: -65
    });

waterSurfaceE = new FloatingObject("water-surface-e.png", illu, {
        depth: 12,
        initPcX: .85,
        initPcY: .91,
        initDispY: -65
    });

castle = new FloatingObject("castle.png", illu, {
        depth: 14,
        initPcX: .5,
        initPcY: .45,
        floatFrequency: .03,
        floatAmplitude: 5,
        floatAngle: 0
    });

tentacleLeft = new FloatingObject("tentacle-left.png", illu, {
        depth: 18,
        initPcX: .5,
        initDispX: -115,
        initPcY: .92,
        initDispY: -70,
        hideBelowX: sizeL
    });

tentacleRight = new FloatingObject("tentacle-right.png", illu, {
        depth: 18,
        initPcX: .5,
        initDispX: 115,
        initPcY: .92,
        initDispY: -70,
        hideBelowX: sizeL
    });

whale = new FloatingObject("whale.png", illu, {
        depth: 22,
        initPcX: .5,
        initPcY: .97,
        initDispY: -70,
        hideBelowX: sizeXS
    });

beachLeft = new FloatingObject("beach-left.png", illu, {
        depth: 21,
        initPcX: .17,
        initPcY: .91
    });

beachRight = new FloatingObject("beach-left.png", illu, {
        depth: 21,
        initPcX: .9,
        initPcY: .91,
        initScaleX: -.5
    });

smallShipBottomRight = new FloatingObject("small-ship-bottom-right.png", illu, {
        depth: 21,
        initPcX: .82,
        initPcY: .8
    });

swordTreeLeft = new FloatingObject("sword-tree-left.png", illu, {
        depth: 22,
        initPcX: .17,
        initPcY: .91
    });

treesLeft = new FloatingObject("trees-left.png", illu, {
        depth: 22,
        initPcX: .11,
        initPcY: .86
    });

columnLeft = new FloatingObject("column-left.png", illu, {
        depth: 25,
        initPcX: .05,
        initPcY: 1,
        initDispY: -150
    });

treeBottomRight = new FloatingObject("tree-bottom-right.png", illu, {
        depth: 25,
        initPcX: .95,
        initPcY: 1,
        initDispY: -150
    });

spartan = new FloatingObject("spartan.png", illu, {
        depth: 26,
        initPcX: .3,
        initPcY: 1,
        initDispY: -110,
        hideBelowX: sizeS
    });

viking = new FloatingObject("viking.png", illu, {
        depth: 26,
        initPcX: .7,
        initPcY: 1,
        initDispY: -110,
        hideBelowX: sizeS
    });

frame = new PIXI.Sprite();
    container.addChild(frame);

frameLineTop = new FloatingObject("frame-line.png", frame, {
        centerPivotX: false,
        initDispX: framePadding,
        initDispY: framePadding,
        affectedByScale: false
    });

frameLineBottom = new FloatingObject("frame-line.png", frame, {
        centerPivotX: false,
        initDispX: framePadding,
        initPcY: 1,
        initDispY: -framePadding,
        affectedByScale: false
    });

frameLineLeft = new FloatingObject("frame-line.png", frame, {
        centerPivotX: false,
        initRotation: Math.PI / 2,
        initDispX: framePadding,
        initDispY: framePadding,
        affectedByScale: false
    });

frameLineRight = new FloatingObject("frame-line.png", frame, {
        centerPivotX: false,
        initRotation: Math.PI / 2,
        initPcX: 1,
        initDispX: -framePadding,
        initDispY: framePadding,
        affectedByScale: false
    });

frameTopMiddle = new FloatingObject("frame-top-middle.png", frame, {
        initPcX: .5,
        initDispY: framePadding + 5,
        affectedByScale: false
    });
    frameBottomMiddle = new FloatingObject("frame-top-middle.png", frame, {
        initPcX: .5,
        initPcY: 1,
        initDispY: -framePadding - 5,
        initRotation: Math.PI,
        affectedByScale: false
    });

cornerTL = new FloatingObject("frame-corner.png", frame, {
        initDispX: framePadding,
        initDispY: framePadding,
        affectedByScale: false
    });
    cornerTR = new FloatingObject("frame-corner.png", frame, {
        initPcX: 1,
        initDispX: -framePadding,
        initDispY: framePadding,
        affectedByScale: false
    });
    cornerBL = new FloatingObject("frame-corner.png", frame, {
        initDispX: framePadding,
        initPcY: 1,
        initDispY: -framePadding,
        affectedByScale: false
    });
    cornerBR = new FloatingObject("frame-corner.png", frame, {
        initPcX: 1,
        initDispX: -framePadding,
        initPcY: 1,
        initDispY: -framePadding,
        affectedByScale: false
    });

onWindowResize();
    animate();
}

var FloatingObject = function(texName, parent, params) {
    this.params = params || {};
    this.initPcX = this.params.initPcX || 0;
    this.initPcY = this.params.initPcY || 0;
    this.initDispX = this.params.initDispX || 0;
    this.initDispY = this.params.initDispY || 0;
    this.depth = this.params.depth || 0;
    this.tiling = (this.params.tiling) ? true : false;
    this.initRotation = this.params.initRotation || 0;
    this.initScaleX = this.params.initScaleX || .5;
    this.initScaleY = this.params.initScaleY || .5;
    this.affectedByScale = (this.params.affectedByScale == false) ? false : true;
    this.centerPivotX = (this.params.centerPivotX == false) ? false : true;
    this.centerPivotY = (this.params.centerPivotY == false) ? false : true;
    this.hideBelowX = this.params.hideBelowX || 0;
    this.hideBelowY = this.params.hideBelowY || 0;
    this.floatFrequency = this.params.floatFrequency || 0;
    this.floatAmplitude = this.params.floatAmplitude || 0;
    this.floatAngle = this.params.floatAngle || 0;

this.texName = texName;
    this.visible = true;

this.parent = parent;
    if (this.tiling) {
        this.sprite = PIXI.TilingSprite.fromFrame(texName);
    } else {
        this.sprite = PIXI.Sprite.fromFrame(texName);
    }

if (this.centerPivotX) this.sprite.pivot.x = this.sprite.width / 2;
    if (this.centerPivotY) this.sprite.pivot.y = this.sprite.height / 2;

this.parent.addChild(this.sprite);
    elements.push(this);

this.updatePosition();
}

FloatingObject.prototype.updatePosition = function(speed) {
    var sp = speed || 0;

var floatY = 0;

if (this.floatFrequency > 0) {
        this.floatAngle += this.floatFrequency;
        floatY = Math.cos(this.floatAngle) * this.floatAmplitude * 2;
    }

var tx = (WIDTH * this.initPcX) + this.initDispX - mousePos.x * this.depth * parallaxCoeff;
    var ty = (HEIGHT * this.initPcY) + this.initDispY + floatY + mousePos.y * this.depth * parallaxCoeff;

var tsx = this.initScaleX;
    var tsy = this.initScaleY;

if (this.affectedByScale) {
        var ratioS = (1 + ((this.depth - 18) / 100));
        var ratioT = (1 + ((this.depth - 18) / 50));

tsx *= globalScale * ratioS;
        tsy *= globalScale * ratioS;

tx = (WIDTH / 2) + (tx - WIDTH / 2) * globalScale * repulsion;
        ty = (HEIGHT / 2) + (ty - HEIGHT / 2) * globalScale * repulsion;
    }

this.sprite.rotation = this.initRotation;

// not visible but it should be visible
    if (!this.visible && WIDTH > this.hideBelowX && HEIGHT > this.hideBelowY) {
        this.visible = true;
        TweenMax.to(this.sprite.scale, 1, {
            x: tsx,
            y: tsy,
            ease: Power4.easeInOut
        });
        this.sprite.x = tx;
        this.sprite.y = ty;
        return;
        // not visible and it should stay not visible
    } else if (!this.visible) {
        this.sprite.x = tx;
        this.sprite.y = ty;
        return;

// visible but it should be not visible
    } else if (this.visible && (WIDTH < this.hideBelowX || HEIGHT < this.hideBelowY)) {
        this.visible = false;
        TweenMax.killTweensOf(this.sprite.scale);
        TweenMax.to(this.sprite.scale, 1, {
            x: 0,
            y: 0,
            ease: Power4.easeInOut
        });

return;
    }

this.visible = true;

if (this.affectedByScale) {
        this.sprite.x += (tx - this.sprite.x) * .1;
        this.sprite.y += (ty - this.sprite.y) * .1;
        this.sprite.scale.x += (tsx - this.sprite.scale.x) * .1;
        this.sprite.scale.y += (tsy - this.sprite.scale.y) * .1;

//TweenMax.to(this.sprite.scale, .5, {x:tsx, y:tsy, ease:Power4.easeInOut});

} else {
        this.sprite.x = tx;
        this.sprite.y = ty;
        this.sprite.scale.x = tsx;
        this.sprite.scale.y = tsy;
    }

//this.sprite.visible = (WIDTH > this.hideBelowX) && (HEIGHT > this.hideBelowY);
}

function animate() {
    requestAnimationFrame(animate);
    repositionAll();
    renderer.render(container);
}

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Rakkas');
body {
    background-color: #232728;
    overflow: hidden;
    font-family: 'Rakkas';
}
#pixiCanvas {
    position: absolute;
}
.title {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 5em;
}
.title {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #DBAB4C;
    font-size: 4em;
}
.paragraph {
    position: absolute;
    left: 50%;
    top: 70%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1em;
}
#credits {
    position: absolute;
    width: 100%;
    margin: auto;
    bottom: 0;
    margin-bottom: 12px;
    font-family: 'Rakkas', sans-serif;
    letter-spacing: 0.1rem;
    color: #777;
    font-size: 0.7em;
    text-transform: uppercase;
    text-align: center;
}
#credits a {
    color: #777;
    text-decoration: none;
}
#credits a:hover {
    color: #DBAB4C;
}

HTML

Castles, responsive parallax landscape

pixi, gsap, city

编辑器支持Emmet

快捷键

Castles, responsive parallax landscape

pixi, gsap, city

HTML5 GSAP房屋搭建（盖房子）动画和日夜场景切换

HTML5 GSAP 会爆炸的雪花

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：