Choppy JavaScript Animation de background-position-y

Question

Donc le problème que je rencontre est que je veux un effet d'image de fond fixe tout en gardant l'image de fond assez large pour remplir un conteneur. Malheureusement, la manière CSS, en utilisant background-attachment:fixed; positionnera seulement l'image par rapport à la fenêtre. Cela crée un problème sur les tailles d'écran qui ont des proportions d'aspect radicalement différentes de celles de l'image d'arrière-plan, ce qui provoque un écrêtage indésirable de l'image d'arrière-plan (qui est une image d'une personne).

La solution que je suis arrivé à l'aide actuellement background-size: contain pour empêcher l'écrêtage de l'image sur toutes les tailles d'écran tout en simulant la background-attachment: fixed avec JavaScript en animant background-position-y sur parchemin. Le problème est que si je clique ensuite sur un bouton qui provoque une animation scrollTop sur la page, le paramètre background-position-y de l'image est saccadé.

Une idée de comment éviter ce saccades dans l'animation?

// Banner scroll function 
 
    var scrollTop = $(window).scrollTop(); 
 
    var banner = $('.hero-banner').css('background-position-y',scrollTop+'px'); 
 
    var debounced_fixBG = function(){ 
 
     var newScrollTop = $(window).scrollTop(); 
 
     banner.css('background-position-y',newScrollTop+'px'); 
 
     scrollTop = newScrollTop; 
 
    }; 
 
    $(window).scroll(debounced_fixBG); 
 
    
 
    $('.scroll-down').on('click',function(){ 
 
     $('html,body').animate({ 
 
      easing: 'swing', 
 
      scrollTop: $('#anchor').offset().top 
 
     },2000); 
 
    });

.hero-banner { 
 
    background-image: url('http://londonprogressivejournal.com/site_images/741.jpg'); 
 
    height: 383px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: contain; 
 
    background-position-y: top; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button class="scroll-down"> 
 
Scroll Down 
 
</button> 
 
<div class="hero-banner"> 
 
&nbsp; 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<a id="anchor">Anchor</a>

Answer 1

réponse d'affichage des commentaires:

Vous pouvez utiliser les deux background-attachment:fixed; et background-size:contain; et éviter la coupe supérieure en décalant l'image avec background-position-y:[height of top element];.

Answer 2

Vous pouvez définir transition propriété à background-position-y .5s ease-in-out à .hero-banner élément

// Banner scroll function 
 
    var scrollTop = $(window).scrollTop(); 
 
    var banner = $('.hero-banner').css('background-position-y',scrollTop+'px'); 
 
    var debounced_fixBG = function(){ 
 
     var newScrollTop = $(window).scrollTop(); 
 
     banner.css('background-position-y',newScrollTop+'px'); 
 
     scrollTop = newScrollTop; 
 
    }; 
 
    $(window).scroll(debounced_fixBG); 
 
    
 
    $('.scroll-down').on('click',function(){ 
 
     $('html,body').animate({ 
 
      easing: 'swing', 
 
      scrollTop: $('#anchor').offset().top 
 
     },2000); 
 
    });

.hero-banner { 
 
    background-image: url('http://londonprogressivejournal.com/site_images/741.jpg'); 
 
    height: 383px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: contain; 
 
    background-position-y: top; 
 
    transition: background-position-y .5s ease-in-out; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button class="scroll-down"> 
 
Scroll Down 
 
</button> 
 
<div class="hero-banner"> 
 
&nbsp; 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<a id="anchor">Anchor</a>

Answer 3

animation jQuery a tendance à être instable car il est très haut niveau; Il y a beaucoup de choses que votre ordinateur doit calculer pour animer. Si j'étais vous, j'utiliserais une solution CSS native. Here sont quelques bons tutoriels.

Answer 4

En plus de la réponse ci-dessus, essayez d'utiliser la position fixe au lieu de déplacer l'élément sur scroll. Ce sera beaucoup plus lisse.