Bild soll durch Mausbewegung scrollen

Soulhuntress · 08.07.2009

Hallo zusammen,
ich habe mittlerweile Google auf den Kopf gestellt, sämtliche Foren durchsucht und habe einfach nichts gefunden, was mir helfen könnte.
Was ich machen möchte ist folgendes: in einem Teil einer Homepage an der ich momentan bastel, soll sich ein Panoramabild befinden, das je nach Mausposition nach links und nach rechts scrollt, sich aber ansonsten nicht selber bewegt. Super wäre es, wenn es sich dabei um ein Hintergrundbild handeln könnte, da ich darauf unbewegliche Objekte aufbringen möchte.
(sowas in der Art wie hier. Der Hintergrund bewegt sich, aber das Logo und die Wolken im Vordergrund bleiben brav an ihren Plätzen.)
Ich bin mir um ehrlich zu sein auch nicht sicher, welche Scriptsprache ich hier verwenden kann. Javascript oder vielleicht doch lieber Flash mit Actionscript? (Sollte ich für diese Frage im falschen Forum gelandet sein, bitte verschieben!)
Ich bin für jede Hilfe dankbar! :ciao:

Frank S. Fischer · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Hey!
ich bin da nicht drin in dem thema aber ich hab was gefunden, was dir vllt helfen könnte...

gruß

RZS

Soulhuntress · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Hallo Reckordzeitstudio und danke für die schnelle Antwort. Das ist ein sehr cooler Effekt, aber leider nicht ganz das, was ich suche.

MysticMagican · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Interessanter Effekt....

Aber wenn Du schon die Seite verlinkst, warum holst Du Dir den entsprechenden Code nicht von dort? Einfach den Quelltext anzeigen.
Auf Grund der Dateinamen würde ich mal vermuten, diese Datei(en) ist(sind) für diesen Slide-Effekt verantwortlich:
http://www.kostenlose-javascripts.de/templates/ksjs2009/css/rokslidestrip.css
http://www.kostenlose-javascripts.de/templates/ksjs2009/js/rokslidestrip.js
Da ich jedoch mit JavaScript und Konsorten auf Kriegsfuß stehe und mich an gutes altes HTML halte, kann ich nicht sagen, ob das auch wirklich die Datei ist.

Soulhuntress · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Der Effekt von der Homepage stammt von einem (teueren) Forenstyle von RocketTheme mit einem sogenannten Parallax-Effekt, wie ich eben festgestellt habe ().
Ob der Code daher so leicht zu übernehmen ist, bezweifle ich doch etwas.
Immerhin haben wir da nun anscheinend den fachbegriff für diese Art des Scrollens gefunden: Parallax. Mal sehen, ob ich dazu mehr herausfinden kann...

Edit: Ich habe hier zwei nette Tutorials für den Parallax-Effekt in Flash gefunden.
Lernvideo:
Parallax-Gallery: Parallax Gallery
Zweiteres ist schon sehr hilfreich. Was ich aber noch wissen müsste: wie genau bekommt man es hin, dass sich das Bild bewegt, wenn die Maus nicht direkt darauf zeigt, sondern sich irgendwo anders im Browserfenster aufhält?
(Vielleicht sollte das Thema an dieser Stelle wirklich in den Flashbereich verschoben werden

)

sokie · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

die Beiden Beispiele sind in Actionscript also Flash.
in Flash sind solche Dinge nur in dem Bereich möglich, über den sich dein Flash Objekt erstreckt.
Für eine HTML Seite, die insgesamt Mauspositionssensibel sein soll, empfiehlt sich Javascript, wie in #4 vorgeschlagen.

MysticMagican · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Klugscheiß-Modus:

Wikipedia schrieb:
Als Parallaxe (gr. παραλλαγή parallagé „Veränderung“, „Abweichung“) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.

Und einen direkten Beitrag zu der Problematik gibt es auch. Zumindest die grundsätzliche Umsetzung scheint dort erklärt zu werden. Leider auf Englisch.
Parallax scrolling - Wikipedia, the free encyclopedia

Ich finde, das sollte hier bleiben das Thema, denn der Link in Deinem Eingangsposting zeigt meiner Meinung nach, daß es auch mit JS umsetzbar ist.

Soulhuntress · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Es gibt tatsächlich auch einige Beispiele mit JS.
Hier ist ein kleiner "Schaukasten" mit mehreren Beispielen: http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/
In vielen der Beispielen muss man die Browsergröße verändern, um den Effekt sehen zu können.

sokie schrieb:
Für eine HTML Seite, die insgesamt Mauspositionssensibel sein soll, empfiehlt sich Javascript, wie in #4 vorgeschlagen.

Dann mach ich mich mal auf die Suche nach einem vernünftigen Code. Bei dem auf der betroffenen Page blicke ich um ehrlich zu sein nicht ganz durch :nee:

Edit: Und noch eine sehr schöne Page zu Parallax http://webdev.stephband.info/parallax.html

cebito · 08.07.2009

AW: Bild soll durch Mausbewegung scrollen

Das geht ziemlich einfach, da du es als Hintergrundbild brauchst, musst du eben den Div scrollen. Die roten Werte (Höhe bzw. Breite des Bildes) und natürlich den Pfad zum Hintergrundbild musst du natürlich anpassen. Ach ja, den onload (grün) nicht vergessen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

function handleMove (ev) {
  if (!ev) {
    ev = window.event;
  }
  var mausposition = ev.pageX ? ev.pageX : ev.clientX;
  document.getElementById('scrollbg').style.left = (-1 * (mausposition * ([COLOR=Red]3513[/COLOR] - window.innerWidth) / window.innerWidth)) + "px";
}

function Event_init () {
  if (document.addEventListener) {
    document.addEventListener("mousemove", handleMove, true);
  } else {
    if (NS4) {
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = handleMove;
    } else {
      document.body.onmousemove = handleMove;
    }
  }
}

</script>
</head>
<body style="margin:0; padding:0;" [COLOR=DarkGreen]onload="Event_init()"[/COLOR]>

<div style="position:relative; margin: 10px 0; height:[COLOR=Red]800px[/COLOR]; width:100%; overflow:hidden;">
  <div id="scrollbg" style="position:absolute; top:0; left:0; background-image:url(panoIII.jpg); height:[COLOR=Red]800px[/COLOR]; width:[COLOR=Red]3513px[/COLOR];"></div>
</div>

</body>
</html>

Soulhuntress · 09.07.2009

AW: Bild soll durch Mausbewegung scrollen

cebito schrieb:
Das geht ziemlich einfach, da du es als Hintergrundbild brauchst, musst du eben den Div scrollen. Die roten Werte (Höhe bzw. Breite des Bildes) und natürlich den Pfad zum Hintergrundbild musst du natürlich anpassen. Ach ja, den onload (grün) nicht vergessen.

Das ist ja genial! Vielen Dank, cebito! :lol:
Gibt es übrigens auch die Möglichkeit, so einen Effekt auf den Hintergrund einer Tabellenzelle anzuwenden? (Und ja, ich bin noch ein ziemlicher Code-Neuling ^^)