la parallaxe défilement question - élément div secousses lors du défilement dans les navigateurs webkit

Quelques suggestions:

1.) Utilisation position: fixed pour éviter tout scintillement, que vous serez en prise de l'élément de la circulation des documents. Vous pouvez alors le placer à l'aide de z-index.

2.) Cache autant que vous pouvez pour faciliter les temps de traitement.

3.) Les mathématiques.rond peut ne pas être nécessaire, mais essayez d'ajouter cette CSS pour votre déménagement domaines: -webkit-transform: translate3d(0,0,0); Ce sera la force de l'accélération matérielle dans Chrome, ce qui peut soulager une partie de la dispersion. (Il semblait plus lisse sur mon écran quand j'ai ajouté ce avec l'Inspecteur, mais il n'a pas à se débarrasser de la nervosité avec la molette de défilement.) Note: à ne pas faire sur l'ensemble de votre document (par exemple, le corps de la balise), car il pourrait causer des problèmes avec votre configuration actuelle. (Votre barre de navigation ne colle pas à la partie supérieure de la fenêtre, par exemple.)

4.) Si vous avez des animations en cours d'exécution dans le cadre de votre parallaxe de la logique (de l'interpolation de la marge en place ou quelque chose le long de ces lignes), retirez - ce serait sans doute la cause du saut de vous voir.

Espère que cette aide. Le meilleur de la chance.

Vous allez avoir à changer la façon dont le défilement fonctionne (c'est à dire changer la façon dont l'espacement est calculé), mais cela peut être corrigé par l'ajout de la position:fixed CSS de l'élément de la page, les éléments qui sont le défilement. Le problème vient du temps qu'il faut pour le JavaScript pour le processus et rendre ensuite.

Par exemple, sur votre page, vous définissez chacun des <div> balises contenant du texte, d'avoir une position fixe et ensuite utiliser le JavaScript/JQuery fonction de mise à jour de la top: CSS de l'élément. Cela devrait rendre la page de défilement en douceur.

Dans une précédente question, j'ai créé une assez bonne parallaxe défilement de la mise en œuvre. Jquery effet de Défilement Parallaxe - Multi directionnel Vous trouverez peut-être utile.

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

À l'aide de rembourrage et de la marge pour le positionnement sont probablement la raison pour laquelle vous rencontrez des problèmes de rendu. Alors que mon code utilise de défilement ou le clavier d'entrée de l'effet que vous pouvez lire en boucle la ème partie et vérifier l' $déplacement variable jusqu'à atteindre l'élément souhaité sur 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());
}