Avatar david.henry asked

simple question on Parallax, how to animate the background

How do I get the background image to almost stick, as though it's not moving during a scroll?

Do you have documentation on how to use the parallax features?

UPDATE
this is an example of what I'm trying to achieve:
slightly scrolling bg

When I try to get this effect by changing the Vertical (px) field I just get a jittery effect that I don't seem to be able to control.

Second Update

"Animate vertical position of background in pixels."

When I set this it resizes the image from 1920/1440 to 2866/2150, I really don't what that to happen. I don't seem to have any control on how much the image itself scrolls, I've added a private note so you can see what I mean.

Final Update
adding

background-size: 1920px auto!important;

has fixed the width issue and it's now scrolling well

  • WordPress
  • Widgetkit
  • General Question

Edited

8 Answers

0

Avatar matthijs Support answered

Would you be so kind to close this question by clicking the green check mark next to the answer that helped you?
Image
Thank you

0

Avatar michael.anlauf answered

Is moving not part of the idea of the Parallax function? How ever, use a static module with a image instead or a background image.
All the settings are in the widget himself under Settings.

Regards, Michael tucfoto

0

Avatar david.henry answered

Thanks for the update Matthijs

I've set up the parallax to be a 'slow scrolling background' now.

I can see that you've taken out the min height so now it's only about 100px tall, what else did you change?

The jittering effect is probably from your mousewheel scrolling multiple lines at a time. When you scroll by grabbing the scrollbar, it should be smooth.

I'm testing this on a laptop so no mouse wheel, the height varies on scroll, and the bg image jitters up and down on scroll, nothing else jitters including the widget content. Same if I use up/down keys. If I turn on Fullscreen, it creates a new white space at the top of the widget (on now), could this be related?

The resizing is because of the minimum height of 300px you set. Widgetkit will have to resize the image to retain that height.

Now that you have taken out the min height it's resized to 1749 x 1312, is there a way to stop the resizing altogether? I'll still need to have an exact height byt the way so I'm nto sure this is the solution.

Edited

0

Avatar geeksonthebeach answered

@ david.henry: Would love to see the final product, if you don't mind sharing a link.

0

Avatar david.henry answered

Would you be so kind to close this question by clicking the green check mark next to the answer that helped you?

sure

0

Avatar john.baskerville.20 answered

Would also love to know how this was done...

1.) Background sticky/non-moving
2.) Stop the resizing of the background image

Thanks,

-1

Avatar matthijs Support answered

I've set up the parallax to be a 'slow scrolling background' now.
Some remarks: - The jittering effect is probably from your mousewheel scrolling multiple lines at a time. When you scroll by grabbing the scrollbar, it should be smooth. - The resizing is because of the minimum height of 300px you set. Widgetkit will have to resize the image to retain that height.

Know someone who can answer? Share a link to this question via email or twitter.