Dit voorbeeld is bedoeld als opzet voor het maken van diverse effecten voor plaatjes. Je kan dit effect klakkeloos overnemen en gebruiken op jouw website, maar het idee is om de code dusdanig te bewerken dat je jouw eigen effecten uit kan voeren. Ik raad jou aan om de code goed te bestuderen en kijken hoe alles in elkaar steekt. De code zoals bij dit voorbeeld gebruikt, valideert volgens de strenge JSLint-norm. Als je jouw eigen procedure gemaakt hebt, raad ik jou aan om te controleren of de code nog steeds foutloos is (door hem door de JSLint-validator "te halen").
<div id="container">
<div id="positie_slider">
<a href="/javascripts/image-effects/image-slide.html">
<img src="http://static.dns5.nl/image-slide.gif" height="110" width="200" alt="slide en bounce" id="slider" ></a>
</div>
</div>
<style type="text/css">
#container{
position:relative;
width:200px;
height:110px;
left:-500px;
background-color:transparent}
#positie_slider{
position:absolute;
height:210px;
background-color:transparent;
overflow:hidden}
img#slider{
border:0;
position:relative}
</style>
<script>
/*global window: false */
/*global alert: false */
function bounce_slider() {
window.animation = this;
this.slide_array = [];
this.timer = null;
this.timeout = 18;
this.time = 0;
}
var animatie_object = new bounce_slider();
function slide_proc(de_bounce_slide, slide_element, animatie_fx, beweeg_fx, start_i, hoe_lang_duurt_i, object_parameters, de_call_back) {
this.parent = de_bounce_slide;
this.timer = null;
this.element = typeof(slide_element) == "string" ? document.getElementById(slide_element) : slide_element;
this.animation = animatie_fx;
this.movement = beweeg_fx;
this.start = start_i + this.parent.time;
this.duration = hoe_lang_duurt_i < this.parent.timeout ? this.parent.timeout: hoe_lang_duurt_i;
this.parameters = object_parameters;
this.callback = de_call_back;
this.frame = 0;
this.maxframe = Math.round(this.duration / this.parent.timeout);
this.cache = {};
}
slide_proc.prototype.nextFrame = function(iTime) {
if (iTime > this.start) {
if (this.frame++<this.maxframe) {
this.animation(this.movement, this.frame, this.maxframe, this.element, this.parameters);
} else {
this.parent.remove(this);
if (this.callback) {
this.callback();
}
}
}
};
bounce_slider.prototype.add = function(slide_element, animatie_fx, beweeg_fx, start_i, hoe_lang_duurt_i, object_parameters, de_call_back) {
this.slide_array[this.slide_array.length] = new slide_proc(this, slide_element, animatie_fx, beweeg_fx, start_i, hoe_lang_duurt_i, object_parameters, de_call_back);
};
bounce_slider.prototype.remove = function(haalhetelementweg) {
for (var i = 0; i < this.slide_array.length; i++) {
if (this.slide_array[i] == haalhetelementweg) {
this.slide_array.splice(i, 1);
}
}
};
bounce_slider.prototype.start = function() {
if (!this.timer) {
this.timer = setInterval(function() {
window.animation.nextFrame();
},
this.timeout);
}
};
bounce_slider.prototype.reset = function() {
clearTimeout(this.timer);
this.timer = null;
this.time = 0;
this.slide_array = [];
};
bounce_slider.prototype.nextFrame = function() {
this.time += this.timeout;
if (this.slide_array.length > 0) {
for (var i = 0; i < this.slide_array.length; i++) {
this.slide_array[i].nextFrame(this.time);
}
} else {
this.stop();
}
};
bounce_slider.prototype.resize = function(beweeg_fx, iFrame, iMaxframe, oElement, object_parameters) {
if (iFrame == 1) {
this.cache.width = typeof(object_parameters.startwidth) == "number" ? object_parameters.startwidth: oElement.offsetWidth;
this.cache.height = typeof(object_parameters.startheight) == "number" ? object_parameters.startheight: oElement.offsetHeight;
}
if (typeof(object_parameters.width) == "number" && this.cache.width != object_parameters.width) {
oElement.style.width = beweeg_fx(iFrame, iMaxframe, this.cache.width, object_parameters.width) + "px";
}
if (typeof(object_parameters.height) == "number" && this.cache.height != object_parameters.height) {
oElement.style.height = beweeg_fx(iFrame, iMaxframe, this.cache.height, object_parameters.height) + "px";
}
};
bounce_slider.prototype.move = function(beweeg_fx, iFrame, iMaxframe, oElement, object_parameters) {
if (iFrame == 1) {
this.cache.left = typeof(object_parameters.startleft) == "number" ? object_parameters.startleft: oElement.offsetLeft;
this.cache.top = typeof(object_parameters.starttop) == "number" ? object_parameters.starttop: oElement.offsetTop;
}
if (typeof(object_parameters.left) == "number" && this.cache.left != object_parameters.left) {
oElement.style.left = beweeg_fx(iFrame, iMaxframe, this.cache.left, object_parameters.left) + "px";
}
if (typeof(object_parameters.top) == "number" && this.cache.top != object_parameters.top) {
oElement.style.top = beweeg_fx(iFrame, iMaxframe, this.cache.top, object_parameters.top) + "px";
}
};
bounce_slider.prototype.versnelling = function(iFrame, iMaxframe, start_i, iResult) {
return start_i + (iResult - start_i) * Math.pow(iFrame / iMaxframe, 2);
};
bounce_slider.prototype.jump = function(iFrame, iMaxframe, start_i, iResult) {
return start_i + Math.sin((iFrame / iMaxframe) * Math.PI) * (iResult - start_i);
};
bounce_slider.prototype.elastisch = function(iFrame, iMaxframe, start_i, iResult) {
if (iFrame < iMaxframe * 0.6) {
return window.animation.versnelling(iFrame, iMaxframe * 0.6, start_i, iResult);
} else if (start_i < iResult) {
return window.animation.jump(iFrame - iMaxframe * 0.6, iMaxframe * 2.4, iResult, iResult - 70);
} else {
return window.animation.jump(iFrame - iMaxframe * 0.6, iMaxframe * 0.9, iResult, iResult + 40);
}
};
function stuiter_slide() {
animatie_object.add("slider", animatie_object.move, animatie_object.jump, 0, 2000, {
top: 0
});
animatie_object.add("slider", animatie_object.resize, animatie_object.versnelling, 0, 250, {
height: 110
});
animatie_object.add("slider", animatie_object.resize, animatie_object.versnelling, 1750, 250, {
height: 95
},
stuiter_slide);
}
window.onload = function() {
animatie_object.start();
animatie_object.add("container", animatie_object.move, animatie_object.elastisch, 0, 2000, {
left: document.body.offsetWidth / 3
});
animatie_object.add("slider", animatie_object.move, animatie_object.versnelling, 2000, 1000, {
top: 110
});
animatie_object.add("slider", animatie_object.resize, animatie_object.versnelling, 2750, 100, {
height: 95
},
stuiter_slide);
};
</script>