At Get Perfect Website, we’re passionate about helping creatives build stunning, strategic websites without the tech overwhelm. One way to elevate your Showit site is by adding a split screen scroll effect, where one section remains fixed while another scrolls, creating a dynamic and engaging user experience. This effect is perfect for showcasing portfolios, services, or products in a visually compelling way. In this comprehensive guide, we’ll walk you through two methods to create a split screen scroll effect in Showit, based on a popular tutorial and enhanced with insights from Showit’s official resources. Both methods are beginner-friendly, leveraging Showit’s drag-and-drop interface, and require no coding skills.

Why Use a Split Screen Scroll Effect?

The split screen scroll effect combines static and dynamic elements to capture attention and guide users through your content. Benefits include:

• Enhanced Engagement: Fixed elements keep key information or visuals in view, while scrolling content encourages exploration.
• Brand Alignment: Fully customizable to match your fonts, colors, and style.
• Mobile-Friendly: With proper setup, it works seamlessly across devices.
• No-Code Solution: Showit’s intuitive platform makes this effect accessible to non-techy creatives.

Whether you’re a photographer, entrepreneur, or small business owner, this effect can make your website stand out.

Read More: Showit Marquee Transition Effect

Fixed Top Block with Scrolling Content

This method creates a fixed section (typically on the right) while content scrolls on the left, ideal for highlighting a call-to-action or key information.

Step 1: Set Up the Fixed Block

1. Create a Blank Page: In Showit, start by adding a new blank page to your site.
2. Add a Fixed Canvas: Create a canvas for the fixed block. Set its width to 50% of the screen (e.g., 600px, a common minimum screen size for mobile compatibility).
3. Make It Fixed: In the canvas settings, set the canvas to “fixed” to keep it in place.
4. Add Content: Insert content like a title, button, or image. For example, use white text on a dark background for contrast. Ensure the content spans the full width of the canvas by adjusting clipping settings (e.g., clip to the left or right).

Step 2: Add the Scrolling Content

1. Create a Scrolling Canvas: Below the fixed canvas, add another canvas for scrolling content.
2. Set to Window Height: Configure this canvas to “window height” to match the viewport’s height.
3. Transparent Background: Set the background to transparent so content from lower z-index layers shows through.
4. Clip to Bottom: Clip this canvas to the bottom to ensure it scrolls under the fixed block.

Step 3: Make the Top Block Sticky

1. Enable Sticky Top: In the fixed canvas settings, select “sticky top” to keep it fixed at the top of the viewport during scrolling.
2. Adjust Z-Index: Set the fixed canvas to a higher z-index (e.g., 1) to ensure it stays above the scrolling content.

Step 4: Customize the Scrolling Content

1. Add Content: Add text, images, or other elements to the scrolling canvas, ensuring they occupy only the left 50% of the screen to maintain the split effect.
2. Fine-Tune Layout: Use techniques like adding invisible characters (e.g., spaces or line breaks) to control text alignment or adjust clipping settings to prevent overlap.
3. Duplicate for More Sections: Copy the scrolling canvas and adjust content (e.g., change background colors or images) to create multiple scrolling sections.

Step 5: Test on Mobile

1. Preview Mobile View: Check the design on mobile to ensure the fixed block and scrolling content display correctly.
2. Adjust Settings: Hide or tweak elements if needed, as mobile browsers may handle fixed elements differently due to toolbars or search bars.

Example Use Case

This method is great for a contact page where the fixed block displays a “Contact Us” form, and the scrolling section lists services or testimonials.

Tips for Success

• Leverage Scroll Actions: Showit’s scroll actions can enhance interactivity by triggering hidden canvases or transitioning views. Learn more at Showit Help Center: Scroll Actions.
• Explore Scroll Effects: Use canvas background settings like “Parallax” or “Fixed” for added visual interest. See Showit Help Center: Scroll Effects for Canvas Backgrounds.
• Mobile Optimization: Mobile scrolling can be affected by browser toolbars. Test thoroughly and consider setting mobile canvases to window height without sticky settings for smoother performance.
• Custom Code for Advanced Effects: For more complex designs, explore code snippets from resources like Seedling Studio’s Showit Shortcuts to add custom CSS or JavaScript.
• Experiment and Preview: Showit’s drag-and-drop editor allows for trial and error. Preview frequently to fine-tune the effect.

You May Like: Rotating Image Icon in Showit

Troubleshooting Common Issues

• Content Overlap: Ensure z-index values are correctly set to avoid overlapping elements.
• Mobile Jumps: If scrolling feels “jumpy” on mobile, adjust canvas heights or disable sticky settings. See Showit Help Center: Jumpy Mobile Scrolling.
• Alignment Issues: Use clipping settings to keep content within the desired 50% of the screen.

Why Choose Get Perfect Website?

At Get Perfect Website, we specialize in Showit templates and services designed for non-techy creatives. Our templates and tutorials, like this one, are:

• Strategic and Stunning: Built to look good, load fast, and engage users.
• Beginner-Friendly: No coding required, with step-by-step guides and video tutorials.
• Customizable: Easily adapt to your brand’s aesthetic.
• Supported: Our team offers friendly, jargon-free support to help you succeed.

Conclusion

The split screen scroll effect is a powerful way to make your Showit website stand out. By following Method 1, you can create a fixed sidebar with scrolling content, perfect for calls-to-action or key information. Method 2 offers a layered image-text effect, ideal for visual storytelling. Both methods are accessible through Showit’s no-code platform, making them perfect for creatives of all skill levels. Experiment with these techniques, test across devices, and customize to match your brand. For more Showit tips, templates, and support, visit Get Perfect Website or explore our plug-and-play templates.