webentwicklung-frage-antwort-db.com.de

problem beim Parallax-Scrollen - div-Element ruckt beim Scrollen in Webkit-Browsern

Ich habe eine Parallax-Scroll-Funktion erstellt, die in Firefox einwandfrei zu funktionieren scheint. Im Chrome-Browser gibt es beim Scrollen jedoch einen leichten Sprung auf den Haupttext. klicken Sie hier, um zum ungefähren Abschnitt zu blättern. Ich bin mir nicht sicher, ob es sich um ein CSS- oder JS-Problem handelt. Nachfolgend finden Sie einen Ausschnitt, den ich in meine Parallaxenfunktion integriert habe

Weiß jemand, wie ich dieses Problem beheben kann?

$(document).ready(function(){

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each Sprite
$('[data-type]').each(function() {  
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('[data-type="background"]').each(function(){


    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;


    // When the window is scrolled...
    $(window).scroll(function() {

        // If this section is in view
        if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
             ( (topOffset + $self.height()) > $window.scrollTop() ) ) {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $self.data('speed')); 

            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $self.css({ backgroundPosition: coords });

           $('[data-type="scroll-text"]', $self).each(function() {
                    var $text= $(this);
                     var pos = ($window.scrollTop()/10) * $text.data('speed');
                     var curP = $text.css('margin-top'); 
                     var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
                     if(is_chrome) {
                         $text.animate({
                         paddingTop: pos,
                        }, 200, 'linear', function() {
                            // Animation complete.
                        });
                     } else {
                     $text.css('padding-top', pos);
                     }
            }); 

        }; // in view

    }); // window scroll

}); // each data-type


      }); // document ready
17
NewBoy

Einige Vorschläge:

1.) Verwenden Sie position: fixed, um Jitter zu vermeiden, da Sie das Element aus dem Dokumentenfluss entfernen. Sie können es dann mit z-index positionieren.

2.) Zwischenspeichern Sie so viel wie möglich, um die Verarbeitungszeit zu reduzieren.

3.) Math.round ist möglicherweise nicht notwendig, aber fügen Sie dieses CSS Ihren sich bewegenden Bereichen hinzu: -webkit-transform: translate3d(0,0,0); Dadurch wird die Hardwarebeschleunigung in Chrome erzwungen, wodurch das Jitter etwas gemildert wird. (Auf meinem Bildschirm sah es glatter aus, als ich das mit Inspector hinzufügte, aber es wurde nicht mit dem Scrollrad beseitigt.) Hinweis: Tun Sie dies nicht für Ihr gesamtes Dokument (z. B. Body-Tag), wie es könnte Probleme mit Ihrem aktuellen Layout verursachen. (Ihre Navigationsleiste hielt sich beispielsweise nicht am oberen Rand des Fensters.)

4.) Wenn Sie Animationen als Teil Ihrer Parallaxenlogik ausführen (den Rand in Position oder etwas entlang dieser Linien verschieben), entfernen Sie sie - das würde wahrscheinlich den Sprung verursachen, den Sie sehen.

Hoffe das hilft. Viel Glück.

4
jedd.ahyoung

Ich sehe das gleiche Jittering in FireFox und Chrome (Mac). Wenn Sie Ihre Container betrachten, ist mir die Pixelposition, die berechnet/verwendet wird, eine Augenweide.

Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;">
FireFox: <div id="about-title" style="margin-top: 1562.4px;">

Browser lassen nicht zu, dass der Inhalt auf 1/2 Pixel gesetzt wird, geschweige denn 0,3999999 Pixel. Ich denke, es bewegt sich und versucht zu berechnen, ob man aufrunden oder abrunden soll. Es zittert, weil es bei jedem Klick mit dem Mausrad berechnet.

Ich würde also versuchen, Math.round () zu Ihren Positionen hinzuzufügen, damit die Container niemals in der Schwebe bleiben.

Sehen Sie sich den Code hier an: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug einige Elemente, und Sie werden sehen, dass der einzige Bruchteil eines Pixels '0.5' ist. Die meisten von ihnen (der Großteil) gehen auf Rundenzahlenwerte.

2
Dawson

Haben Sie versucht, den Prevault-Fehler in die Scroll-Funktion einzufügen?

$(window).scroll(function(e) {
    e.preventDefault();
    // rest of your code
}
1
alemangui

Sie müssen die Funktionsweise des Bildlaufs ändern (d. H. Die Berechnung der Abstände). Dies kann jedoch durch Hinzufügen des CSS-Elements position:fixed zu den Seitenelementen, die durchlaufen werden, behoben werden. Das Problem entsteht aus der Zeit, die das JavaScript benötigt, um es zu verarbeiten und dann zu rendern.

Auf Ihrer Seite würden Sie beispielsweise jeden der <div>-Tags, die Text enthalten, an einer festen Position festlegen, und dann die JavaScript/JQuery-Funktion verwenden, um das top:-CSS-Element zu aktualisieren. Dadurch sollte die Seite reibungslos durchlaufen werden.

1
Patrick548

Ist vielleicht nicht auf Ihre Besonderheiten bezogen, aber ich hatte ein sprunghaftes Parallax-Scrolling-Problem. Ich konnte dieses Problem lösen, indem Sie folgende CSS für die festen Teile der Seite hinzufügten:

@supports (background-attachment: fixed)
{
    .fixed-background
    {
        background-attachment: fixed;
    }
}

Nicht sicher über alle Besonderheiten, aber gefunden unter Alternate Fixed & Scroll Backgrounds

0
Jahmic

In einer vorherigen Frage habe ich eine ziemlich gute Implementierung von Parallax-Scrolling erstellt. Jquery Parallax Scrolling-Effekt - Multidirektional Möglicherweise ist es nützlich.

Hier ist das JSFiddle http://jsfiddle.net/9R4hZ/40/ / Verwenden Sie die Aufwärts-/Abwärtspfeile oder das Scrollrad. 

Die Verwendung von Abstand und Rand für die Positionierung ist wahrscheinlich der Grund, warum Sie Probleme beim Rendern haben. Während mein Code Bildlauf- oder Tastatureingaben für den Effekt verwendet, können Sie den relavent-Anteil durchlaufen und die Variable $ moving überprüfen, bis Sie das gewünschte Element auf dem Bildschirm erreichen.

function parallaxScroll(scroll) {
    // current moving object
    var ml = $moving.position().left;
    var mt = $moving.position().top;
    var mw = $moving.width();
    var mh = $moving.height();
    // calc velocity
    var fromTop = false;
    var fromBottom = false;
    var fromLeft = false;
    var fromRight = false;
    var vLeft = 0;
    var vTop = 0;
    if($moving.hasClass('from-top')) {
        vTop = scroll;
        fromTop = true;
    } else if($moving.hasClass('from-bottom')) {
        vTop = -scroll;
        fromBottom = true;
    } else if($moving.hasClass('from-left')) {
        vLeft = scroll;
        fromLeft = true;
    } else if($moving.hasClass('from-right')) {
        vLeft = -scroll;
        fromRight = true;
    }
    // calc new position
    var newLeft = ml + vLeft;
    var newTop = mt + vTop;
    // check bounds
    var finished = false;
    if(fromTop && (newTop > t || newTop + mh < t)) {
        finished = true;
        newTop = (scroll > 0 ? t : t - mh);
    } else if(fromBottom && (newTop < t || newTop > h)) {
        finished = true;
        newTop = (scroll > 0 ? t : t + h);
    } else if(fromLeft && (newLeft > l || newLeft + mw < l)) {
        finished = true;
        newLeft = (scroll > 0 ? l : l - mw);
    } else if(fromRight && (newLeft < l || newLeft > w)) {
        finished = true;
        newLeft = (scroll > 0 ? l : l + w);
    }
    // set new position
    $moving.css('left', newLeft);
    $moving.css('top', newTop);
    // if finished change moving object
    if(finished) {
        // get the next moving
        if(scroll > 0) {
            $moving = $moving.next('.parallax');
            if($moving.length == 0)
                $moving = $view.find('.parallax:last');
        } else {
            $moving = $moving.prev('.parallax');
            if($moving.length == 0)
                $moving = $view.find('.parallax:first');
        }
    }
    // for debug
    $('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());
}
0
Louis Ricci