Note: This scroll-responsive gallery is based on an effect present on the home page (at the time of creation). The gallery will move left and right as the users scrolls up and down the page, revealing more of the images.
The CSS is contained in the Custom CSS box in the advanced tab of the parent row. There is little you need to do with it, as it simply creates the staggered effect on the images. You can adjust the positive and negative 30px values if you want a more or less defined difference.
The Gallery block has a left margin of -400px in the spacing settings in the advanced tab. This is needed to initially position the images ‘off screen’, so they have space to move when scrolling. You can adjust this value to suit your layout. All other syling/spacing is define within the blocks.
Copy the JavaScript in the Custom HTML block to the footer area of page scripts, or a code snippets plugin. If you copy to page scripts, you must keep the <script> tags.
There are 2 values you can modify in the Javascript:
const startScroll = bbScrollerTop – window.innerHeight * 1; //Distance from top to begin animation
This will trigger the scroll effect when the top of the Gallery is 100% of the viewport height from the top of the viewport. If you want 75%, change to 0.75.
If your Gallery isn’t within the viewport on page load, you’ll probably want to keep the value at 1. If it is within the viewport, you’ll want to reduce that value.
const translateValue = (scrollPosition – startScroll) * 0.2; //Scroll speed
This defines the speed at which the images move left and right. Decrease for slower, increase for faster.