Javascript: Item slides when scrolled up to a point
- Started
- Last post
- 7 Responses
- adev
Looking for an example of a web site where an item, maybe the logo, starts at one point, then as you scroll down, it slides up to a certain point then stays fixed in that spot until you scroll back up to the top, which it then returns to the original place.
The question is... can this work on an iphone, based on how it handles scrolling? All I get is a popping effect after you're done scrolling.
- dijitaq0
use css transition and transform instead for animating objects in touch device such as ios and android because it's hardware accelerated so it should be faster.
- dijitaq0
detect the position the scroll position using javascript but the animation should be done with css instead
- detritus0
Have you tried the following?
I used it when helping a friend with his site and it works on iPhone..
http://www.vertstudios.com/blog/…
(I'm not linking the site because it's not mine and I don't want to be associated with it publicly.. )
- adev0
detritus.. that one has the same issue as well. The red box pops into place once you stop scrolling. I think it's a limitation of how the iphone hands the scroll function. On to try the css transitioning.....
- hrm. I can't remember if I tweaked something.. but it apparently definitely works (I don't have an iPhone..)detritus
- JoeQuery0
Hey, this is the author of the sticky scroller detrius linked. I highly suggest using jQuery waypoints. It's extremely easy to use, and I bet it can accomplish what you need.
http://imakewebthings.github.com…
JQuery waypoints is much more versatile than my sticky scroller, and it allows you to do much more complex effects. This way, the fixed item doesn't just "pop" back into place; you can make it enter/exit however you want.
- adev0
Problem 1: Not using jquery. 2: it does the same thing. It disappears then pops into view once the iphone stops scrolling.
Reproducing these effects for a browser is easy and took only 10 lines of code or what not.... it's the iphone that's the issue :)
- JoeQuery0
I'm not that familiar with CSS3, but I'm pretty sure you can trigger animations based on classes on elements.
Check this article:
http://css-tricks.com/rotating-f…Thus you can use the jQuery waypoints to trigger the class addition, which in term triggers the CSS3 animation. Best of both worlds :D