Deze page curl is geheel zonder flash. Een paar plaatjes en een stukje javascript zijn het enige wat nodig is om het pagepeel effect op het scherm te zetten. En natuurlijk zijn er een paar regels html en een "body-onload" nodig om het script in werking te stellen. Eerst de body-tag. Vervang <body> door <body onload="start_page_curl();">. Het stukje html ziet er als volgt uit:
<div class="page_peel" onmouseout="curl_peel('80','80','page_curl_id','uit')" onmouseover="curl_peel('80','80','page_curl_id','in')">
<a href="/javascripts/image-effects/page-curl.html">
<img id="page_curl_id" alt="pagepeel" width="80" height="80" src="pagepeel.png" />
</a>
<div id='wave_curl'></div>
</div>
Het hieronder-staande javascript moet je zo laag als mogelijk in de body-sectie van jouw pagina zetten. In het script kan je alle parameters naar eigen smaak aanpassen. Het enige wat extra aandacht nodig heeft, is de manier waarop je het plaatje (wat bij de variabele verborgen_plaatje is vermeld) gaat maken. Het moet een transparante gif of png zijn, en je moet er voor zorgen dat de inhoud (het plaatje zelf) niet over de "rand" van de curl gaat komen. Kijk even naar de voorbeeld-afbeelding wat op deze pagina is gebruikt. De plaatjes zitten achter de volgende links. Kopieer ze even naar jouw webruimte om de page-curl procedure te kunnen testen.
pagepeel_afbeelding.png | pagepeel.png | pagepeel.gif
<script>
/*global window: false */
var verborgen_plaatje = "pagepeel_afbeelding.png";
var is_ie = document.all ? true: false,
klein_curl_plaatje = '';
var de_css_code = "#wave_curl{position:absolute;top:-20px;right:-20px;border:0}#page_curl_id{border:0}.page_peel{position:absolute;top:0px;right:0px;background:url('" + verborgen_plaatje + "') no-repeat bottom left;}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
if (is_ie) {
klein_curl_plaatje = '<img src="pagepeel.gif" alt="curl" width="115" height="105">';
}
var de_peel_snelheid = 40;
var aantal_graden_curl = null,
doen,
m11 = 1,
m12 = 0.005,
m21 = 0.005,
m22 = 1,
plaatje,
curl_check;
var page_peel_richting = 1;
function beweeg_de_curl() {
if (page_peel_richting == 1) {
aantal_graden_curl++;
}
if (page_peel_richting === 0) {
aantal_graden_curl--;
}
if (aantal_graden_curl == 35) {
page_peel_richting = 0;
}
if (aantal_graden_curl === 0) {
page_peel_richting = 1;
}
if (page_peel_richting == 1) {
m11 = 1;
m12 = m12 + 0.003;
m21 = m21 + 0.003;
m22 = 1;
}
if (page_peel_richting === 0) {
m11 = 1;
m12 = m12 - 0.003;
m21 = m21 - 0.003;
m22 = 1;
}
plaatje.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",sizingMethod='auto expand');";
document.getElementById('page_curl_id').style.MozTransform = 'skew(' + aantal_graden_curl / 5 + 'deg,' + aantal_graden_curl / 5 + 'deg) ';
document.getElementById('page_curl_id').style.webkitTransform = 'skew(' + aantal_graden_curl / 5 + 'deg,' + aantal_graden_curl / 5 + 'deg) ';
document.getElementById('page_curl_id').style.OTransform = 'skew(' + aantal_graden_curl / 5 + 'deg,' + aantal_graden_curl / 5 + 'deg) ';
doen = setTimeout(function() {
beweeg_de_curl();
},
de_peel_snelheid);
}
function start_page_curl() {
if (document.getElementById) {
plaatje = document.getElementById("wave_curl");
plaatje.innerHTML = klein_curl_plaatje;
beweeg_de_curl();
}
}
var peelsnelheid = 3,
start_peel_bij = 80,
stop_peel_bij = 400,
welk_curl_id,
aantal_pixels_curl_move,
begin_curl_effect;
function voer_page_peel_uit() {
welk_curl_id.style.width = parseInt(welk_curl_id.style.width, 10) + (peelsnelheid * aantal_pixels_curl_move) + 'px';
welk_curl_id.style.height = parseInt(welk_curl_id.style.height, 10) + (peelsnelheid * aantal_pixels_curl_move) + 'px';
if (parseInt(welk_curl_id.style.width, 10) > stop_peel_bij) {
if (window.begin_curl_effect) {
clearInterval(begin_curl_effect);
}
welk_curl_id.style.width = stop_peel_bij + 'px';
welk_curl_id.style.height = stop_peel_bij + 'px';
}
if (parseInt(welk_curl_id.style.width, 10) < start_peel_bij) {
if (window.begin_curl_effect) {
plaatje.style.visibility = "visible";
clearInterval(begin_curl_effect);
}
welk_curl_id.style.width = start_peel_bij + 'px';
welk_curl_id.style.height = start_peel_bij + 'px';
}
}
function curl_peel(de_breedte, de_hoogte, het_curl_id, page_curl_bezig_met) {
if (page_curl_bezig_met == 'in') {
plaatje.style.visibility = "hidden";
}
if (window.begin_curl_effect) {
clearInterval(begin_curl_effect);
}
if (!document.all && !document.getElementById) {
return;
}
welk_curl_id = document.images[het_curl_id];
aantal_pixels_curl_move = (page_curl_bezig_met == "in") ? 2: -4;
if (welk_curl_id.style.width === '') {
welk_curl_id.style.width = de_breedte + 'px';
welk_curl_id.style.height = de_hoogte + 'px';
}
begin_curl_effect = setInterval(function() {
voer_page_peel_uit();
},
1);
}
</script>