The video introduces the scroll snapping feature in Bricks by comparing it to the functionality seen on popular websites like warespoland.com and tesla.com. It demonstrates how to implement scroll snapping within Bricks using a simple website layout consisting of four sections.
By accessing the page settings, users can easily enable scroll snapping and customize its behavior, such as specifying the snap type, alignment, padding, and margin. The video provides examples of adjusting these settings and explains how they affect the scrolling behavior.
Additionally, it illustrates how scroll snapping can be applied to individual elements within a container using custom CSS. The video encourages experimentation and creativity with scroll snapping in Bricks, showcasing its flexibility and potential for various design applications.
Here are some practical points about using Scroll Snap:
Activating Scroll Snap:
- Access the page where you wish to enable scroll snap.
- Go to the settings panel located on the left-hand side of the editor.
- Select "Page Settings."
- Locate the "Scroll Snap" option.
- Activate scroll snap by toggling the switch.
Choosing the Scroll Snap Type:
Bricks presents two primary scroll snap types:
- Mandatory Y-axis: This ensures the page snaps to the full height of sections as you scroll vertically.
- Proximity Y-axis: Snapping occurs when the user scrolls close to the edge of a section, offering a smoother but less rigid experience.
Select the type that aligns with your design and user experience objectives.
Targeting Specific Elements:
While scroll snap typically applies to sections in Bricks, you can designate other elements for snapping:
- Click on the "Selector" dropdown menu within the scroll snap settings.
- Choose options like "Container" or "Block" to pinpoint specific page elements.
Customizing Alignment:
You can specify where snapping occurs within the targeted element:
- Find the "Scroll Snap Align" option in the settings.
- Select from "Start," "Center," or "End" to align content to the top, middle, or bottom of the element during snapping.
Additional Adjustment Options:
Bricks offers additional adjustments for refining the scroll snap effect:
- Margin and Padding: These adjustments control snapping behavior and spacing between sections.
- Scroll Snap Stop: Useful for trackpad users, it defines how scrolling halts at the end of content.
Tips:
- Ensure that sections or targeted elements have defined heights for scroll snap to work effectively.
- Consider incorporating Bricks' "One Page Navigation" element alongside scroll snap for seamless section navigation.
