Not an issue, but how does parallax work? about smooth-scrolling HOT 6 CLOSED

Hi @jesperlandberg,

Did you tried running the demos folder? Parallax is not included in the basic builded file; you need to use an extended one.

Try editing the demo first to get an idea of how this works! Currently the elements are being removed from the DOM when it's not in viewport. You can comment the lines 96 and 105 of custom.js so you can debug it more easily.

There must be some ways of including parallax in the default build file, just need some more work. Please let me know what you think!

from smooth-scrolling.

Hi @jesperlandberg,

I don't think that you can use ScrollMagic with VirtualScroll as the plugin's gonna check for the scrollY position of the browser.

What you can do is add a class to the element when it enters the viewport (you can do that with smooth-scrolling only) and then remove the class when it's leaving again -- if you want animations to be run just once, don't remove the class when it leaves the viewport again.

Don't hesitate to ping whenever you have issues or questions!

from smooth-scrolling.

Hi, thanks for the answer (and sorry for this late bump:P ). Managed to get parallax working how I wanted.

Rather than starting a new issue thread (as this is not an issue, but not sure were to ask questions=) )... but do you know if it is possible to use scrollmagic (http://scrollmagic.io/) without using native: true?

from smooth-scrolling.

Thanks, will try it out=)

EDIT: In you example, what is the bare minimum I need to keep to check if in viewport? (trying to "reverse engineer" it myself but any help is appreciated:P

from smooth-scrolling.

Hey @jesperlandberg,

Sorry for the long delay... Not sure if I understand what you mean by 'bare minimum' ?
An element will be out of viewport if;

const inview = bottom > 0 && top < this.vars.height

• the bottom position is more than 0
• the top position of the element is less than the window height

If you want more threshold, you could do something like;

const threshold = 200
const inview = bottom > (threshold * -1) && top < (this.vars.height + threshold)

I also just added another demo with parallax effects. It's basically the default smooth-scrolling; a transform applied to a .vs-section container but with child elements that will also have transforms applied.

Lemme know :)

from smooth-scrolling.

Feel free to re-open if you have any other questions/issues with parallax scrolling!

from smooth-scrolling.