One Can Create The Matrix Code Rain Animation Effect With Javascript on HTML5 Webpage and Customize According to Need. Here is resources. We talked about basics about HTML5 canvas. We can use Javascript library like jQuery for this purpose. At the time of publication of this article, such animated example can be seen on author’s personal website – abhishekghosh.pro. Allow some time to automatically get the width adjusted.
Blue Pill – Red Pill test described here, which is a serious test; indeed.
The Matrix Code Rain Animation Effect With Javascript
Basic can be done with HTML5 Canvas API and Java Script with this code, first we need to load jquery :
---
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> |
then we add a canvas :
1 | <canvas id="q" width="500" height="500">Sorry Your Browser Does Not Support</canvas> |
Then this code will be injected :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <canvas id=canvas> <script> // http://jsfiddle.net/muV99/16/ var ctx = canvas.getContext('2d'); var columns = []; var chars = []; canvas.height = window.screen.height; canvas.width = window.screen.width; ctx.translate(canvas.width, 0); ctx.scale(-1, 1); for (i = 0; i < 256; columns[i] = 1, chars[i++] = '゠'); ctx.shadowBlur = 2; function step() { ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.shadowColor = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); columns.map(function (value, index) { ctx.fillStyle = ctx.shadowColor = '#000'; ctx.fillRect(index * 10, value - 10, 10, 10); ctx.fillStyle = ctx.shadowColor = '#0F0'; ctx.fillText(chars[index], index * 10, value - 10); columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10; chars[index] = String.fromCharCode(12448 + Math.random() * 96); ctx.fillStyle = ctx.shadowColor = '#AFA'; ctx.fillText(chars[index], index * 10, value); }); } setInterval(step, 33); </script> |
It can be done here :
Embedding The Matrix Code Rain Animation Effect In WordPress Post
If you want something like our above embedded thing, simply adjust these two lines :
1 2 | canvas.height = window.screen.height; canvas.width = window.screen.width; |
to :
1 2 | canvas.height = 300; canvas.width = 400; |
Practically, you are copy pasting this on your WordPress post editor in Text mode :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <canvas id=canvas> <script> var ctx = canvas.getContext('2d'); var columns = []; var chars = []; canvas.height = 300; canvas.width = 400; ctx.translate(canvas.width, 0); ctx.scale(-1, 1); for (i = 0; i < 256; columns[i] = 1, chars[i++] = '゠'); ctx.shadowBlur = 2; function step() { ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.shadowColor = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); columns.map(function (value, index) { ctx.fillStyle = ctx.shadowColor = '#000'; ctx.fillRect(index * 10, value - 10, 10, 10); ctx.fillStyle = ctx.shadowColor = '#0F0'; ctx.fillText(chars[index], index * 10, value - 10); columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10; chars[index] = String.fromCharCode(12448 + Math.random() * 96); ctx.fillStyle = ctx.shadowColor = '#AFA'; ctx.fillText(chars[index], index * 10, value); }); } setInterval(step, 33); </script> |
Possibly you’ll not need to load jquery as your theme already loaded in front end.
About Abhishek Ghosh
Follow the Author of this article :
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!
If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.
Contact Us