Javascript Animation an bestimmter Stelle anhalten bzw. zu bestimmter Stelle "scrollen"

Torsten · 2. Februar 2016, 16:29

Moin Kollegen,

ich hab mal wieder ein Problem und wende mich hilfesuchend an euch.

Für einen Kollegen baue ich ein "Spin and Win" System. Dabei bin ich bei meiner Recherche auf folgenden Stackoverflow Eintrag (Gute Seite) gestoßen. stackoverflow.com/questions/12…in-an-element-with-jquery
Im Grunde ist es das was ich brauche. Naja nicht ganz denn ich brauche eine kleine Modifikation.

Im Grunde sieht mein Spin and Win so aus.

Klick auf Button. Animation startet. Ajax Call. Und nun soll das die Animation angehalten werden wenn ein bestimmtes Div im Bild ist.

function scroll(){
$('.scroller').scrollLeft(0);
$('.scroller').stop().animate({scrollLeft:310},500,'linear',scroll);
}

Ich habe hier die Version mit einem Divs nicht mit Images!

Ich hab es so versucht

function ScrollToDiv(div){
switch(div){
case 1:
var posi = $('.won-3').width()+5;
break;
case 2:
var posi = $('.won-1').width()+5;
break;
case 3:
var posi = $('.won-2').width()+5;
break;
}
$('.scroller').stop();
$('.scroller').animate({
scrollLeft: posi
}, 700, function(){
});

}

Ist logischerweise falsch.

Aktuell ist es so das es mal bei Div zwei hält obwohl es bei Div eins halten soll.

Wichtig!

$('.scroller').each(function(){
$(this).find('div').clone().appendTo($(this));
});

Ich denke das hat damit zutun.

Also falls jemand da es drauf hat.

Ich hätte es gerne so das die Animation startet und dann langsamer wird und bei einem bestimmten Div hält. Jemand ne Idee?

Also am liebsten hätte ich es so wie hier drüber steht. Muss aber nicht 100% so sein. Also am besten wäre es man gibt einer Funktion einfach scrollToDiv(3) und es scrollt langsam bis zum anfang von Div 3

lg

Vincent Petritz · 2. Februar 2016, 19:28

Könntest du deine Problematik noch etwas mehr beschreiben? Ich kann mir leider nur durch den Code zu wenig darunter vorstellen.

Torsten · 2. Februar 2016, 20:51

Was musst du wissen?

Ich scrolle durch ein Div. Ich muss jetzt an einer bestimmten Stelle anhalten.

<div class="scroller">
<div class="won-1"></div> // hier möchte ich anhalten
<div class="won-2"></div> // oder hier
<div class="won-3"></div> // oder auch hier
</div>

Es sieht um den Dreh so aus

[Blockierte Grafik: http://i.imgur.com/ATzSv.gif]

Ich muss jetzt wie gesagt an einer bestimmten Stelle anhalten. Was ich leider aber noch nicht geschafft habe. Es geht praktisch darum dem Benutzer anzuzeigen ob er 1 x 2 x oder 3x gewonnen hat.

Amali · 16. März 2016, 18:02

Hallöchen,

Mit nem Ajaxcall hat die Aufgabe nichts zu tun.

Ich finde die Aufgabe sehr interessant und habe mir den stackoverfl-art. mal durchgelesen.
Da gab es ja auch keine Lösung für diesen Lösungsweg.

Klingt aber alles einfach nur kompliziert. Ist es aber nicht.

Ich kann den Vorschlag machen, dich von einem 3D-Carousel inspirieren lassen. Dein Anliegen sollte damit sehr leicht umzusetzen sein.
Zudem sieht die Stackoverflow-Lösung optisch sehr altmodisch (Pre-Millenium[80er-90er-Jahre-mäßig]) aus.

Man könnte auch einfach den Scroll-Effekt komplett weglassen und ne Lösung nehmen, die binnen weniger Minuten implementiert ist. beispielsweise indem man einfach 3 Bilder hintereinander an selber stelle ein- und "ausfadet" und eben das entsprechende letze Bild letzten endes einfach stehen bleibt.

Ansonsten kann man ja auch ein div mit schwarzem hintergrund erstellen und darin 3bilder abwechselnd von rechts nach links animieren lassen.
ist auch super einfach umzusetzen.. wenn man dann auf das entsprechende bild hovered dann bleibt es halt an stelle x stehen.

Die super schöne Lösung die gibt es ja schon, müsste aber noch umgeändert werden:
codepen.io/johnblazek/ der hat im showroom ein erstklassiges 3d-carousel

Teilen