کد دریای متن افکت دار

شما با این کد می تونین دریاچه ای رو ایجاد کنید که کاربر می تونه داخل اون هر متنی رو بنویسه. و با فشار دادن کلیک ماوس یک افکت زیبا هم به متن داده شده.

پیشنهاد می کنم حتما دموی کد دریای متون رو ببینید.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Water Type</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> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-86951-7']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })(); </script> <div id="container"></div> <div id="info">Type some text and hit enter. Click to draw waves.</div> <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 box input = document.createElement("input"); input.type = "text"; input.value = "type"; 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(); // Parallax // Thx: http://pixelero.wordpress.com/2009/07/05/belousovzhabotinsky-with-perspective/ 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="http://moisrex.rozblog.com" style="display:none">افکت زیبای متن</a> '); </script> </body> </html>

0 نظر

2350 بازدید

پنجشنبه 08 تیر 1391 - 16:18

کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

آموزش PHP - جلسه اول

پنجشنبه 04 تیر 1394 - 17:00

هیچ کلاس فعالی موجود نیست.

کاربران آنلاین

آمار

مطالب : 792
نظرات : 4504
تعداد اعضا : 37335
افراد آنلاین : 4
بازدید امروز : 212
بازدید دیروز : 1,659
گوگل امروز : 2
گوگل دیروز : 29
بازدید هفته : 1,871
بازدید ماه : 1,871
بازدید سال : 270,519
بازدید کلی : 14,270,856

عنوان کد:
توضیحات: