How to create the magic of fixed scrolling on Squarespace
Have you ever looked at a site and wished you could create the effects and motion they had? Imagine crafting something captivating with just a click! Enter SquareKicker's "Fixed Scrolling" tool, an effortless way to transform your website into an enchanting visual journey.
In this article, we'll delve into the simplicity and magic behind this tool, exploring its functionalities and offering creative ideas for blending multiple tools together.
Understanding "Fixed Scrolling"
"Fixed Scrolling" resides in SquareKicker’s Section Tools' Advanced features. When accessed, it presents options to fix either the Content or Background of a section. These options can be applied individually or simultaneously, offering distinct visual effects.
Fixing Content: Blocks within a section remain fixed while the section and its background scroll.
Fixing Background: The section and content scroll, but the background remains fixed.
Fixing Both: The entire section appears fixed while scrolling, gradually revealing its content.
Adjusting Section Height and Design
It’s important to take note of the section's height when fixing content. When you fix the content of this section, the height of the section is reduced because the height of the section is dictated by the content: when it is fixed, the minimum height of the section is the new height for this section.
This can be adjusted in the Fluid Engine Section settings with Squarespace’s Section Height when Fill Screen is enabled. Select Small, Medium, Large or Custom to set the height of the section.
Try These Examples
Fixed Scrolling's versatility opens doors to myriad design possibilities espically when combined with other SquareKicker tools. Here are a few captivating examples that you can try.
Text Color Change
Create a captivating color transition effect by fixing content in two sections with text blocks showing the same word in different colors. As users scroll, the bottom section unveils, seemingly changing the text's color.
Reveal Different Versions of a Product
Expand your creativity by applying fixed scrolling to sections with different widths, like this design which is revealing different colors of the same product.
Fill Outline Text
Add text animation when you fix the content on multiple sections in a Sticky Split. Both sections here have a text block with an outline, the first text block has a transparent fill color and the second text block has a solid fill color. As you scroll this gives the impression that the text is ‘filling’ on scroll. To learn more about Sticky Split, watch this tutorial: How to Create Sticky Split Screen Sections in Squarespace.
Combine with Horizontal Scrolling
Experience the wonder of fixed scrolling while navigating a horizontal Scrolling Track, unveiling sections from left or right. To learn more about Horizontal Scroll, watch this tutorial: How to Create Horizontal Scrolling Sections in Squarespace.
These examples barely scratch the surface of the creative potential within Fixed Scrolling. With SquareKicker’s user-friendly tool, each click adds a touch of magic to your website.
It's time to infuse your site with a little magic. Embrace these tools and unleash your creativity—we can’t wait to see what you will create.
