Parallax effect jumping

Question

I have a parallax effect on my site but on scrolling it seems rather jumpy as follows:

Here is the code:

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var pos = $(this).offset().top;
          var scrolled = $(window).scrollTop();
          jQuery('*[class^="prlx"]').css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

UPDATE: On further testing, it seems to be working perfectly in Chrome however Safari & FireFox is showing the issue.

Answer 1

I don't see anything "wrong" on your code. I will bet that the cause are the 2,1MB of your image, being resized from 2500px to the window width. Take into account that the browser is trying to "paint" the image and calculate position on every scroll value...
I'd approach it with background position on css but keeping with yours, the problem seems to be focused on performance. What you do on JS is a bit inefficient, cause first you select all '*[class^="prlx"]' loop through them, and then you apply again to all of them in every loop a position recalculation by looking again for them. As you are looping through elements, you can use this element and apply the change on it. Save $this to a variable is just to not apply jQuery twice on the same element and save a little resources, but in this case may not be so important.
Here on my laptop I don't see it jumpy. Try that and using a smaller image to see if it improves a bit the performance.

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var $this = $(this);
          var pos = $this.offset().top;
          var scrolled = $(window).scrollTop();
          $this.css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

Answer 2

I'd add will-change to your CSS attributes. This helps the browser to figure out how to handle elements. It will prepare the browser for an animation, so it won't be "surprised" that it needs to change how an element looks like.

*[class^="prlx"] {
    ...
    will-change: top;
}

Secondly, you should experiment with various other techniques besides using top attribute. Try background-position, margin-top, or transform: translate(0, Xpx). I'd hope for the latter one the most.