Parallax Background Speed – Themeco Community

Parallax Background Speed

Matthew — Wed, 24 Dec 2014 10:03:39 +0000

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!

Reply To: Parallax Background Speed

Matthew — Wed, 24 Dec 2014 10:05:22 +0000

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

Reply To: Parallax Background Speed

Zeshan — Wed, 24 Dec 2014 11:30:53 +0000

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.

Reply To: Parallax Background Speed

Matthew — Sat, 27 Dec 2014 16:00:30 +0000

Thanks! This is exactly what I needed.

Reply To: Parallax Background Speed

John Ezra — Sat, 27 Dec 2014 16:09:43 +0000

You’re welcome! contact us again anytime!

Reply To: Parallax Background Speed

ledzep100 — Thu, 28 May 2015 22:20:25 +0000

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!

Reply To: Parallax Background Speed

Rue Nel — Fri, 29 May 2015 06:52:27 +0000

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.

Reply To: Parallax Background Speed

ledzep100 — Wed, 03 Jun 2015 21:17:18 +0000

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.

Reply To: Parallax Background Speed

Friech — Thu, 04 Jun 2015 03:43:13 +0000

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!