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;


Kommentare

  1. Marko Ross21.12.2011 10:54

    Super Tool. Echt Klasse. Würde ich auch gerne in meine Seite einbauen. Ich bekomme es aber leider nicht hin. Schade.

  2. Marko Ross21.12.2011 11:47

    Hallo Ich bins nochmal. Ich habe eigentliche alles gemacht wie im Tutorial beschrieben. Aber es klappt bei mir gar nicht. Ich sehe nichts als eine weisse leere Fläche. Was mach ich nur falsch? Es ist echt ein geiles Tool und ich würde es gerne einsetzen. www.marko-ross.de/Slider/Slider_4.html ich bekomme im Firefox 8.0.1 die Meldung Fehler: Img1_canvas is not defined

  3. Beat Rüdt21.05.2014 14:48

    Ich habe mir elaubt, das Script für ein Tool zu verwenden, mit dem die Bilder und die Bildgrösse auf die gewünschten Bedürfnisse angepasst werden können: http://www.content-provider.ch/overslider.php