3

Probably not the best title, but what I'm looking for is the best approach to create a site with effect similar to this http://www.mdot.it/ "hijacked" vertical scrolling.

Basically I'd know how to do it were it only scrolling down(i.e. if scroll position is 100, fade something out, set something to fixed etc), what I can't get my head around is how to make it work both directions unless I'd use some crazy conditions and stuff.

Can't find the right word to call this effect either, everything I searched for resulted in paralax plugins..

Any tips/patterns/links that would help me?

Thanks!

// edit what mdot is doing is split the whole page into frames(1px 1 frame) and then assign styles for all 52 elements to each frame, so every scrolled pixel there is 52 styles being set.. there has to be a better way, or?

3 Answers 3

2
+50

Maybe skrollr is what you want. It's very lightweight and doesn't get in your way.

4
  • Looks good, still want to know how(or what's the best way) to do it, rather than using a plugin, I'll check how he does it, so far it seems similar to what they are using at mdot(assigning css styles to each frame).. Thanks.
    – fxck
    Oct 1, 2012 at 11:20
  • You don't need to do this for each frame. skrollr interpolates the values between them automagically.
    – Prinzhorn
    Oct 1, 2012 at 12:53
  • I just realized it's you who made the skrollr, firstly, great job, secondly, I'd still love to make a simplified version from scratch myself. So would you mind giving me a couple of answers if I wrote you an email? Cheers.. Other than that, accepting your answer, it's just the right thing for people that only want the parallax-y site done without knowing how it works :)
    – fxck
    Oct 2, 2012 at 14:11
  • Sure, write me at [email protected]
    – Prinzhorn
    Oct 2, 2012 at 16:07
0

I was able to dig up http://johnpolacek.github.com/scrolldeck.js/ on google, one of the examples has animations which work in both directions and it looks relatively well thought through - should be a good start.

1
  • I know that one.. that particular example is using johnpolacek.github.com/scrollorama which is pretty damn heavy weight and does loads of thing I don't need.. I'll look at how he does the fadein/fadeout on scrollup/scrolldown though..
    – fxck
    Sep 29, 2012 at 20:48
0

Check the cool scrollpath by Joel Besada:

https://github.com/JoelBesada/scrollpath

Demo here

2
  • Already built a site on that juniorakademie.cz and it's pretty far from what I need :)
    – fxck
    Oct 1, 2012 at 14:12
  • Ah, ok, a pity my answer couldn't help you, hope you find the answer elsewhere :-) Btw That site is very nice, good job!
    – Nelson
    Oct 1, 2012 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.