[MatthewParticipant]

I’ll start this off by saying, “WOW!” This is the best theme that I have ever seen. ever.

I’ve been tinkering with the Visual Composer for a good time now, and I feel like I’ve come up with some pretty good ideas for my site. One of the design features that I’d like to implement is a parallax background image at the top of my home page. Though, I’ve already added it to the page, I’m not entirely pleased with the speed at which the image moves.

My question: Where can I find the source file that would allow me to edit that function. I’ve looked all over, yet I’ve had no luck.

Thank!

[MatthewParticipant]

EDIT: Alternatively, what code would I need to add to the custom js field in the row settings?

[ZeshanMember]

Hi there,

Thanks for writing in!

To change the speed, you can simply use following jQuery code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function() {

  //
  // Attach parallax handlers.
  //

  if (Modernizr.touch) {
    jQuery('.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax').css('background-attachment', 'scroll');
  } else {
    jQuery('.x-content-band.bg-image.parallax').each(function() {
       var id = jQuery(this).attr('id');
       jQuery('#' + id + ".parallax").parallaxContentBand('50%', 0.3);
    });
    jQuery('.x-content-band.bg-pattern.parallax').each(function() {
       var id = jQuery(this).attr('id');
       jQuery('#' + id + ".parallax").parallaxContentBand('50%', 0.5);
    });
  }

});

By changing 0.3 and 0.5 to your desired speed from 0 to 0.9 (default speed is 0.1 and 0.3).

Hope this helps. 🙂

Thank you.

[MatthewParticipant]

Thanks! This is exactly what I needed.

[John EzraMember]

You’re welcome! contact us again anytime!

[ledzep100Participant]

Does the above jQuery still work to adjust the speed of parallax images? It worked for me before, it’s extremely useful, but for some reason on a new site with the current wordpress/theme changing the numbers doesn’t seem to effect the speed. I ask also because this thread specifically states there is no control over parallax adjustment (maybe I’m misunderstanding the other thread).
Other thread: https://community.theme.co//forums/topic/customize-parallax-effect/

My site: http://heretohelplearning.com/wholesale/

Thank you!

[Rue NelModerator]

Hello There,

You can try the code we have suggested in our previous reply: https://community.theme.co//forums/topic/parallax-background-speed/#post-170644

This should work as it overrides the parallax js script.

Please let us know then.

[ledzep100Participant]

Thank you for the reply!
Yes, that is the js script I was referring to. I can see it being output at the bottom of the page in the Developer Tools in Chrome, but alas, fiddling with the numbers doesn’t seem to change the speed.

[FriechModerator]

Hi There,

Please update the code into:

jQuery(document).ready(function() {

  //
  // Attach parallax handlers.
  //

  if (Modernizr.touch) {
    jQuery('.x-section.bg-image.parallax, .x-section.bg-pattern.parallax').css('background-attachment', 'scroll');
  } else {
    jQuery('.x-section.bg-image.parallax').each(function() {
       var id = jQuery(this).attr('id');
       jQuery('#' + id + ".parallax").parallaxContentBand('50%', '.9px');
    });
    jQuery('.x-section.bg-pattern.parallax').each(function() {
       var id = jQuery(this).attr('id');
       jQuery('#' + id + ".parallax").parallaxContentBand('50%', '.9px');
    });
  }

});

Let us know how it goes, Cheers!

[Author]

Posts