logo DevAnswer - Developers Answer

404 Page with Matrix Effect

26th August

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  min-height: 100vh;
  background: linear-gradient(35deg, #a1eeeb 30%, #4331ec 85%);
  background: linear-gradient(35deg, #f8d60f 20%, #fc5c5c 85%);
  background: linear-gradient(65deg, #fbdc14 20%, #04c4d4 20%, #04c4d4 65%, #fc5c5c 65%, #fc5c5c 85%);
}
canvas {
  height: 30vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
}
canvas {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.content {
  align-items: center;
  color: #fafafa;
  display: flex;
  height: 100vh;
  width: 100vw;
  position: absolute;
  justify-content: center;
  z-index: 2;
}
.content h1 {
  font-size: 4rem;
  text-shadow: 10px 10px 5px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .content h1 {
    font-size: 10rem;
  }
}
</style>

</head>
<body>
<canvas></canvas>
<div class="content">
<h1>404</h1>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
const {
  PIXI: {
    Application,
    particles: { ParticleContainer },
    Sprite } } =

window;
let FONT_SIZE = innerHeight / 10;
const FRACTION = 0.3;
const PARTICLE_CONTAINER_OPTS = {
  scale: true,
  position: true,
  alpha: true };

const getHeight = () => Math.floor(innerHeight * FRACTION);
const view = document.querySelector('canvas');
const AMOUNT = 100;
const onTick = () => {
  if (
  App.renderer.width !== innerWidth ||
  App.renderer.height !== getHeight())
  {
    App.renderer.resize(innerWidth, getHeight());
    Fours.removeChildren();
    Ohhhs.removeChildren();
    Page.removeChildren();
    FONT_SIZE = innerHeight / 10;
    bootstrapLayers();
  }
  for (const p of [...Fours.children, ...Ohhhs.children, ...Page.children]) {
    p.x -= p.vx;
    if (p.x < -p.width) {
      p.x = p.startingX;
    }
  }
};

const App = new Application({
  antialias: true,
  height: getHeight(),
  transparent: true,
  view,
  width: innerWidth });


const createText = (text, opts = { height: FONT_SIZE * 2, width: FONT_SIZE * 2 }) => {
  const canvas = document.createElement('canvas');
  canvas.width = opts.width;
  canvas.height = opts.height;
  const context = canvas.getContext('2d');
  context.font = `${Math.floor(innerHeight / 10)}px Roboto`;
  context.fillStyle = '#ffffff';
  context.fillText(text, 0, FONT_SIZE, innerWidth);
  return canvas;
};

const addParticles = (amount, container, text) => {
  new Array(amount).fill().map(p => {
    p = new Sprite.from(text);
    p.vx = Math.random() * 10 + 1;
    p.x = p.startingX = innerWidth + (Math.floor(Math.random() * (innerWidth * 2 - text.width * 2)) + text.width * 2);
    p.y = Math.floor(Math.random() * (getHeight() - text.height / 2));
    p.scale.x = p.scale.y = (Math.random() * 50 + 50) / 100;
    p.alpha = Math.random() * 50 / 100;
    container.addChild(p);
  });
};

const bootstrapLayers = () => {
  addParticles(Math.floor(innerWidth / 10), Fours, createText('4'));
  addParticles(Math.floor(innerWidth / 10), Ohhhs, createText('0'));
  addParticles(Math.floor(innerWidth / 50), Page, createText('Page not found', { height: FONT_SIZE * 2, width: innerWidth }));
};

const Fours = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS);
const Ohhhs = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS);
const Page = new ParticleContainer(Math.floor(innerWidth / 50), PARTICLE_CONTAINER_OPTS);
bootstrapLayers();

App.stage.addChild(Fours);
App.stage.addChild(Ohhhs);
App.stage.addChild(Page);
App.ticker.add(onTick);
</script>

</body>
</html>                        



Other Codes