صفحه ۴۰۴ بسیار زیبا – قالب ۴۰۴

 در این پست صفحه ۴۰۴ بسیار زیبا – قالب ۴۰۴ قالبی کاربردی و ظاهری زیبا میتوان برای صفحه های ۴۰۴ و … استفاده کرد.این قالب به شکل متحرک طراحی شده با کلیک روی بخشهای این قالب به بصورت اب و یا ابشار شکل میباشد زرات اب به هوا پرتاب شده و جذاب میباشد.

همچنین شما میتوانید منوی ثابت در بالای صفحه با لینک دادن به بخش های دیگر سایت خود برای هدایت کردن کاربران استفاده نمایید.

 

صفحه 404

پیش نمایش قالب

<!doctype html> 
<html lang="en">
<head><h1><a style="display:none;" href="https://www.codebazan.ir/">&#1589;&#1601;&#1581;&#1607; 404 &#1576;&#1587;&#1740;&#1575;&#1585; &#1586;&#1740;&#1576;&#1575; - &#1602;&#1575;&#1604;&#1576; 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>

برای تست کد و یا ویرایش کد بهتر است از ابزار پیش نمایش کدبازان استفاده نمایید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code