Search code examples
javascriptjqueryparallax

jQuery Ken Burns effect and Parallax on same page

I'm really pulling my hair out with this one. Hopefully I'm overlooking something obvious!

I've got a page that needs both a Ken Burns effect slider and a Parallax banner (overkill I know, but very specific design requirements!)

http://www.northliving.co.nz

I can get the KB and Parallax effects working separately however when I try and do them together I get weird, inconsistent rendering; i.e. very slightly different (but all incorrect) positioning of the parallax section - see below.

Three Different Errors

I've tried the following to no avail:

  • Using jQuery's delay() to space the two effects out.
  • Clearing local and server cache.
  • Commenting out all other jQuery used
  • Testing in the latest versions of Chrome, Safari and Firefox

Thanks - would really appreciate any ideas!

Solution

  • Incase someone else is having a similar problem my solution was triggering a jQuery resize after a delay using:

    function resizeBrowser() {
    $(window).trigger('resize');
}
setTimeout( resizeBrowser, 1500);