Horizontal Scrolling
Horizontal Scrolling creates a memorable and engaging experience for those who visit your website.
When scrolling up and down on your site, the content will scroll left to right (or) right to left depending on your settings.
Here's how it's done.
To create this effect you will need a least two or more Squarespace Sections to group together.
- Select the Squarespace Section you want to be at the beginning of the Horizontal Scroll.
- Click the SquareKicker icon
- Head to the Advanced tab
- Select Horizontal Scrolling from the menu.
- Toggle Enable
- Select the number of sections you want to include. SquareKicker will group together the current section and include the following section to your new Horizontal Scrolling track. Add more sections to your track by dragging the slider or type in a desired number of sections to the input field.
- Click Apply to save your design changes.
Additional settings
Reverse toggle
- Default settings scroll left to right as you scrolling up and down your site. You can reverse this scroll interaction so your section scroll right to left instead.
Fluid toggle
- Makes the first and last section of your track flow in and out of screen view. When you enable fluid, you are also presented the option to create a custom color to the background of any empty space created by this effect.
Fixed Background option
- This assigns the background image of your 1st section to the entire track while your content scrolls horizontally.
Mobile devices
- Because it doesn’t feel natural to scroll in this way on a mobile device, SquareKicker automatically removes horizontal scrolling for mobile size screens. You can override this by toggling Enable under Mobile Devices.
TIP: Horizontal Scrolling can be applied in a Preset so if you are using this often throughout your site, you can share these settings, along with all your design changes for this section elsewhere on your site.
🦀 Get your crab on and try some Horizontal Scrolling today 🦀