Zwei Bilder überlagern mit Slider
Ich wollte eine Animation ala der Vorher-Hachher Flash-Anwendung vom Spiegel Online mit HTML5 erstellen. Während dem Programmieren ist mir die Idee gekommen das ganze auch mit CSS zu machen.
CSS
Als erstes zeige ich einmal die CSS Version her. Sie hat den Nachteil, dass die Größe jedes mal eingestellt werden muss.
Zuerst definieren wir die Bilder im HTML-Code:
<div style="position:relative;left:50px;height:400px;">
<div id="img1" style="width:600px;height:375px;background-image:url('data/tutorials/webdev/overslider/images/light.jpg');position:absolute;left:0px;"></div>
<div id="img2" style="width:600px;height:375px;background-image:url('data/tutorials/webdev/overslider/images/dark.jpg');position:absolute;left:0px;"></div>
<img src="data/tutorials/webdev/overslider/images/border.png" width="10" height="375" style="position:absolute;top:" id="border" />
</div>
Danach geht es weiter mit dem JavaScript Code:
//Hole alle Bilder
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var border = document.getElementById('border');
//Wenn die Maus über dem Bild ist, dann geht's los.
img1.onmousemove = redraw;
img2.onmousemove = redraw;
border.onmousemove = redraw;
function redraw(e){
posx = e.pageX - findPosX(img1);
//Wenn alles passt, kanns losgehen
if (posx!=null&&posx>0&&posx<600){
//Breite des 1ten Bildes anpassen
img1.style.width=posx+"px";
//2te Bild anpassen
img2.style.backgroundPosition=(-posx)+"px";
img2.style.left=posx+"px";
img2.style.width=(600-posx)+"px";
//Und das Trenn-Gradient positionieren
border.style.left=(posx-5)+"px";
}
}
//Um die Tatsächliche Position des Bildes zu finden, müssen wir etwas tricksen.
//Die Methode habe ich mit Anregung von http://www.malleus.de/FAQ/getImgMousePos.html gebastelt.
function findPosX(obj){
var curleft = 0;
if(obj.offsetParent)
while(1){
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
HTML5 - Canvas
Die 2te Möglichkeit ist mit HTML5. Leider funktioniert das ganze erst, nachdem man einmal mit der Maus über das Canvas gefahren ist. Datür aber mit nur einer Größenangabe im Canvas
Zuerst wieder HTML-Code:
<canvas id="canvas" width="600" height="375" />
Gefolgt von JavaScript Code:
//Initialisieren von den Bildern
var img1_canvas = new Image();
img1_canvas.src = "data/tutorials/webdev/overslider/images/light.jpg";
var img2_canvas = new Image();
img2_canvas.src = "data/tutorials/webdev/overslider/images/dark.jpg";
//Holen des Canvas Contexts (Wir brauchen später noch das canvas-Element, deshalb schreiben wir es in die Variable)
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Wenn die Maus über dem Bild ist, dann geht's los.
canvas.onmousemove = redraw_canvas;
function redraw_canvas(e){
//Holen der Mausposition
posx = e.pageX - findPosX(img1);
//Wenn alles passt, kanns losgehen
if (posx!=null&&posx>0&&posx<canvas.width){
//Wir malen 2 Bildausschnitte auf den Context. Das eine Bild von links bis zum Cursor, das andere von rechts.
ctx.drawImage(img1_canvas, 0, 0, posx, canvas.height, 0, 0, posx, canvas.height);
ctx.drawImage(img2_canvas, posx, 0, canvas.width-posx, canvas.height, posx, 0, canvas.width-posx, canvas.height);
//Jetzt generieren wir noch ein schönes Grandient, um eine Trennung zwischen den Bildern zu erstellen
var grad = ctx.createLinearGradient(posx-10,0,posx+10,0);
grad.addColorStop(0, 'rgba(255,255,0,0)');
grad.addColorStop(.4, 'rgba(255,255,0,0.2)');
grad.addColorStop(.5, 'rgba(255,255,0,1)');
grad.addColorStop(.6, 'rgba(255,255,0,0.2)');
grad.addColorStop(1, 'rgba(255,255,0,0)');
ctx.fillStyle = grad;
ctx.fillRect(posx-10,0,20,canvas.height);
}
}
//Um die Tatsächliche Position des Bildes zu finden, müssen wir etwas tricksen.
//Die Methode habe ich mit Anregung von http://www.malleus.de/FAQ/getImgMousePos.html gebastelt.
function findPosX(obj){
var curleft = 0;
if(obj.offsetParent)
while(1){
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;