Parallax background images not fixed

My parallax background images aren't fixed, they scroll up the screen, not as fast as the other content, but all the same...

Anyone help? I'd post a url, but site is password protected. Happy to message anyone prepared to take a look with login.

Thanks

Ken

Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

ok, done.
Thanks

Ken

Any chance you could take a look at this for me today? I've tried to fix, but no luck.

Thanks

I have the same problem.

Thanks
Andrea

I found the cause of the problem.

@andreamontanaro see this post,
https://www.gavick.com/forums/quark/par ... tion-44430
specifically dziudek's post near the bottom of the thread.

Apparently this behaviour is intended, a new parallax engine was introduced when the template was updated. You can get back to the old way of doing things by removing the code below from the gk.scripts.js file which you'll find in templates/gk_qurk/js/

Code: Select all

// New parallax engine
if(jQuery(window).width() > 640) {
   jQuery(document).ready(function() {
      var parallax_containers = [];
      var parallax_heights = [];
      var parallax_tops = [];
      var window_h = jQuery(window).outerHeight();
      var parallax_progress = [];
      var parallax_layers = [];
      
      jQuery('.parallax-bg').each(function(i, parallax_wrap) {
         parallax_wrap = jQuery(parallax_wrap);
         // check the wrapper
         if(!parallax_wrap.children('.box-wrap').length) {
            parallax_wrap.html('<div class="box-wrap">' + parallax_wrap.html() + '</div>');
         }
         // don't add position: relative to the tabs content
         if(!parallax_wrap.parent().hasClass('gkTabsItem')) {
            parallax_wrap.parent().css('position', 'relative');
         }
         
         var content = parallax_wrap.children('.box-wrap');
         var parallax_layer = jQuery('<div class="parallax-bg-layer"></div>');
         parallax_layer.css('background-image', parallax_wrap.css('background-image'));
         parallax_wrap.css({
            'background-image': '',
            'z-index': '1'
         });
         parallax_layer.css({
            'width': '100%',
            'height': '130%',
            'position': 'absolute',
            'z-index': '0',
            'top': '0',
            'background-size': 'cover'
         });
         parallax_layer.appendTo(parallax_wrap.parent());
         parallax_containers.push(parallax_wrap);
      });
      
      jQuery(parallax_containers).each(function(i, container) {
         container = jQuery(container);
         
         parallax_heights.push(container.outerHeight());
         parallax_tops.push(container.offset().top);
         parallax_layers.push(jQuery(container.parent().find('.parallax-bg-layer')));
      });
      
      jQuery(window).resize(function() {
         jQuery(parallax_containers).each(function(i, container) {
            container = jQuery(container);
            parallax_heights.push(container.outerHeight());
            parallax_tops.push(container.offset().top);
         });
      });
      
      jQuery(window).scroll(function() {
         var scroll = jQuery(document).scrollTop();
         
         jQuery(parallax_tops).each(function(i, top) {
            if(
               scroll >= top - window_h &&
               scroll <= top + parallax_heights[i]
            ) {
               var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
               jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
            }
         });
      });
      
      var scroll = jQuery(document).scrollTop();
      
      jQuery(parallax_tops).each(function(i, top) {
         if(
            scroll >= top - window_h &&
            scroll <= top + parallax_heights[i]
         ) {
            var progress = (scroll - (top + window_h)) / (top + parallax_heights[i]);
            jQuery(parallax_layers[i]).css('top', parallax_heights[i] * progress + 'px');
         }
      });
   });
}

Sorry for late response - I'm glad you could solve it out. The only problem is - your change will be overwritten with next template update. I might suggest our dev team to add a possibility to select paralax method. I'll let you know about the decision.

That's a great idea. I can see why the new method might be preferable, it just wasn't what I was expecting having seen the demo and it didn't work for what I was doing.
Thanks!

Our developers works faster then a speed of message
Quark v1.1.1 (next release) will include such option that can be set in template settings

Ok perfect !
Thanks
Andrea

Is there anything else I can help you with regarding this topic?

No, sorry, my question and DM was regarding this

https://www.gavick.com/forums/quark/ima ... rval-44593

Sorry, probably didn't make it clear (early here!)

Ken

@[email protected] - sorry, but I don't understand how your post correspond to this topic?

You can ignore it. I jumped in on that post cos I had same problem, and DM'd you log in details re that, but then you responded here. Anyhow, I've found a solution, so all good.

Ok. Thanks for the info.