صفحه ۴۰۴ بسیار زیبا – قالب ۴۰۴
در این پست صفحه ۴۰۴ بسیار زیبا – قالب ۴۰۴ قالبی کاربردی و ظاهری زیبا میتوان برای صفحه های ۴۰۴ و … استفاده کرد.این قالب به شکل متحرک طراحی شده با کلیک روی بخشهای این قالب به بصورت اب و یا ابشار شکل میباشد زرات اب به هوا پرتاب شده و جذاب میباشد.
همچنین شما میتوانید منوی ثابت در بالای صفحه با لینک دادن به بخش های دیگر سایت خود برای هدایت کردن کاربران استفاده نمایید.
<!doctype html>
<html lang="en">
<head><h1><a style="display:none;" href="https://www.codebazan.ir/">صفحه 404 بسیار زیبا - قالب 404</a></h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>صفحه یافت نشد -کدبازان</title>
<style type="text/css">
body { background-color: #000000; margin: 0px; overflow: hidden; }
#info { position: absolute; top: 0px; width: 100%; color: #00a0c0; padding: 5px; font-family:Monospace; font-size:13px; text-align:center; }
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><style>
.imm img{
margin-top:10px;
margin-left:10px;
transition: width 1s , height 1s ;
-moz-transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
width: 140px;
height: 90px;
box-shadow: 0px 0px 10px black;
border-radius: 5px;
animation:myfirst 0.5s infinite;
-moz-animation:myfirst 0.5s infinite;
-webkit-animation:myfirst 0.5s infinite;
}
.imm img:hover{
box-shadow: 0px 0px 10px black;
width: 400px ;
height: 240px ;
box-shadow: 0px 0px 10px black;
border-radius: 5px;
}
@keyframes myfirst
{
۰% {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;}
۵۰% {box-shadow: 0px 0px 15px;-o-box-shadow: 0px 0px 15px;-ms-box-shadow: 0px 0px 15px;-khtml-box-shadow: 0px 0px 15px;}
۱۰۰% {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;}
}
@-moz-keyframes myfirst
{
۰% {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;}
۵۰% {box-shadow: 0px 0px 15px;-moz-box-shadow: 0px 0px 15px;}
۱۰۰% {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;}
}
@-webkit-keyframes myfirst
{
۰% {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;}
۵۰% {box-shadow: 0px 0px 15px;-webkit-box-shadow: 0px 0px 15px;}
۱۰۰% {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;}
}
</style>
<div style="display:none"><a href="https://codebazan.ir/"></a><a href="https://codebazan.ir/"></a></div>
<center class="imm">
سایت کدبازان
<script type="text/javascript">
var QUALITY_X = 6, QUALITY_Y = 3,
WIDTH = Math.floor(window.innerWidth / QUALITY_X), HEIGHT = Math.floor(window.innerHeight / QUALITY_Y), SIZE = WIDTH * HEIGHT,
HEIGHT_HALF = Math.floor(HEIGHT / 2),
TEXT_OFFSETY = Math.floor((HEIGHT - 64) / 2),
context, image, data,
buffer1, buffer2, tempbuffer,
canvasHeightMap, contextHeightMap, imageHeightMap, dataHeightMap,
canvasText, contextText, imageText, dataText,
input, text,
isUserInteracting, pointers;
init();
setInterval(loop, 1000 / 60);
function init() {
var container, canvas;
container = document.getElementById('container');
// متن خودتونو در زیر وارد کنید و از قالب لذت ببرید
input = document.createElement("input");
input.type = "text";
input.value = "کدبازان";
input.style.position = "absolute";
input.style.top = "10px";
input.style.left = "10px";
input.style.opacity = "0";
container.appendChild(input);
input.focus();
// Height Map (Water)
canvasHeightMap = document.createElement("canvas");
canvasHeightMap.width = WIDTH;
canvasHeightMap.height = HEIGHT;
contextHeightMap = canvasHeightMap.getContext("2d");
imageHeightMap = contextHeightMap.getImageData(0, 0, WIDTH, HEIGHT);
dataHeightMap = imageHeightMap.data
buffer1 = [];
buffer2 = [];
for (var i = 0; i < SIZE; i ++) {
buffer1[i] = 128;
buffer2[i] = 128;
}
// Text
canvasText = document.createElement("canvas");
canvasText.width = WIDTH;
canvasText.height = 128;
contextText = canvasText.getContext("2d");
contextText.font = "80px Helvetica";
contextText.fillStyle = "rgb(255, 0, 0)";
contextText.textAlign = "center";
// Output (Parallax)
canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
container.appendChild(canvas);
context = canvas.getContext ("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0, WIDTH, HEIGHT);
image = context.getImageData(0, 0, WIDTH, HEIGHT);
data = image.data;
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener('touchend', onDocumentTouchEnd, false);
document.addEventListener('keypress', onDocumentKeyPress, false);
}
// Event Handlers
function onDocumentMouseDown(event) {
event.preventDefault();
isUserInteracting = true;
input.focus();
pointers = [[event.clientX / QUALITY_X, event.clientY / QUALITY_Y]];
}
function onDocumentMouseMove(event) {
pointers = [[event.clientX / QUALITY_X, event.clientY / QUALITY_Y]];
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
}
function onDocumentMouseOut(event) {
isUserInteracting = false;
}
function onDocumentTouchStart(event) {
isUserInteracting = true;
event.preventDefault();
pointers = [];
for (var i = 0; i < event.touches.length; i++) {
pointers.push([event.touches[i].pageX / QUALITY_X, event.touches[i].pageY / QUALITY_Y]);
}
}
function onDocumentTouchMove(event) {
event.preventDefault();
pointers = [];
for (var i = 0; i < event.touches.length; i++) {
pointers.push([event.touches[i].pageX / QUALITY_X, event.touches[i].pageY / QUALITY_Y]);
}
}
function onDocumentTouchEnd(event) {
event.preventDefault();
isUserInteracting = false;
}
function onDocumentKeyPress(event) {
switch(event.keyCode) {
case 13:
input.value = "";
break;
}
}
//
function emit(x, y) {
buffer1[Math.floor(x) + (Math.floor(y + 40) * WIDTH)] = 256;
}
function writeText(string) {
text = string;
contextText.clearRect(0, 0, WIDTH, 128);
contextText.fillText(string, WIDTH / 2, 63);
imageText = contextText.getImageData(0, 0, WIDTH, 128);
dataText = imageText.data;
}
function processText() {
for(y = 0; y < 128; y++) {
for(x = 0; x < WIDTH; x++) {
if (dataText[(x + y * WIDTH) * 4] > 0) {
emit(x, y + TEXT_OFFSETY);
}
}
}
}
function loop() {
var x, y, yz, pixel, index, indices;
if (isUserInteracting) {
for (var i = 0; i < pointers.length; i++) {
emit(pointers[i][0], pointers[i][1]);
}
}
// Water
var pixel, iMax = (WIDTH * HEIGHT) - WIDTH;
for (var i = WIDTH; i < iMax; i++) {
pixel = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i];
buffer2[i] = pixel -= (pixel - 128) >> 4;
dataHeightMap[i * 4] = pixel > 255 ? 255 : pixel < 0 ? 0 : pixel;
}
tempbuffer = buffer1;
buffer1 = buffer2;
buffer2 = tempbuffer;
// Text
if (text != input.value) {
writeText(input.value);
}
processText();
indices = [];
for(x = 0; x < WIDTH; x++) {
levels = []; pixels = [];
for(y = 0; y < HEIGHT; y++) {
index = indices[y] = (x + y * WIDTH) * 4;
pixels[y] = dataHeightMap[index];
levels[y - (dataHeightMap[index] * HEIGHT >> 10) ] = y;
}
for(y = 0, yz = -1; y < HEIGHT; y++) {
pixels[y] = levels[y] > yz ? pixel = pixels[yz = levels[y]] : pixel;
index = indices[y];
data[index + 1] = pixel - 64 + (y >> 2);
data[index + 2] = pixel - 32 + (y >> 2);
}
}
context.putImageData(image, 0, 0);
}
document.write('<a href="https://codebazan.ir" style="display:none"></a> ');
</script>
</body>
</html>
برای تست کد و یا ویرایش کد بهتر است از ابزار پیش نمایش کدبازان استفاده نمایید.