web-dev-qa-db-fra.com

Lissage du défilement de parallaxe d'une image d'arrière-plan

J'ai fait quelques recherches et écrit un simple jQuery qui fait défiler l'arrière-plan à un rythme légèrement différent de celui du premier plan, créant un effet de parallaxe lorsque vous faites défiler un site Web. 

Malheureusement, c'est un peu saccadé.

Voici la présentation de base du HMTL:

<body>
    <section>
        Site content goes here.
    </section>
</body>

Voici le CSS:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
}

Voici le JS:

$(window).scroll(function () {
    $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

C'est assez simple, mais le problème, c'est que le défilement est un peu saccadé, même sur un ordinateur puissant. 

Existe-t-il un moyen de rendre la parallaxe d’arrière-plan animée sans à-coups?

jqueryhtmlcsshtml5parallax
9
Chuck Le Butt

Ajoutez la propriété de transition à votre CSS afin qu'elle puisse être accélérée par le GPU comme ceci:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
    transition: 0s linear;
    transition-property: background-position;
}
10
mcmonkeys1

Essayez d’animer une propriété pouvant être accélérée matériellement dans les navigateurs qui la prennent en charge. Plutôt que de changer la propriété background-position, utilisez une img en position absolue, puis modifiez sa position à l'aide de transformations CSS.

Jetez un coup d’œil à stellar.js . Ce plugin vous offre la possibilité d’animer des transformations CSS dans des navigateurs performants (stellar.js vous permettra d’animer des images d’arrière-plan, mais cela ne fonctionnera pas aussi bien sur les appareils mobiles). Il utilise également requestAnimationFrame , ce qui signifie moins d'utilisation du processeur, du processeur graphique et de la mémoire.

Si vous estimez qu'un plugin est excessif, vous pouvez au moins vérifier l'approche adoptée et l'adapter à vos besoins. 

6
CherryFlavourPez

Définissez le css du corps comme ci-dessous:

body {
  background-image: url(images/bg.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
 }

Puis, en utilisant Javascript, récupérez la pageYOffset au défilement de la page et réglez-la sur la position de fond de l'image de fond du corps, comme ci-dessous:

window.addEventListener('scroll', doParallax);
function doParallax(){
   var positionY = window.pageYOffset/2;
   document.body.style.backgroundPosition = "0 -" + positionY + "px";
}

Il suffit de consulter mon post ici: http://learnjavascripteasily.blogspot.in/

3
Shwetha

Parfois, nous ne pouvons pas utiliser un élément <img> dans une div pour des raisons telles qu'un border-radius peut cesser de fonctionner ou une width plus grande que le parent. Je faisais face à tous ces problèmes et la meilleure solution que j'ai trouvée était d'utiliser:

transition: 0.5s ease;
transform: translate3d(0, 0, 0);

J'ai un effet de parallaxe vraiment sympa et fluide avec GPU.

2
tuliomarchetto

Pour le rendre lisse, placez l’image sur une division distincte et déplacez l’élément entier à l’aide de transform: translate: vous obtiendrez des résultats vraiment homogènes.

Voici un petit exemple faisant quelque chose d'un peu différent mais utilisant la traduction pour vous donner une idée:

HTML:

<div id="wrapper">
     <div id="content">Foreground content</div>
</div>

CSS:

@-webkit-keyframes MOVE-BG {
    0% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
    50% { 
        transform: translate(-250px, 0%);
        -webkit-transform: translate(-250px, 0%);
    }
    100% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

#wrapper {
    width: 300px;
    height: 368px;
    overflow: hidden;  
}
#content {
    width: 550px;
    height: 368px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

et le violon: http://jsfiddle.net/piotku/kbqsLjfL/

depuis javascript (avec jQuery), vous devrez utiliser quelque chose comme:

$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');

ou en vanillaJS:

backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
1
Picard

Essayez de changer le .css en .animate. Ainsi, au lieu de définir le CSS sur des valeurs strictes, vous pouvez l'animer.

$(window).scroll(function () {
    $("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});

NB: ajouter un script http://snook.ca/technical/jquery-bg/jquery.bgpos.js

S'il vous plaît gardez à l'esprit que je ne l'ai pas testé, laissez-moi savoir si cela fonctionne.

Animate Background images: http://snook.ca/archives/javascript/jquery-bg-image-animations

Démo: http://snook.ca/technical/jquery-bg/

0
Marc Uberstein