KOMPOOS.NL
glossy image 3d
sitemap
voorbeeld 3d glossy afbeelding
uitleg glossy 3d image procedure
Plaats het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina. Elk plaatje wat je de class "image_3d" geeft (en een height en een width) zal zich gedragen zoals de afbeelding hierboven. Maak het plaatje niet te groot (qua afmeting). De procedure komt anders in de "problemen". Geef de afbeelding dezelfde hoogte als de breedte (het origineel moet VIERKANT zijn).
javascript voor de 3d glossy image procedure
<script>
/*global window: false */
var de_afmeting,
afbeelding_bron,
canvas,
b,
h,
kompoos_3d = {
add: function(a, m) {
if (a.tagName.toUpperCase() == "IMG") {
var f = new Image();
f.src = a.src;
b = f.width;
h = f.height;
de_afmeting = Math.max(40, (b > h ? a.height: h > b ? a.width: a.height));
}
if (de_afmeting < 40) {
de_afmeting = 40;
}
try {
var c = a.parentNode;
if (document.all && document.namespaces && !window.opera) {
if (document.namespaces.v === undefined) {
var k = ["shape", "shapetype", "group", "background", "path", "formulas", "handles", "fill", "stroke", "shadow", "textbox", "textpath", "imagedata", "line", "polyline", "curve", "roundrect", "oval", "rect", "arc", "image"],
n = document.createStyleSheet();
for (var glans_ = 0; glans_ < k.length; glans_++) {
n.addRule("v\\:" + k[glans_], "behavior: url(#default#VML);");
}
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
}
var l = (a.currentStyle.display.toLowerCase() == "block") ? "block": "inline-block";
canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:' + l + ";width:" + de_afmeting + "px;height:" + de_afmeting + 'px;padding:0;">'].join(""));
var j = a.currentStyle.styleFloat.toLowerCase();
canvas.dpl = (j == "left" || j == "right") ? "inline": l;
} else {
canvas = document.createElement("canvas");
canvas.iswebkit = navigator.appVersion.indexOf("WebKit") != -1 ? 1: 0;
canvas.issvier = canvas.iswebkit && document.querySelectorAll ? 1: 0;
}
if (canvas || canvas.getContext("2d")) {
canvas.eigenschap = m;
canvas.id = a.id;
canvas.alt = a.alt;
canvas.title = a.title;
canvas.afbeelding_bron = a.src;
canvas.className = a.className;
canvas.style.cssText = a.style.cssText;
canvas.style.height = de_afmeting + "px";
canvas.style.width = de_afmeting + "px";
canvas.height = de_afmeting;
canvas.width = de_afmeting;
canvas.originele_breedte = b;
canvas.originele_hoogte = h;
canvas.onclick = a.onclick;
canvas.ondblclick = a.ondblclick;
c.replaceChild(canvas, a);
kompoos_3d.modify(canvas);
}
} catch(g) {}
},
modify: function(i) {
function U(ag, aa, ae, Y, ad) {
var af = 4 * ((Math.sqrt(2) - 1) / 3),
Z = (Y - aa) / 2,
e = (ad - ae) / 2,
ac = aa + Z,
ab = ae + e;
ag.beginPath();
ag.moveTo(ac, ab - e);
ag.bezierCurveTo(ac + (af * Z), ab - e, ac + Z, ab - (af * e), ac + Z, ab);
ag.bezierCurveTo(ac + Z, ab + (af * e), ac + (af * Z), ab + e, ac, ab + e);
ag.bezierCurveTo(ac - (af * Z), ab + e, ac - Z, ab + (af * e), ac - Z, ab);
ag.bezierCurveTo(ac - Z, ab - (af * e), ac - (af * Z), ab - e, ac, ab - e);
ag.closePath();
return false;
}
function n(ae, ad, aa) {
function Y(af) {
return (Math.max(0, Math.min(parseInt(af, 16), 255)));
}
function Z(af) {
af = Math.round(Math.min(Math.max(0, af), 255));
return ("0123456789ABCDEF".charAt((af - af % 16) / 16) + "0123456789ABCDEF".charAt(af % 16));
}
var ac = Y(ae.substr(1, 2)),
ab = Y(ae.substr(3, 2)),
e = Y(ae.substr(5, 2));
if (aa) {
return "#" + Z(ac * ad) + "" + Z(ab * ad) + "" + Z(e * ad);
} else {
return Math.floor(ac * ad) + "," + Math.floor(ab * ad) + "," + Math.floor(e * ad);
}
}
try {
var alpha_ = i.eigenschap.alpha;
var schaduw_ = i.eigenschap.shade;
var glans_ = i.eigenschap.shine;
var zoom_ = i.eigenschap.zoom;
var shift_ = i.eigenschap.shift;
var kleur_1 = i.eigenschap.color;
var kleur_2 = i.eigenschap.color2;
var h = 0;
if (isNaN(kleur_1)) {
h = (kleur_1.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i) ? kleur_1: 0);
}
var g = 0;
if (isNaN(kleur_2)) {
g = (kleur_2.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i) ? kleur_2: 0);
}
var k = i.width,
l = i.originele_breedte,
y = i.originele_hoogte,
R = 0,
Q = 0,
I = 0,
o = 0,
N = 0.5,
x = 0.5;
var A = (shift_ <= 0.01 ? 0: shift_ >= 100 ? 1: shift_ / 100),
V = (zoom_ < 100 ? 1: zoom_ > 200 ? 2: zoom_ / 100),
c = (V - 1) * 0.5,
E = 0.4,
p = "";
if (l > y) {
R = (l - y) * A;
N = 1 - (k / l);
I = (N * -0.5) + (A * N);
N = A;
l = y;
} else {
if (y > l) {
Q = (y - l) * A;
x = 1 - (k / y);
o = (x * -0.5) + (A * x);
x = A;
y = l;
}
}
var M = 0.85,
D = Math.round(k * M),
K = D,
O = K / 2,
H = (k - D) / 2,
J = (alpha_ === 0 ? 0: alpha_ / 100);
var z = (schaduw_ === 0 ? 0: schaduw_ / 100),
B = (glans_ === 0 ? 0: glans_ / 100),
w = n(isNaN(g) ? g: (isNaN(h) ? h: "#000000"), 1 - J);
if (document.all && document.namespaces && !window.opera) {
var s,
b,
m,
v,
P,
t,
q,
u = "";
w = n(isNaN(g) ? g: (isNaN(h) ? h: "#000000"), 0.3, true);
if (i.tagName.toUpperCase() == "VAR") {
s = '<v:group style="zoom:1;display:' + i.dpl + ";margin:0;padding:0;position:relative;width:" + k + "px;height:" + k + 'px;" coordsize="' + k + "," + k + '"><v:rect strokeweight="0" filled="f" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:' + k + "px;height:" + k + 'px;"></v:rect>';
b = "</v:group>";
if (isNaN(h)) {
u = '<v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:fill color2="' + h + '" color="' + (isNaN(g) ? g: h) + '" type="gradient" method="sigma" angle="20" focus="0" focussize="0,0" focusposition="1,1" on="t" /></v:oval>';
}
P = '<v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:fill opacity="0" color="black" color2="black" o:opacity2="' + (z * 0.5) + '" type="gradient" method="any" angle="0" focus="0" focussize="0.2,0.2" focusposition="0.4,0.4" on="t" /></v:oval><v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:fill opacity="' + (z * 0.5) + '" color="black" color2="black" o:opacity2="0" type="gradientradial" method="linear" focus="0" focussize="0.75,0.75" focusposition="0.125,0.125" on="t" /></v:oval>';
t = '<v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:fill opacity="0" color="white" color2="white" o:opacity2="' + (B * 0.66) + '" type="gradientradial" method="sigma" focus="0" focussize="0,0" focusposition="0.8,0.8" on="t" /></v:oval><v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:' + (k * 0.48) + "px;left:" + (k * 0.51) + "px;width:" + (k * 0.3125) + "px;height:" + (k * 0.3125) + 'px;"><v:fill opacity="0" color="white" color2="white" o:opacity2="' + B + '" type="gradientradial" method="sigma" focus="0" focussize="0,0" focusposition="0.5,0.5" on="t" /></v:oval><v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:' + (k * 0.04) + "px;left:" + (k * 0.24) + "px;width:" + (k * 0.52) + "px;height:" + (k * 0.36) + 'px;"><v:fill opacity="0" color="white" color2="white" o:opacity2="' + B + '" type="gradient" method="any" angle="20" focus="0" focussize="0.2,0.2" focusposition="0.4,0.4" on="t" /></v:oval>';
v = '<v:oval filled="f" fillcolor="transparent" stroked="t" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:stroke weight="1" style="single" color="' + w + '" opacity="' + Math.max(0.5, J) + '" /></v:oval>';
m = '<v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:' + (k * 0.7) + "px;left:" + (k * 0.1) + "px;width:" + (k * 0.8) + "px;height:" + (k * 0.3) + 'px;"><v:fill opacity="' + z + '" color="' + (isNaN(g) ? g: isNaN(h) ? h: "black") + '" color2="black" colors="' + (10 - (J * 10)) + "% " + (isNaN(g) ? g: isNaN(h) ? h: "black") + '" o:opacity2="0" type="gradientradial" method="linear" focus="0" focussize="0,0" focusposition="0.5,0.5" on="t" /></v:oval>';
q = '<v:oval filled="t" stroked="f" strokeweight="0" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:1px;left:' + H + "px;width:" + D + "px;height:" + K + 'px;"><v:fill opacity="' + J + '" src="' + i.afbeelding_bron + '" type="frame" aspect="atleast" de_afmeting="' + V + "," + V + '" origin="' + I + "," + o + '" position="0,0" /></v:oval>';
i.innerHTML = s + m + u + q + P + t + v + b;
}
} else {
if (i.tagName.toUpperCase() == "CANVAS" && i.getContext("2d")) {
var X = i.getContext("2d"),
f = (X.getImageData ? true: false),
a = false;
var j = new Image();
j.onload = function() {
X.clearRect(0, 0, k, k);
X.save();
X.translate(0, k * 0.64);
X.scale(1, 0.425);
p = X.createRadialGradient(H + O, O, 1, H + O, O, O);
p.addColorStop(0, "rgba(0,0,0," + z + ")");
p.addColorStop(0.8, "rgba(" + w + "," + (z * 0.125) + ")");
p.addColorStop(1, "rgba(" + w + ",0)");
X.fillStyle = p;
if (i.iswebkit && !i.issvier) {
X.fill();
} else {
X.fillRect(0, 0, k, k);
}
X.restore();
X.save();
X.beginPath();
X.arc(H + O, O + E, O, 0, (Math.PI / 180) * 360, true);
X.closePath();
X.clip();
X.clearRect(0, 0, k, k);
if (isNaN(h)) {
if (isNaN(g)) {
p = X.createLinearGradient(O, 0, O + (3 * H), K);
p.addColorStop(0, h);
p.addColorStop(1, g);
X.fillStyle = p;
if (i.iswebkit) {
X.fill();
} else {
X.fillRect(H, 0, D, K);
}
} else {
X.fillStyle = h;
X.fillRect(H, 0, D, K);
}
}
X.globalAlpha = J;
if (a) {
X.drawImage(afbeelding_bron, 2, 2, D, K, H, 0, D, K);
} else {
X.drawImage(j, R + (l * (c * N)), Q + (y * (c * x)), l * (1 - c), y * (1 - c), H, 0, D, K);
}
X.globalAlpha = 1;
p = X.createLinearGradient(O, 0, O + (3 * H), K);
p.addColorStop(0, "rgba(0,0,0," + (z * 0.5) + ")");
p.addColorStop(1, "rgba(0,0,0,0)");
X.fillStyle = p;
if (i.iswebkit) {
X.fill();
} else {
X.fillRect(0, 0, k, k);
}
p = X.createRadialGradient(H + O, O, O - (1.5 * H), H + O, O, O);
p.addColorStop(0, "rgba(0,0,0,0)");
p.addColorStop(1, "rgba(0,0,0," + (z * 0.5) + ")");
X.fillStyle = p;
if (i.iswebkit) {
X.fill();
} else {
X.fillRect(0, 0, k, k);
}
p = X.createRadialGradient((3 * H) + O, (3.5 * H) + O, H * 0.5, (2.5 * H) + O, (3 * H) + O, O - H);
p.addColorStop(0, "rgba(255,255,255," + B + ")");
p.addColorStop(0.25, "rgba(255,255,255," + (B * 0.666666) + ")");
p.addColorStop(1, "rgba(255,255,255,0)");
X.fillStyle = p;
if (i.iswebkit) {
X.fill();
} else {
X.fillRect(0, 0, k, k);
}
X.restore();
X.save();
p = X.createLinearGradient((D / 2) - H, H * 0.5, (D / 2) + H, (H * 0.5) + O);
p.addColorStop(0, "rgba(255,255,255," + B + ")");
p.addColorStop(1, "rgba(255,255,255,0)");
U(X, H + (O / 2.5), H * 0.5, H + (O / 2.5) + (O * 1.2), (H * 0.5) + (O * 0.9));
X.fillStyle = p;
X.fill();
X.restore();
X.save();
X.beginPath();
X.arc(H + O, O + E, O, 0, (Math.PI / 180) * 360, true);
X.closePath();
X.strokeStyle = "rgba(" + w + "," + J + ")";
X.lineWidth = E;
X.stroke();
X.restore();
};
j.src = i.afbeelding_bron;
}
}
} catch(W) {}
}
};
function haal_de_plaatjes(e) {
var b = document.getElementsByTagName("img");
var f = [];
var c = 0;
var glans_;
var g;
var a = 0;
for (c = 0; c < b.length; c++) {
glans_ = b[c];
g = glans_.className.split(" ");
for (a = 0; a < g.length; a++) {
if (g[a] == e) {
f.push(glans_);
break;
}
}
}
return f;
}
function maak_3d_image() {
var a = document.createElement("canvas");
if (a.getContext || (document.all && document.namespaces && !window.opera)) {
if (typeof kompoos_3d != "undefined") {
var e,
l = "",
j,
m,
k,
g,
f,
h,
glans_,
b,
c = haal_de_plaatjes("image_3d");
for (e = 0; e < c.length; e++) {
if (c[e].width >= 40 || c[e].height >= 40) {
j = 0;
m = 50;
k = 100;
g = 100;
f = 100;
h = 100;
b = 0;
glans_ = 0;
l = c[e].className.split(" ");
kompoos_3d.add(c[e], {
de_afmeting: j,
zoom: k,
alpha: g,
shade: f,
shine: h,
color: glans_,
color2: b,
show: true
});
}
}
}
}
}
window.onload = function() {
maak_3d_image();
};
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.