page-not-found

A collection of components for 404 pages. No dependencies.

Quick Start

Include pnf.min.js in your page.

<script src="pnf.min.js"></script>

Choose your container.

<div class="pnf-container"></div>

Initialize with PnF.
```
PnF.fragment('.pnf-container')
```

API

.fragment(selector, options)

Demo

options

Option	Type	Default	Description
`homeUrl`	`string`	`null`	Url to homepage.
`homeLabel`	`string`	`'Home'`	Label text for link button.
`maxRotate`	`number`	`120`	Fragment rotation. Will rotate between `-maxRotate / 2` to `maxRotate / 2`.
`layers`	`[layer]`	miscellaneous	Layer objects array. See below.

layer

Option	Type	Default	Description
`offset`	`number`	miscellaneous	The intensity of layer translation. A negative `offset` produces reverse translation.
`fragments`	`[string]` \	`number`	miscellaneous	Fragment strings array or fragment count.
`color`	`color string`	miscellaneous	Background colors for fragments.

Styling

Generated HTML markup is displayed below. You may style it any way you’d like.

<div class="fragment-container">
  <a class="fragment-home">...</a>
  <div class="fragment-layer-1">
    <div class="fragment"></div>
    <div class="fragment"></div>
  </div>
  <div class="fragment-layer-2">
    <div class="fragment"></div>
    <div class="fragment"></div>
  </div>
  <div class="fragment-layer-3">
    <div class="fragment"></div>
    <div class="fragment"></div>
  </div>
</div>

Style sample:

body {
  margin: 0;
}
.fragment-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.fragment-container div[class*="fragment-layer-"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.1s;
}
.fragment-container .fragment-home {
  color: #fff;
  border-radius: 4px;
  border: none;
  outline: 0;
  box-shadow: 0px 0px 16px 0px rgba(24, 144, 255, 0.3);
  background-color: rgba(24, 144, 255, 0.6);
  padding: 12px 20px;
  font-size: 20px;
  cursor: pointer;
  margin: 50vh auto 0;
  display: block;
  width: max-content;
  text-decoration: none;
  position: relative;
  transition: linear 0.2s;
}
.fragment-container .fragment-home:hover {
  box-shadow: 0px 0px 16px 0px rgba(24, 144, 255, 0.7);
  background-color: rgba(24, 144, 255, 0.95);
}
.fragment-container .fragment-layer-1 .fragment {
  text-align: center;
  line-height: 1.5;
  padding: 5px 10px;
  font-size: 18px;
  color: #fff;
}
.fragment-container .fragment-layer-2 .fragment {
  width: 20px;
  height: 20px;
}
.fragment-container .fragment-layer-3 .fragment {
  width: 10px;
  height: 10px;
}

TODO

Locate text layer fragments from left to right. Currently it’s totally random.

LICENSE

Under the MIT License. See the LICENSE file for details.
Under the Anti 996 License. See the Anti 996 LICENSE file for details.