Transform on Scroll
# June 21, 2014 at 10:12 am
Well anything that happens on scrolling like that is JS related so I will push this over there.
After that it’s just a matter of tweaking the CSS to happen once the JS fires.
I think one of the easiest ways is to add/remove classes in conjuction with JQuerys ScrollTop# June 21, 2014 at 11:16 am
Thanks, @paulie_d. I wasn’t sure if it was completely CSS or JS. I’ll look at the link you provided, but I’ll probably need some help on this. The one thing I’m wondering is, this functionality is obviously already built into the theme I’m using, so there’s got to be some way to tap into it, right?# June 21, 2014 at 11:27 am
The one thing I’m wondering is, this functionality is obviously already built into the theme I’m using, so there’s got to be some way to tap into it, right?
Then it’s just a matter of looking at what JS files you have and checking them.
Frankly, I have little (read: basically zero) skills in Js/JQ other than copy/paste and noodle it out…so I’ll leave this one to others.# June 21, 2014 at 11:42 am
@minterdewitt So we get this question like 5x per week. Usually, it has to do with parallax scrolling. Everybody wants to know how to do it. But really, when you think about it… parallaxed items are really just getting their
topchanged over the course of a set scroll duration. The thing that makes it look cool is that things are moving at different speeds, giving the page depth.
This is no different from what you want to do. You can pretty much tie anything to scroll position. @paulie_d is right that you can use scrolltop or waypoints if you want to kind of roll your own system.
I suggest you use this: http://janpaepke.github.io/ScrollMagic/
Scroll magic combines all the tools you could ever need to do anything you want on scroll. Anything at all!
I have posted this link so many times… but it is by far my #1 go-to option for scroll effects.
The interactive tutorials are awesome and the docs are great. Also, the developer is ACTIVE on Github. If you’ve got a problem, just submit an issue.
You must be logged in to reply to this topic.