A collection of components for 404 pages. No dependencies.
- Include
pnf.min.jsin your page.
<script src="pnf.min.js"></script>- Choose your container.
<div class="pnf-container"></div>- Initialize with
PnF.
PnF.fragment('.pnf-container')| 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. |
| 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. |
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;
}- Locate text layer fragments from left to right. Currently it's totally random.
- Under the MIT License. See the LICENSE file for details.
- Under the Anti 996 License. See the Anti 996 LICENSE file for details.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent