web-dev-qa-db-fra.com

problème de défilement parallèle - Accès Web

J'ai créé un rouleau de parallaxe, qui semble bien fonctionner sous Firefox, mais dans le navigateur Chrome, il y a un léger saut dans le corps du texte lors du défilement. cliquez ici pour faire défiler jusqu’à la section about . Je ne sais pas si c’est une question de CSS ou de JS. Voici un extrait que j’ai incorporé à ma fonction de parallaxe.

Est-ce que quelqu'un sait comment je résoudre ce problème?

$(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
javascriptjquerycssgoogle-chromewebkit
17
NewBoy

Quelques suggestions:

1.) Utilisez position: fixed pour éviter toute gigue, car vous retirerez l'élément du flux de documents. Vous pouvez ensuite le positionner en utilisant z-index.

2.) Cachez autant que possible pour réduire le temps de traitement.

3.) Math.round n'est peut-être pas nécessaire, mais essayez d'ajouter ce CSS à vos zones en mouvement: -webkit-transform: translate3d(0,0,0); Ceci forcera l'accélération matérielle dans Chrome, ce qui peut atténuer une partie des tremblements. (Cela a semblé plus lisse sur mon écran lorsque j'ai ajouté ceci avec Inspector, mais cela ne s'est pas débarrassé de la nervosité avec la molette de défilement.) causer des problèmes avec votre mise en page actuelle. (Votre barre de navigation ne s'est pas collée en haut de la fenêtre, par exemple.)

4.) Si vous avez des animations exécutées dans le cadre de votre logique de parallaxe (interpolant la marge en place ou quelque chose du genre), supprimez-la - cela provoquerait probablement le saut que vous voyez.

J'espère que cela t'aides. Bonne chance.

4
jedd.ahyoung

Je vois le même vacillement dans FireFox et Chrome (Mac). En regardant vos conteneurs, une chose me frappe, c'est la position de pixel qui est calculée/utilisée.

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

Les navigateurs ne vont pas permettre au contenu de rester à 1/2 pixel, sans parler de 0.3999999 d'un pixel. Je pense que ça bouge, et essayer de calculer s'il faut arrondir ou arrondir. Ça craint parce qu'il calcule à chaque clic de la molette de la souris.

Ainsi, j'essaierais d'ajouter Math.round () à vos positions afin que les conteneurs ne restent jamais dans les limbes.

Regardez le code ici: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug certains des éléments, et vous verrez que leur seule fraction de pixel est '0.5'. La plupart d'entre eux (le gros) vont à arrondir des valeurs de nombre.

2
Dawson

Avez-vous essayé d'ajouter le preventdefault à l'intérieur de la fonction de défilement?

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

Vous devrez modifier le mode de fonctionnement du défilement (c'est-à-dire modifier le calcul de l'espacement), mais cela peut être corrigé en ajoutant l'élément CSS position:fixed aux éléments de la page qui défilent. Le problème vient du temps nécessaire au traitement du code JavaScript, puis à son rendu.

Par exemple, sur votre page, définissez chacune des balises <div> contenant du texte sur une position fixe, puis utilisez la fonction JavaScript/JQuery pour mettre à jour l'élément CSS top:. Cela devrait faire défiler la page en douceur.

1
Patrick548

Cela n’est peut-être pas lié à vos spécificités, mais j’avais un problème épineux de défilement de la parallaxe, j’étais capable de le résoudre en ajoutant le code CSS suivant pour les parties fixes de la page:

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

Pas sûr de tous les détails, mais trouvé dans Arrière-plans fixes et en défilement alternatifs

0
Jahmic

Dans une question précédente, j'ai créé une assez bonne implémentation de défilement de parallaxe. Effet de défilement Jquery Parallax - Multidirectionnel Vous le trouverez peut-être utile.

Voici le JSFiddle http://jsfiddle.net/9R4hZ/40/ utilisez les flèches haut/bas ou la molette de défilement. 

L'utilisation de marges intérieures et de marges pour le positionnement est probablement la raison pour laquelle vous rencontrez des problèmes de rendu. Alors que mon code utilise le défilement ou la saisie au clavier pour l’effet, vous pouvez mettre en boucle la partie pertinente et vérifier la variable $ moving jusqu’à ce que vous obteniez l’élément souhaité à l’écran.

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