Castles, responsive parallax landscape

castles-responsive-parallax-landscape.markdown

Castles, responsive parallax landscape

A responsive landscape (some elements are added / removed depending on the screen size) made with Pixi.js for the epic.net website menu.

A Pen by phon xay on CodePen.

License.

index.html

<div id="pixiCanvas"></div>

<h1 class="title">Resize your screen</h1>
<div id="credits">
  <p> <a href="https://codepen.io/Yakudoo/"  target="blank">my other codepens</a> | <a href="https://www.epic.net" target="blank">epic.net</a></p>
</div>

script.js

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.1.1/pixi.min.js"></script>

style.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;
}