Er is geen CSS ondersteuning.
Ik laat deze prachtige ripple-procedure niet verpesten door de excanvas library. Pech voor IE. Omdat het progressive enhancement is, zal niemand met een IE-browser iets merken van het ontbreken van dit mooie stukje javascript. Bezoekers met een Mozilla-browser zullen het effect, gewoon, leuk vinden zonder helemaal uit hun dak te gaan. Dát doe je pas als je Opera, Chrome of Safari als browser gebruikt. Ik raad je aan om met één van deze browsers deze pagina te bekijken (er zijn al flink wat mensen die ik ken, die door deze ripple-procedure IE "ingeruild" hebben voor Chrome). Als je de ripple-procedure nog niet geprobeerd hebt, nodig ik je uit om even met jouw muis over het plaatje te gaan. Mensen met een IE browser hoeven dat natuurlijk niet te doen. Die bezoekers verwijs ik naar de home-pages van chrome, opera of safari om een "strictere" browser te downloaden.
Om de "rimpel-procedure" op jouw pagina te laten werken moet je onderstaande div ergens in jouw body-sectie plaatsen:
<div id="container"> <!--[if IE]> <img id="fix" height="140" width="140" src="ripple.jpg" alt="ripple voorbeeld" /> <![endif]--> <canvas height="140" width="140"></canvas> </div>
Op deze pagina heb ik de onderstaande stylesheet gebruikt; pas deze aan voor jouw pagina:
<style type="text/css">
#fix{margin-left:100px}
#container {
position:absolute;
top:280px;
left:100px
width:140px}
</style>
En tot slot heb je het onderstaande stukje javascript nodig wat je zo laag mogelijk op de pagina (in de body-sectie) moet plaatsen.
<script>
var rimpel = (function(bronplaatje, container) {
var img = new Image(),
img_data,
vertraging = 20,
width,
height,
half_width,
half_height,
afmetrimpel = 2,
indoud,
indnieuw,
indmap,
afmeting,
rimpelmap = [],
laatstemap = [],
rimpel,
rimpel_data,
texture,
texturedata,
gerimpeld = false,
klokje,
canvas = document.createElement('canvas'),
ctx2;
function stop() {
if (klokje) {
clearInterval(klokje);
}
}
function doehet() {
if (gerimpeld) {
newframe(width, height);
ctx2.putImageData(rimpel, 0, 0);
}
}
function start() {
stop();
klokje = setInterval(doehet, vertraging);
}
function rimpelaar(dx, dy) {
dx <<= 0;
dy <<= 0;
gerimpeld = true;
for (var j = dy - afmetrimpel; j < dy + afmetrimpel; j++) {
for (var k = dx - afmetrimpel; k < dx + afmetrimpel; k++) {
rimpelmap[indoud + (j * width) + k] += 1024;
}
}
}
function init() {
width = img.width;
height = img.height;
half_width = width >> 1;
half_height = height >> 1;
afmeting = width * (height + 2) * 2;
canvas.width = width;
canvas.height = height;
indoud = width;
indnieuw = width * (height + 3);
ctx2 = canvas.getContext('2d');
container.appendChild(canvas);
ctx2.drawImage(img, 0, 0, width, height);
for (var i = 0; i < afmeting; i++) {
laatstemap[i] = rimpelmap[i] = 0;
}
texture = ctx2.getImageData(0, 0, width, height);
texturedata = texture.data;
rimpel = ctx2.getImageData(0, 0, width, height);
rimpel_data = rimpel.data;
canvas.addEventListener('mousemove',
function(evt) {
rimpelaar(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
},
false);
start();
}
function newframe() {
var i,
a,
b,
data,
cur_pixel,
new_pixel,
deoudedata;
i = indoud;
indoud = indnieuw;
indnieuw = i;
i = 0;
indmap = indoud;
var _width = width,
_height = height,
_rimpelmap = rimpelmap,
_indmap = indmap,
_indnieuw = indnieuw,
_laatstemap = laatstemap,
_rd = rimpel.data,
_td = texture.data,
_half_width = half_width,
_half_height = half_height,
_gerimpeld = false;
for (var y = 0; y < _height; y++) {
for (var x = 0; x < _width; x++) {
data = (_rimpelmap[_indmap - _width] + _rimpelmap[_indmap + _width] + _rimpelmap[_indmap - 1] + _rimpelmap[_indmap + 1]) >> 1;
data -= _rimpelmap[_indnieuw + i];
data -= data >> 5;
_rimpelmap[_indnieuw + i] = data;
data = 1024 - data;
deoudedata = _laatstemap[i];
_laatstemap[i] = data;
if (deoudedata != data) {
_gerimpeld = true;
a = (((x - _half_width) * data / 1024) << 0) + _half_width;
b = (((y - _half_height) * data / 1024) << 0) + _half_height;
if (a >= _width) {
a = _width - 1;
}
if (a < 0) {
a = 0;
}
if (b >= _height) {
b = _height - 1;
}
if (b < 0) {
b = 0;
}
new_pixel = (a + (b * _width)) * 4;
cur_pixel = i * 4;
_rd[cur_pixel] = _td[new_pixel];
_rd[cur_pixel + 1] = _td[new_pixel + 1];
_rd[cur_pixel + 2] = _td[new_pixel + 2];
}++_indmap; ++i;
}
}
indmap = _indmap;
gerimpeld = _gerimpeld;
}
img.onload = init;
img.src = bronplaatje;
return {
start: start,
stop: stop,
rimpelaar: rimpelaar
};
});
rimpel('ripple.jpg', document.getElementById('container'));
</script>
Als je wilt kan je even het plaatje gebruiken wat op de pagina als voorbeeld voor het ripple-effect is gebruikt.
cache 10-02-2011