Superscrollorama + responsive design = fließt nicht korrekt - jquery, css, responsive-design

Verwenden von Superscrollorama zum Animieren von Pfeilen auf dieser bestimmten Site: http://itsuptous.org/new_site

Es ist auch ein ansprechendes Design. 960+, 768, 480 und 320. Verwenden von Medienabfragen zum Auslösen der verschiedenen Layouts. Wenn ich die Site in einer beliebigen Browsergröße lade, werden die Pfeile korrekt animiert. Wenn ich das Fenster erweitere oder minimiere, verschiebt es sich an die falsche Position. Sie sind sich nicht sicher, was hier vor sich geht. Hat jemand irgendwelche Gedanken?

Ich habe die Elemente absolut positioniert, um horizontale Bildlaufleisten zu verhindern.

jQuery Superscrollorama Code folgt:

    jQuery(document).ready(function() {
//ACTIVATE BUTTON FOR SMOOTH SCROLLING
jQuery("#scroll_button").scrollTo("#section_two_outer");

//MOVE ARROWS ON SCROLL
var controller = jQuery.superscrollorama();
//INDIVIDUAL ELEMENT TWEEN
controller.addTween(".apply_now_arrow_left", TweenMax.from(jQuery(".apply_now_arrow_left"), .5, {css:{left:"-2500px"}}));
controller.addTween(".apply_now_button", TweenMax.from(jQuery(".apply_now_button"), .5, {css:{opacity: 0}}));
controller.addTween(".apply_now_arrow_right", TweenMax.from(jQuery(".apply_now_arrow_right"), .5, {css:{left:"5000px"}}));

Antworten:

Dave,

Es sieht (für mich) nicht so aus, als ob Ihre Sitehat ein Problem mit Superscrollerama, es sieht so aus, als ob das Problem, das Sie sehen, auf die Änderung des Inline-CSS zurückzuführen ist, die es an Ihrem Seitenelement vornimmt. Wenn beispielsweise die Animation ausgelöst wird, wird nur das übrige CSS animiert "Attribut im Laufe der Zeit, aber wenn es fertig ist, bleibt das linke Attribut auf dem Element, das Ihr Layout zerstört, wenn die Größe des Fensters geändert wird.

Um dies zu beheben, würde ich vorschlagen, einfach eine jQuery zu verwendenRückruf nach Abschluss der Animation, um das Inline-CSS aus den Pfeilen zu entfernen, sodass Ihr Stylesheet anschließend die Position regelt, wenn Sie die Größe des Fensters ändern. Das Worst-Case-Szenario würde dann ein kaum wahrnehmbares Flimmern hervorrufen, wenn die Animation während einer Änderung der Größe des Ansichtsfensters stattfindet (was ich nicht einmal weiß, wie ich das bewerkstelligen soll).

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween("#fade",
TweenMax.from($("#fade"),.5,{
css:{opacity:0},
onComplete: function(){alert("test")}
}));

Also möchten Sie wahrscheinlich so etwas tun:

jQuery(document).ready(function() {
//ACTIVATE BUTTON FOR SMOOTH SCROLLING
jQuery("#scroll_button").scrollTo("#section_two_outer");

//MOVE ARROWS ON SCROLL
var controller = jQuery.superscrollorama();
//INDIVIDUAL ELEMENT TWEEN
controller.addTween(".apply_now_arrow_left", TweenMax.from(jQuery(".apply_now_arrow_left"), .5, {css:{left:"-2500px"}, onComplete:function(){jQuery(".apply_now_arrow_left").css("left","auto")}}));
controller.addTween(".apply_now_button", TweenMax.from(jQuery(".apply_now_button"), .5, {css:{opacity: 0}}));
controller.addTween(".apply_now_arrow_right", TweenMax.from(jQuery(".apply_now_arrow_right"), .5, {css:{left:"5000px"}, onComplete:function(){jQuery(".apply_now_arrow_right").css("left","auto")}}));

Natürlich hängt YMMV von der Funktionsweise Ihres Stylesheets ab, sodass Sie möglicherweise etwas anderes tun, aber das ist der grundlegende Gesamtansatz.