Transform on Scroll

[minterdewitt]

Okay, visit here and begin scrolling down, you’ll notice that the icons and text rise a little bit going from zero transparency to one hundred percent. Now, I’d like to do this little animation/transparency effect with the butterfly at the base of the page, but it has to happen when you scroll to that point. If it does it on page load, then there’s no purpose because people will never see it. I’ve tried to inspect the elements that have that effect with no luck. I believe this is all done with CSS, with possibly a little bit of JavaScript. Thank you for anything you guys can tell me!

[Paulie_D]

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

http://api.jquery.com/scrolltop/

[minterdewitt]

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?

[Paulie_D]

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?

Seems likely….

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.

[nixnerd]

@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 margin-top or top changed 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.

[minterdewitt]

Thanks, @Joe. I think I have all I need to accomplish this. First, I’ll check the JavaScript files included with the theme to see if I can find the script that is being used for the effect. If that goes south, I’ll give your link a look.

[Author]

Posts