Parallax effect only for elements in viewport?

[envieme]

I am having a newsfeed with images+titles below them like Flipboard. I am applying the parallax effect to the images just like Flipboard app. And after trying many plugins, rellax is doing the best job for all its simplicity and lightweight.

But am wondering how to make the parallax effect run only when elements come into viewport. This will be helpful to make the effect more pronounced as right now at the default of -2 speed and 0.5 rellax percentage, the images in the bottom of the feed, when they come into the viewport, are way off from their respective titles.

[envieme]

I am sorry for posting this. I did figure out I had to change my HTML a bit to prevent lazyloading of images and it works beautifully now! Thank you for the plugin.

But is there a way to make it work with lazy loading images that have rellax applied to them? What happens is the first time a page loads and the images in the bottom of the feed are displaced by quite a bit when they come into viewport. But the second refresh of the same page renders them properly. So I am guessing it has to do with size information regarding the images?

[p-realinho]

Hey. Thanks for using the plugin :)

If you're loading all the image at once I think the solution for #52 could work for you.
If you're using lazy-loading, infinite scrolling, etc, you'll probably have to wait for #62 to get implemented. 😕

[johanneslamers]

Would be awesome if the parallax items stop transforming if they are out of the viewport. That would make this script much lighter and faster. No more unnecessary calculations and paints.

[moeamaya]

This is conceptually a great idea, but ultimately doesn't work in practice.

Because parallax by definition depends on your vertical scroll position, it doesn't make sense to not do the calculation on scroll. Even with 1,000 rellax elements, an iphone 5s doesn't stutter at all, so if your website is having performance issues I'd suggest optimizing elsewhere.

@johanneslamers Since we're using requestAnimationFrame and the elements are out of the viewport, painting is negligible.

[functionandform]

I may have gotten confused with this... but surely parallax relative to the viewport is essential? If I have a large page, then anything at the bottom of the page is going to end up being complete out of place by the time you scroll to its position. is there another way of achieving this?

[moeamaya]

@toddpadwick Yup, we have the centering: true feature which centers your element in the viewport when you scroll to that point.

[functionandform]

haha I knew I'd got something wrong somehow as it seemed odd not having it. Thanks @moeamaya . Great plugin... so many over bloated or abandoned parallax plugins out there and also very few seem to have a good destroy function which was the main reason I chose yours. 👍

[moeamaya]

Hey no worries glad you picked us! Feel free to email or tweet us when you launch your parallax project, we'll promote it!