0

I need to setup a section of a template I'm building out for a client that contains a parallax. This means I wont always know where that section will end up on the page. This creates a problem, the y-axis of my parallax is often off because the current parallax technique I'm using requires me to set the start and stop points.

I could possibly get around this if I could set the image on repeat and set the spacing between images to prevent it from showing in that window, that said, background-repeat: space; doesn't seem to be adjustable.

I'm currently using http://www.franckmaurin.com/blog/the-parallax-effect-with-jquery/ does anyone know of a work around to make parallax images look great when it's left to the clients hands or another javascript technique that would do this for me?

Thank you.

$.fn.parallax = function(options){
    var $$ = $(this);
    offset = $$.offset();
    var defaults = {
      'start': 100,
      'stop': offset.top + $$.height() + 800,
      'coeff': 0.95
    };
    var opts = $.extend(defaults, options);
    console.log("Parallax Works!");
    return this.each(function(){
      $(window).bind('scroll', function() {
        windowTop = $(window).scrollTop();
        if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
          newCoord = windowTop * opts.coeff;
          $$.css({
            'background-position': '0 '+ newCoord + 'px'
          });
        }
      });
    });
  };
// //parllax bind
if ($('.commit').length){
  $('.commit').parallax({  'start': 51 , 'stop':offset.top + $$.height(), 'coeff':-0.65 });  
}

Not a lot to show as far as code goes, this script may just not be robust enough to do the job.

Brendan Jackson
  • 305
  • 1
  • 3
  • 13

1 Answers1

0

Without further ado, in similar cases, I recommend using an out of the box solution like Parallax.JS, which only needs to add an image input and is widely configurable.

But for parallax effects, there is no need for JavaScript as it is an inbuilt feature with CSS3, with background-attachment: fixed;. For an actual example check out this w3 article. In this very case it is really recommended to use this version simply for performance reasons, as CSS is enhanced by the GPU, while, if written wrong, JavaScript is not. On your provided link the effect feels slow and cloggy, and believe me, not my computer is the problem.

In general terms, always use CSS for animation and such effects, and with parallax, you only have to use this one command.

Daniel Grant
  • 156
  • 5