[Support request] Duplicating web page with Parallax Effect

Home Forums Support [Support request] Duplicating web page with Parallax Effect

Home Forums Support Duplicating web page with Parallax Effect

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #703766
    Steig

    Hello,
    I’m trying to rebuild a front page to a non-responsive RoR website using wordpress and Generate Press. You can see that the Parallax effect is really different in how the text blocks and the image blocks scroll between the two sites. Is there something I can be doing different in GP to make it look/behave more like the original? I used the sections option to piece all the sections together.

    Thanks

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #704057
    David
    Staff
    Customer Support

    Hi there,

    can you provide links to the two sites?

    #704066
    Steig

    I’ve just sent the info through your pre-sales form.

    #704101
    David
    Staff
    Customer Support

    Thanks, so those are fixed backgrounds. To do this with Sections you need to remove the parallax option and try adding a CSS Class to the section of fixed-background and adding this CSS:

    .fixed-background {
        background-attachment: fixed;
    }
    #704111
    Steig

    Doing that causes all the sections to just scroll like it’s all one webpage. i.e. no effect at all.

    #704235
    David
    Staff
    Customer Support

    In the Sections > Settings tab there is a field for Custom Classes, you need to add the fixed-background classs there

    #704520
    Steig

    That definitely makes it look the same during scroll. Is there a way I can apply a mask to the images? I used the exact same format, but do see they original site shows them cropped more narrowly. Can some sort of mask do this?

    #704531
    David
    Staff
    Customer Support

    You can try this instead to position the images centrally:

    .fixed-background {
        background-attachment: fixed;
        background-position: 50% 50%;
    }

    The old site also uses a height: 955px; property instead of the padding that you have set in the sections. I personally prefer padding then using a set height, but if you want you can add that to the above CSS and zero the padding in the section.

    #704738
    Steig

    My problem is that with the images the way they are, the first text bar falls below the fold and so a viewer would have to be interested enough to scroll to see what the picture is about.

    So I need to reduce their viewable size. I changed the code to include the “background-position: 50% 50%;” statement and couldn’t see any impact on the pages.

    So changed it to “background-size: 955px;” and that causes a tiled effect. The picture is shown 3 times across and has 2 rows.

    For the first image only, I took out the padding and doing so causes that picture to disappear completely. Putting the padding back at 60%/10% causes it to show up again. You can check it out. Right now the first picture has no padding and doesn’t show. but the other pictures still have padding and do show, albeit they are tiled as noted above.

    So it would appear that I do need the padding to make the pictures show. I need to loose the tiling effect and somehow shrink them down.

    #704888
    David
    Staff
    Customer Support

    Ok, what i meant was this CSS – which is what the old site uses:

    .fixed-background {
        background-attachment: fixed;
        background-position: 50% 50%;
        height: 955px;
    }

    Then you can remove the Padding from the section.

    #705018
    Steig

    Something I perhaps should have asked first, does the .fixed-background command break the responsive aspect? I just tried that aspect of things after this last change and it is broken. Desktop looks great. iPhone looks bad. So went backwards through the changes above until now I’m at the first code suggestion and the pictures still don’t shrink down on the phone. How can I accomplish this and keep it responsive?

    #705039
    David
    Staff
    Customer Support

    Yes, so as mobile doesn’t support fixed backgrounds we can wrap the CSS in a media query like this:

    @media (min-width: 769px) {
        .fixed-background {
            background-attachment: fixed;
            background-position: 50% 50%;
        }
    }
    #705384
    Steig

    I’m noticing on an iPad in landscape mode, the pictures go back to the fixed background mode and they are too big to look good. Would I just make the 769px number larger to force it out of background mode? Or is there a more elegant method? Some of these tablets have pretty high resolution screens.

    #705390
    David
    Staff
    Customer Support

    You can try increasing to 1024px.

    #705775
    Steig

    I had to go clear to 2048px! These things have amazing resolutions. (https://www.lifewire.com/what-is-ipads-screen-resolution-ips-display-1994325)

    But I’m concerned this will impact laptops or even some peoples desktops. Is there any other way to identify if its a table to display properly for it?

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