Sticky Media Scroller

Enhance your web pages with dynamic visuals that remain in view as users scroll. The Sticky Media Scroller widget in JupiterX is perfect for creating engrossing and interactive experiences.

View Live Demo

Content Tab

Section

Customize each section you create to house your media:

• Media Type: Choose whether you're incorporating an image, video, or perhaps another media format within the section.
• Image: If you've selected 'Image', upload one or use an existing image from your media library. Video settings will be similar, with options to input video links or files.
• Image Resolution: Pick the desired resolution. 'Full' would be ideal if you want the image to display at its highest quality.
• Aspect Ratio: Adjust this to maintain the correct proportions for your image on various devices and screen sizes.
• Media Position: Choose how the media will be positioned within the section, e.g., "Center Center" for central placement.

Expand your scrollable content by clicking "+ Add Item". Adjust the order or remove items according to your layout preferences.

Settings

Fine-tune the overall behavior and appearance of the scroller:

• Sections Space Between: Create consistent spacing between each section of media for a clean layout.
• Section Height: Define how tall each media section should be. Use 'vh' for viewport-relative sizing or 'px' for fixed heights.
• Content Width: Dictate the width of the text or other content paired with the media during its sticky phase as a percentage.
• Media Position: Decide whether the sticky media should be on the left or right, or another configuration depending on your design.
• Stick Position: Select the point at which your media stays in place while scrolling—e.g., top, middle, or bottom of the screen.
• Media Transition: Choose an effect like 'Fade' or others available to create a seamless transition between sections.
• Transition Speed (ms): Precisely set how quickly the transition effects should occur. Faster speeds can create a sense of dynamism, while slower transitions can be more dramatic.

Style Tab

Media

• Border Type: Frame your media with a border or opt for a borderless design. Select the type of border—solid, dashed, or any other style available.
• Border Radius: Curve the corners of your media with a border radius to make them as rounded as you need.
• Box Shadow: Depth can be added to your media through a box shadow, which can elevate the media from the rest of the content.

Content

The content associated with your sticky media can be styled distinctively:

• Padding: Ample padding ensures that text and other content within the content area is neither cramped nor too sparse.
• Heading: Headings are typically the first text users will see, so their styling is crucial:
  • Margin: Allow for some breathing room around headings.
  • Text Color: Pick a text color that's visible yet complementary to your media and site palette.
  • Typography: Tailor the font to match or stand out from other text elements on your site. This includes setting the typeface, size, weight, and more.
• Description: Your descriptions should be easy to read and well-integrated:
  • Margin: Just like headings, space around your descriptions keeps content digestible and appealing.
  • Text Color: Go for a color that resonates with your site's theme and doesn't clash with the background.
  • Typography: Fine-tuning the typography here ensures clarity and consistency – essential for any descriptive content.
• Button: Buttons prompts action, so they need to be both attractive and functional:
  • Size: Choose a button size that is finger-friendly, especially for mobile users.
  • Typography: Button text must be clear, so adjust its typography for legibility and style.
  • Border Width & Radius: Borders and how rounded they are can significantly affect the button's appeal.
  • Text Color: The text color should contrast with the button background, especially for hover states, to signal interactivity.
  • Background Type: A simple color may suffice, but a gradient can add pizzazz if your design calls for it.
  • Border Color: If you have a border, ensure its color complements or contrasts effectively with the rest of your button.
  • Margin: Make sure your buttons aren't too close to other elements to avoid misclicks and maintain a tidy layout.