Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 9, 2023 at 5:55 am #1427613
    andre_h_

    How can I include an image that is only shown as a section and then more can be seen when scrolling? Sorry, I can’t describe it well, but I’ve attached an example in Private Content.

    Thank you for help!

    Greetz andre

    • This topic was modified 10 months, 2 weeks ago by andre_h_.
    December 9, 2023 at 1:18 pm #1427625
    Mike

    Hey andre_h_,
    Thanks for the links to your example pages, I believe that you are referring to the parallax effect, where there is a fixed image and the rest of the page scrolls over it, like in this example that I created:
    Enfold_Support_4030.jpeg
    To create this I added a color section at the top of the page and set the height to 50% of the screen, and then added a background image with the Background Attachment set to Parallax
    Enfold_Support_4034.jpeg
    Then I added a special heading to the color section and under it with a masonry gallery at the bottom of the page, is this what you are trying to do?

    Best regards,
    Mike

    December 9, 2023 at 2:17 pm #1427627
    andre_h_

    Thank you – that works – bit the picture is very unblur. Witch Option can i set to blur the image?

    December 9, 2023 at 2:24 pm #1427629
    andre_h_

    i found it – but i need another option – can is set the image stuck but only the page scrolls? So the image does not move? Like my example from miss kramers website?

    Thank you!

    December 9, 2023 at 2:35 pm #1427630
    Mike

    Hi,
    Glad that this helps. We don’t have a built-in option to blur the image, but you can add a custom class blur-background to the color section advanced tab for Custom CSS Class:
    Enfold_Support_4044.jpeg
    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .avia-section.blur-background .av-parallax .av-parallax-inner {
    filter: blur(6px);
}

    Enfold_Support_4046.jpeg
    feel free to adjust the number to suit.

    Best regards,
    Mike

    December 10, 2023 at 5:23 am #1427677
    andre_h_

    Thanks – can i set the image stuck but only the page scrolls? So the image does not move? Like my example from miss kramers website?

    Thank you!

    December 10, 2023 at 12:33 pm #1427690
    Mike

    Hi,
    I assume that you mean like this image:
    Enfold_Support_4028.jpeg
    for that change the Background Attachment to Fixed
    Enfold_Support_4030.jpeg

    Best regards,
    Mike

    December 15, 2023 at 11:12 am #1428195
    andre_h_

    Thanks that works on desktop – but on mobile device the page scrolls only with the picture. How can i change this? Thank you!

    December 16, 2023 at 9:14 pm #1428296
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .avia_mobile .av-parallax.avia-full-stretch.active-parallax {
	display: none !important;
}
.avia_mobile #top .av-parallax-section {
    transform: none !important;
}

    This was disabled because some older iPhones will not display parallax correctly due to a iPhone limitation.
    If you have any trouble viewing this on a iPhone then please remove the css and note that this will not work for you.
    I have tested this on my test site with a Android device and this works correctly.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.