Hintergrundbild zuckt in Chrom wenn über jQuery

Question

positioniert Ich schrieb eine einfache Paralax-Skript.

Wenn ich mit dem Mausrad in Chrome und Internet Explorer blättern, zucken die Hintergrundbilder, während sie neu positioniert werden ... In Firefox scrollt es immer perfekt glatt (wie es beabsichtigt ist). Ist das ein leistungsbezogenes Problem im Browser? Was kann ich tun, um dies zu verhindern (wie kann ich das Skript vielleicht verbessern)?

Online Beispiel: http://lab.dev-nook.de/_test/paralax/

CSS:

body { 
     font:100%/1.5 arial; 
     padding:0; 
     margin:0; 
     color:#fff; 
} 
.smplParalax { 
     background-repeat:no-repeat; 
     background-size:cover; 
} 
.content { 
     border-bottom:solid 1px #f00; 
     min-height:500px; 
} 
.content .inner { 
     padding:20px; 
} 
#footerSectionOne { 
     background-image:url(paralax/1.jpg); 
} 
#footerSectionTwo { 
     background-image:url(paralax/2.jpg); 
} 

HTML:

<div class="smplParalax content" id="footerSectionOne"> 
    <div class="inner"> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
     </div> 
    </div> 
    <div class="smplParalax content" id="footerSectionTwo"> 
    <div class="inner"> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
      <h1>Lorem Ipsum</h1> 
     </div> 
    </div> 

JavaScript (jQuery):

function initParalx(options) { 
    if(typeof options == "undefined"){ 
     var options = { 
      'class': 'smplParalax', 
      'q': 2 
     } 
    } 

    function _handleParalax(options){ 
     var relPos = 0; 
     $(".smplParalax").each(function() { 
      relPos = $(window).scrollTop() - $(this).offset().top; 
      $(this).css("background-position", "0 " + (relPos/options.q) + "px"); 
     }); 
    } 

    $(window).on("load scroll resize", function() { 
     _handleParalax(options); 
    }); 
} 

$(window).ready(function() { 
    initParalx({ 
     'q': 1.5 
    }); 
}); 

Answer 1

Verwenden Sie die 01.233., um den eigentlichen Parallaxeneffekt zu erstellen, können Sie die Demo unten sehen, aber Sie müssen CSS nach Belieben korrigieren. Wie Sie jedoch sehen können, ist scroll glatt.

function initParalx(options) { 
 
    if(typeof options == "undefined"){ 
 
     var options = { 
 
      'class': 'smplParalax', 
 
      'q': 2 
 
     } 
 
    } 
 

 
    function _handleParalax(options){ 
 
     var relPos = 0; 
 
     $(".smplParalax").each(function() { 
 
      relPos = $(window).scrollTop() - $(this).offset().top; 
 
      $(this).css("background-position", "0 " + (relPos/options.q) + "px"); 
 
     }); 
 
    } 
 

 
    $(window).on("load scroll resize", function() { 
 
     _handleParalax(options); 
 
    }); 
 
} 
 

 
$(window).ready(function() { 
 
    initParalx({ 
 
     'q': 1.5 
 
    }); 
 
});

body { 
 
     font:100%/1.5 arial; 
 
     padding:0; 
 
     margin:0; 
 
     color:#fff; 
 
    height:100%; 
 
} 
 
.smplParalax { 
 
    height: 100%; 
 
    position: relative; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 

 
} 
 
.content { 
 
     border-bottom:solid 1px #f00; 
 
     
 
} 
 
.content .inner { 
 
     padding:20px; 
 
} 
 
#footerSectionOne { 
 
     background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/1.jpg); 
 
     
 
} 
 
#footerSectionTwo { 
 
     background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/2.jpg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="smplParalax content" id="footerSectionOne"> 
 
    <div class="inner"> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
     </div> 
 
    </div> 
 
    <div class="smplParalax" id="footerSectionTwo"> 
 
    <div class="inner"> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
      <h1>Lorem Ipsum</h1> 
 
     </div> 
 
    </div>

More info