[Resolved] Customization: Bind Header With Parallax Effect as Background Image

Home Forums Support Customization: Bind Header With Parallax Effect as Background Image

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1346974
    itesla

    Hello
    I m trying to achieve using Elements and Backgrounds addons to make in such a way that the header will disappear slowly as you scroll down and it will follow as a background image with parallax effect, at the moment it does not work the combo and it loads the same image twice i would like to load it once for speed up site, and then if possible to make Primary navigation bottom of header and Secondary Menu on top of Element header.
    Not sure if this is possible maybe i m missing something, because my English is poor i will make it short, i want to make somehow at the moment how is header centered then it moves as background and disappear when you scroll.
    Please visit my site to see what i have done to give an idea.
    Also to note if i set in Ellement the Parallax setting then i can’t select Center Center only center top for background image. The Header Image is not present at the moment!
    Not sure but i think i have seen such effect on a site but don’t remember which one it was.
    Thank you very much for this great theme!
    p.s. maybe it will be a new idea if it does not exist yet for themes.

    #1346980
    itesla

    Oh after i wrote this i have went into Elements and have removed the background image, now i think that i need to center somehow the other background image, then after this resolve the Menus to make both transparent and separate from each other.

    #1347299
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry I’m having a hard time understanding what you are trying to achieve.

    Let’s take one step at the time.

    I believe this is the current issue:

    now i think that i need to center somehow the other background image

    Which image are you referring to here? The body background looks center to me:
    https://www.screencast.com/t/vjNvrRkCP7E2

    #1348805
    itesla

    Hello
    I wanted to make Header to follow like background image but both Menues separated from each other, the only thing i think to do is add a transparent image in place of header image to trick this system in some way, and the background image will be the header in same time.
    In short it is fixed now but i find many nuances related to iPad and iPhone usage, it seems that the theme is lacking customization for those, you can give a test from iPad and iPhone to see what i mean.
    Not sure if what i see on mobile is related to cache or not, will test without cache plugin tomorrow and let you know if is related.
    Thank you for taking the time to reply!
    P.s. the theme is perfect customizable for Desktop but the iPad or Smartphones there is needed some more development, not sure if Tom have time for that but i m satisfied with this Theme.

    #1349716
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can link us to an example of the kind of functionality you’re trying to achieve? I’m having trouble picturing it.

    #1351423
    itesla

    Hello Tom.
    It is hard to explain by words what i have in my imagination, i wanted to make the header to follow as background picture and it currently does when you scroll down, if scroll up it will reappear as header image and background at same time with both Menus separated from each other, at the moment i m satisfied with what i have done but on mobile it does not show at all the Element is damaged or is not compatible with mobiles, i have disabled WP Optimize plugin but on mobile is not showing as on Desktop, also the menus on mobile are not user friendly after i did this change.
    What i wanted to say is that there are not much settings to make it work on mobile devices or even iPad devices, the layout for them need improvement.
    Also i m not sure if i have seen this on any site or is just something of my own make?!
    P.s. by making this i got rid of a error which was showing on Google Page Speed Insights, it was named Cumulative Layout Shift and it helped to improve ranking.

    #1352078
    Tom
    Lead Developer
    Lead Developer

    Fixed background images won’t work on mobile devices (too CPU intensive).

    You could:

    1. Increase the site header offset value for mobile in your Header Element.
    2. Use some CSS to adjust the positioning of your image on mobile:

    @media (max-width: 768px) {
        body {
            background-size: auto 100%;
            background-position: center -200px;
        }
    }
    #1353049
    itesla

    Yes this did the trick, now is better, thank you!
    You are best!
    P.s. wanted to let you know maybe someone is interested, i m selling tors,io premium domain name.

    #1353150
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.