Home Forums Showcase Full width design with parallax scrolling and fixed browser top

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #19044
    Otto
    Participant

    I’m just finishing huisje-wageningen.nl  This is a private site to offer for sale two tiny houses in Holland, which are owned by myself and a friend.
    I made it with Xtreme Plus and Weaver Show Posts, using parallax for desktopview. For mobile view I made a different set of pages with posts, because the parallax view doesn’t work on iOs.

    The entire content of the site is made on sets of posts with different categories. On the 3 pages I’ve put shortcodes to call the posts, like this one :

    [show_if device=desktop] [show_posts filter=otto-parallax] [/show_if]
    [show_if device=mobile] [show_posts filter=otto-mobiel] [/show_if]

    The fixed browser top can be set at WeaverX advanced options, HTML insertion, Fixed Browser Top:
    e.g. [extra_menu  menu_name='Hoofdmenu'  menu_style='secondary' menu_type='standard' ]
    (it only works if you check in Appearance, Menu’s, both the main and secondary navigation boxes)

    The normal behavior of the parallax view is that you can see only a part of the image on a smaller screen. Because I always want to show the whole picture I use this code in the Custom CSS Rules (Fonts and Custom tab in Weaver Main Options: .parallax {background-size: 100% auto !important; margin-top: 0px; }

    As I’m working on a Mac I wonder how the site looks like on Windows.
    I’m open for any suggestions to improve the site! 

    #28480
    Maureen
    Participant

    Hi Otto.

    Looking at your site on a Mac in Safari and Firefox, your images are crisp and display nicely. I did not see the green arrow on the right that scrolled down until I looked at the site a while; it blended into the photo.

    On your inside pages you did not add text to the parallax posts, so there is no break between images (i.e. House A — no break between interior view and kitchen view). I like the effect. You did the same on the home page and I don’t think it works as well. On top is House B and right below is cut off image of House A.

    Don’t forget to add your contact info.

    #28481
    scrambler
    Moderator

    Some images are slow to load, causing the page to show a lot of white instead on the pictures for a while. I looked at some of the pictures and they were above 500kb in size.

    You can reduce that size to 200k or less by using an image editor and resaving them with a higher jpeg compression level. I tested and was able to get them below 200k without any visual loss.

    #28482
    Otto
    Participant

    Thanks for your comments.
    I compressed the photo’s using the Shortpixel plugin. Next time I think it is better to first compress them before uploading. 

    #28483
    scrambler
    Moderator

    It is definitely better to do that in an image editor before upload

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