Menu
I implemented this funny page:
http://www.xthema.it/misc/christmas-matrix.html
I retry to do it in three different way but every time I was not able to obtain good performance result with Firefox (I'm using version 17).
On Chrome, Safari and IE, the results are always good, but on FF it is slow.
Any suggestion? There is someone who know about some FF weakness in accessing DOM or CSS? No one has any optimization to recommend?
984
I've found another possible (super) fast solution:
Description: take semi-transparent png and put it over your matrix letters so that some of them are semi-visible. Move the png around. Difficult to describe - easy to follow quick'n'dirty implementation on attached jsfiddle.
Quick and dirt implementation: (see http://jsfiddle.net/zbHne/)
<html>
<head>
<style type="text/css">
#box{
height: 100px;
width: 300px;
overflow: hidden;
border:2px solid;
background: #000;
}
</style>
<script type="text/javascript">
onload = function(){
var el = document.getElementById("test");
el.style.position = "relative";
var x = -700;
function fly(){
x += 10;
el.style.left = x + "px";
if(x > -100){
x = -700;
}
}
setInterval(fly, 50);
}
</script>
</head>
<body>
<div id="box">
<div style="position: relative; width: 1000px; color: green">test of letterstest of letterstest of letterstest of letterstest of letters</div>
<div id="test"><div style="width: 1000px; height: 100px; background: url(layer.png); position: relative; top: -50px">invisible</div></div>
</div>
</body>
</html>
You should create appropriate layer.png semi-transparent image in order this to work.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
