Support Center Visit Demo License manager Buy @ envato

parallax problems

sarahpellersarahpeller
in Theme support
Hi there,

I have a photo that is supposed to be a parallax effect. It's the section on this page, just below the first bit of text. So, under the line, "Terra Femme weaves these luscious experiences together.", there is a photo block of some woods. That is what I'm working on.

I'm having the following 2 problems with this:

  1. on safari, when I scroll down, the parallax effect isn't smooth. It jumps jaggedly on the screen.
  2. There are some women dancing in the photo at the bottom of it, but I can't figure out how to make the parallax box big enough to show the women. Right now, all it is showing is the top of the photo with the trees.
Thanks!

Comments

  • sarahpellersarahpeller
    Oh, I just noticed problem #3...

    3. This same image isn't showing up on iphone 6/7/8...
  • PabloPablo
    Hello,
    1) It's not fault of safari, it will look like this on every browser because it's not an issue at all.
    It's jumps because of mouse scroll, try to scroll on touchpad and you will see that it's smooth as it can be, it cannot be resolved with easy fix, this is usually how the parallax effect works - to avoid that you would have to use 'fixed' position.

    2) Parallax images cannot be scratched, they are displaying their original width, so if you will want to have it full-width on FHD screen, you will have to use the 1920x1080px image, or image with 1080px provided.

    3) I tested this page on iPhone 6 and i can see it works fine, did you solve the problem?

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    Thanks for your response...

    1. I am scrolling with the touch pad and it's not smooth at all in both Chrome and Safari.
    2. I resized my image to 1920x1080px, but it still won't show the whole image.
    3. I didn't fix it... I was previewing in developer mode on chrome. maybe it works on an actual iphone, but glitching on chrome?
  • sarahpellersarahpeller
    One more thing...

    #1 is now solved. After I uploaded my new 1920x1080px image, the choppy scrolling stopped for some reason...
  • PabloPablo
    2) I do not understand, I can see this image full-width displaying correctly:
    If you would like to display it on bigger resolutions, you will have to upload wider image, but some elements on 'smaller' devices will be cut off.
    Also remember, that you will not be able to align the image while parallax effect is on, you would have to edit that image to be 'thinner' with womens on the center.

    3) You should not check responsive version of your website that way - we suggest some websites which set-up the virtual machine with a mobile device.
    Also, I tested it on chrome on developer mode and it works fine too.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    2. I also am confused because it does appear to display correctly on your end. But on mine, I am not seeing the women. I've checked it on a large monitor (24") and my laptop (14") and they both won't show the women... Do you think it might just be my screen(s) that are displaying strangely?

    I might try making the image thinner, if that's needed. thanks for the advice.

    3. I shouldn't? What is the website that you suggest?
  • PabloPablo
    2) Try to make your image thinner, it will be the best solution.
    3) We are using the 'browserstack' website to test them, there you can select a lot of devices, including phones, tablets and even pc os'es.
    Thansk
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    Hmm... I tried making it thinner, but it's displaying  the same. It seems to be getting stretched... See here.

  • BryanBryan
    From what I can see, you are using a lazyload plugin for images and this is why the image looks like that on load. Please disabe the plugin and you will see that it should fix the issue.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    You're right, disabling that plugin fixed the issue. But I did want some sort of plugin that downsizes photos, since my clients don't know how to reduce file size on their own when they upload photos. Do you have a suggestion of how to solve that problem?
  • PabloPablo
    Sorry, but we cannot recommend any plugins other than the ones we support.

    But, you can try to teach, how to use image reducer like "TinyPNG.com", it's a drag and drop website so it would not be that hard ;)

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.