Search code examples
javascriptcssvideo-capturescreen-recording

Screen Record Parallax elements on a webpage?

I'm trying to screen record the following website for use in our portfolio:

http://independentsweek.co.uk

The website contains quite a few parallax elements and I'm using a JavaScript bookmarklet to smooth scroll through the page. The issue is, because the bookmarklet uses a css transforms to scroll through the page, the parallax elements don't parallax.

Is there a known method, which I've failed to stumble across, which both smooth scrolls a page whilst still keeping the parallax items parallaxing?

I plan on using QuickTime to record my screen, as it is native macOS.

Thanks.

Solution

  • Rather than using a Bookmarklet that injected JS to run a CSS Transformation, I used jQuery's scrollTop() function, scrolling to the ID of my footer.

    The code I'm currently using is:

    javascript:jQuery('html,body').animate({scrollTop:jQuery("#mastfoot").offset().top},22000);

    Hope somebody finds this helpful!