horizontal - sliden (swipe effekt)

T

tobm_knows_best

Erfahrenes Mitglied
Hallo zusammen,

ich suche die absolut einfachste Lösung bei der Auswahl von div. Menüpunkten, in einer normalen Navigation, den darunterliegenden Inhalt in DIVs, hin und her "sliden" zu lassen. Animationstechnisch sollte das natürlich aussehen wie eine Art Swipe-Effekt, wie man Ihn von div. Tablett-PCs & Smartphones kennt...

Es gibt ja 1000e von Tuts, aber für mein Vorhaben sind die alle recht aufgeblasen und ziemlich überdimensioniert. Kennt jemand eine wirklich simple, brauchbare Lösung? jQuery oder ähnliches? Anscheinend geht´s auch via CSS3...

Wenn jemand einen Vorschlag hat, (ausser dem Rat ich solle googlen....) dann nehme ich dankbar an :)

MFG
Tobm
 
Vielen Dank für den Link... Ich habe mir jetzt erst mal ein paar Zeilen rausfrickeln können, und bin zu folgendem Aufbau gekommen:

HTML: 
<!DOCTYPE html>
<html>
<head>
  <style>
.block1 {
  position: absolute;
  left: 0px;
  background-color:#abc;
  width:300px;
  height:200px;
  margin:5px;
  }
.block2 {
 position: absolute;
  left: 320px;
  background-color:#abc;
  width:300px;
  height:200px;
  margin:5px;
  }
.block3 {
 position: absolute;
  left: 640px;
  background-color:#abc;
  width:300px;
  height:200px;
  margin:5px;
  }
.block4 {
 position: absolute;
  left: 960px;
  background-color:#abc;
  width:300px;
  height:200px;
  margin:5px;
  }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="button1">Button 1</button> <button id="button2">Button 2</button> <button id="button3">Button 3</button> <button id="button4">Button 4</button><br/>
  <hr>
<div class="block1">Screen 1</div>
<div class="block2">Screen 2</div>
<div class="block3">Screen 3</div>
<div class="block4">Screen 4</div>

<script>
$("#button1").click(function(){
  $(".block1").animate({"left": "+=300px"}, "slow");
});

$("#button2").click(function(){
  $(".block2").animate({"left": "+=300px"}, "slow");
});

$("#button3").click(function(){
  $(".block3").animate({"left": "+=300px"}, "slow");
});

$("#button4").click(function(){
  $(".block4").animate({"left": "+=300px"}, "slow");
});

</script>

</body>
</html>

Jetzt sollte aber möglichst folgender Effekt erzielt werden - und ich bin mir nicht sicher, ob ich das mit den hier geschriebenem Code überhaupt realisieren kann:

Beim Klick auf Button 1 soll Screen 1 so bleiben wie er ist - beim Klick auf Butto 2 soll Screen 2 erscheinen (ich vermute ich muss irgendwie einbauen, dass alle "Screens" dann nach links switchen müssen), und so weiter... leider ist nämlich kein ende in Sicht, wenn ich 10x den Button 4 drücke - die Screens fahren dann einfach in´s unendliche... :/

Ist sowas hier machbar? Oder is der Code für die Katz...?

Merci nochmal!
 
Das geht super in die richtige Richtung - gibt´s ne möglichkeit den Effekt entsprechend so wie vorher zu übernehmen und dann die Funktion des Reset Buttons beim Anklicken eines Anderen mit zu übernehmen?

ich will jetzt nicht zuviel verlangen :(

die kleinen divs sollten nur immer einen bildschirm "simulieren" - versteht man das überhaupt wie ich meine?...?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück