LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



First, the Click Effect

Having a full-size page canvas for the small particle explosion click effect means that most page elements end up under the canvas and not clickable--no good for nav elements, links, or anything else that needs to be hovered or clicked on. My workaround here is an "above" class that can be applied to any such elements which raises that element's z-index above the canvas. This anchor tag to nowhere demonstrates a usage of the above class, as well as the navbar above. Also, the full-size canvas's positioning does not work when set to absolute, as with the header and navbar canvasses; instead, a fixed positioning was used.

Second, the Header and Nav Canvasses

The header and nav elements each have their own canvasses. Again, we see the "above" class at work, making the nav elements hoverable and clickable. The randomization of the shapes was a decision I made after running into the following problem: in both of these canvasses, a wrap effect is achievable by simply jumping to the opposite x or y coordinate when the edge of the canvas is reached. However, when the window is resized, the movement and wrapping of the shapes will still reflect the window size from when the page was loaded (there will be large gaps between collections of shapes after the window is resized). I'm unsure of a workaround for that yet.

CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body {
  margin: 0;
  font-family: "Source Sans Pro";
  color: #eef;
  background-color: #505522;
}

a {;
  color: #000104;
  text-decoration: underline;
  position: relative;
  z-index: 1000;
}

a:hover, a:active {
  background-color: rgba(0,0,0,0.25)
}

.above {
  position: relative;
  z-index: 1000;
}

#header {
  padding: 5px;
  position: relative;
}
#header > * {
  margin: 15px;
}
#header p {
  font-size: 0.9em;
}

#nav {
  color: #115;
  position: relative;
}

#nav div {
  font-weight: bold;
  display: inline-block;
  padding: 1em;
  height: 1.5em;
  cursor: pointer;
}

#nav div:hover, #nav div:active {
  background-color: #b2478e;
  color: #000;
  opacity: 0.6667;
}

.main {
  position: relative;
  color: #fff;
}

.main a {
  color: #fff;
}

.article {
  background-color: #939c3e;
  padding: 15px;
  margin-bottom: 5px;
}

/*CSS for the canvasses*/
#headerCanvas, #navCanvas, #pageCanvas {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#headerCanvas {
  background-color: #524;
}
#navCanvas {
  background-color: #daa2c7;
}
#pageCanvas {
  background-color: rgba(0,0,0,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
JS
//Code for the header canvas
var headerCanvas = document.getElementById('headerCanvas');
var headerEl = document.getElementById('header');
var hCtx = headerCanvas.getContext('2d');
headerCanvas.width = headerEl.offsetWidth;
headerCanvas.height = headerEl.offsetHeight;

//Code for nav canvas
var navCanvas = document.getElementById('navCanvas');
var navEl = document.getElementById('nav');
var nCtx = navCanvas.getContext('2d');
navCanvas.width = navEl.offsetWidth;
navCanvas.height = navEl.offsetHeight;

//Code for page canvas
var pageCanvas = document.getElementById('pageCanvas');
var pCtx  = pageCanvas.getContext('2d');
pageCanvas.width = innerWidth;
pageCanvas.height = innerHeight;

//Let's do a falling star-ish effect for the header
var Star = function(){
  this.x = Math.random() * headerCanvas.width;
  this.y = Math.random() * -150;
};
Star.prototype.move = function(){
  this.x > 0 ? this.x-- : this.x = headerCanvas.width;
  this.y < headerCanvas.height + 15 ? this.y++ : (this.y = Math.random() * -15, this.x = Math.random() * headerCanvas.width);
};
var starArray = [];
for (var i = 0; i < 40; i++) {
  starArray.push(new Star);
}

//...and we'll do a rain effect for the navbar
var Drop = function() {
  this.x = Math.random() * navCanvas.width;
  this.y = Math.random() * -150;
}
Drop.prototype.move = function(){
  this.x > 0 ? this.x -= 5 : this.x = navCanvas.width;
  this.y < navCanvas.height ? this.y += 5 : (this.y = Math.random() * -15, this.x = Math.random() * navCanvas.width);
};
var dropArray = [];
for (var k = 0; k < 40; k++) {
  dropArray.push(new Drop);
}

//Finally, a small explode effect on click for the page canvas
var Particle = function() {
  this.x = -10;
  this.y = -10;
  this.xDir = 0.5 - Math.random();
  this.yDir = 0.5 - Math.random();
  this.lifeTime = 0;
};
Particle.prototype.jumpToClick = function(x,y){
  this.lifeTime = 60;
  this.x = x;
  this.y = y;
  this.xDir = 0.5 - Math.random();
  this.yDir = 0.5 - Math.random();
};
Particle.prototype.move = function() {
  if (this.lifeTime > 0) {
    this.x += this.xDir;
  	this.y += this.yDir;
  }
  this.lifeTime <= 0 ? (this.x = -10, this.y = -10) : this.lifeTime--;
};

var partArray = [];
for (var m = 0; m < 10; m++) {
  partArray.push(new Particle);
}

document.addEventListener('click',function(event){
  for (var o = 0; o < partArray.length; o++) {
    partArray[o].jumpToClick(event.clientX,event.clientY);
  }
})

document.addEventListener('touchstart', function(event){
  event.preventDefault();
  for (var o = 0; o < partArray.length; o++) {
    partArray[o].jumpToClick(event.changedTouches[0].clientX,event.changedTouches[0].clientY);
  }
},false);

//Resize canvasses on window resize
window.onresize = function() {
	headerCanvas.width = headerEl.offsetWidth;
	headerCanvas.height = headerEl.offsetHeight;
	navCanvas.width = navEl.offsetWidth;
	navCanvas.height = navEl.offsetHeight;
  pageCanvas.width = innerWidth;
  pageCanvas.height = innerHeight;
}

function init() {
  window.requestAnimationFrame(draw);
}

function draw() {
  //Page drawing
  pCtx.clearRect(0,0,innerWidth,innerHeight);
  pCtx.fillStyle = 'rgba(193,195,255,0.75)';
  for (var n = 0; n < partArray.length; n++) {
    pCtx.beginPath(); 
    pCtx.arc(partArray[n].x,partArray[n].y,2,0,Math.PI * 2);
    pCtx.fill();
    partArray[n].move();
  }
  
  //Header drawing
  hCtx.clearRect(0,0,headerCanvas.width,headerCanvas.height);
  hCtx.fillStyle = "#b2478e";
  for (var j = 0; j < starArray.length; j++) {
    hCtx.beginPath();
    hCtx.arc(starArray[j].x,starArray[j].y,5,0,Math.PI * 2)
    hCtx.fill();
    starArray[j].move();
  }
  //Nav drawing
  nCtx.fillStyle = 'rgba(218,162,199,0.2)';
  nCtx.fillRect(0,0,navCanvas.width,navCanvas.height);
  nCtx.strokeStyle = '#b2478e';
  for (var l = 0; l < dropArray.length; l++) {
    //nCtx.fillRect(dropArray[l].x,dropArray[l].y,2,2);
    nCtx.beginPath();
    nCtx.moveTo(dropArray[l].x,dropArray[l].y);
    nCtx.lineTo(dropArray[l].x-5, dropArray[l].y+5);
    nCtx.stroke();
    dropArray[l].move();
  }
  
  window.requestAnimationFrame(draw);
}
init();

Description

A proof-of-concept experiment to see what canvasses look like underneath HTML elements.
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv