Scroll image expand

The section offers a dynamic way to showcase images and content. It allows an initial image to appear smaller, and as users scroll down the page, the image gradually enlarges until it fills the entire screen. Once the image fully expands, a title and button slide in from the bottom, providing a visually engaging opportunity to display content and encourage user interaction.

Key Features:

  1. Image Settings:

    • Option to upload and select an image.

    • Set the initial image size (small, medium, or large).

  2. Content Settings:

    • Choose a color scheme, allowing for customized colors and visual effects.

    • Add a title, description, and button text to display more information and encourage interaction.

    • Set a button link to direct users to a specific page upon clicking.

    • Optional arrow icon on the button to visually guide users.

  3. Animation Effects:

    • The image enlarges as the page scrolls, eventually becoming full screen.

    • The title and button gradually slide in from the bottom of the screen, enhancing interactivity.

Usage Suggestions:

  • Visual Appeal: Use high-quality images and ensure the image content is relevant to your website’s theme.

  • Concise Content: Keep the title and description clear and concise, ensuring users quickly understand the message once the image fully appears.

  • Enhanced Interaction: Use buttons to guide users towards further actions (e.g., learn more, shop now), and ensure that the button links are functional.

Points to Note:

  • Adjust the image size based on the actual layout and content needs to ensure the desired visual effect.

  • Combine enough text with visual elements to maintain content engagement and avoid monotony.

Last updated