I have been trying to search for different things, but I couldnt find the suiting solution for my problem.
I need to scroll to the next div, when you swipe up on the iPad, so the div's top snaps to the ipads top. I think this would be simply on .scroll in combination with .scrollTop(), right? So now when you scroll, it should detect either you scroll down or up, and when you do so, jump to the next or previous div.
Has anyone a ressource, where I can find a solution to this?
Thanks in advance
I've done the exact same thing a while ago for my Personal Website. (if you check it with a tablet or a smart phone you can see it in action)
what I used was:
jQuery Mobile: to detect touch moves and unbind the scroll
Touch Swipe Plugin: to detect the direction of swipe
And the rest is simple jQuery animation using scrollTop() and offset()
Related
Is there a github or open source project which is a horizontal slider/swiper like on the google Films page?
Live Demo: https://www.google.at/search?q=films
I did a research but could not found the same behavior because this swiper does not force you to drag, on the desktop, you also can use the vertical scroll wheel and if you use the next button, it jumps to the next x elements and calculates how much it can skip depending on the screen size. Also the elements does not snap in place which is great I think, if you swipe. The cover is under your fingertip and moves as you swipe and does not do an animation or moves and snap in place, you just can swipe along.
and if you have js disabled, at least you can use the scroll wheel :)
Thx for help and tips.
The wording in the title is weird, apologies. It's hard to explain the effect.
I currently have this, it works best on Chrome:
http://mattluckhurst.com/dev/
My client wants each panel to slide up as the user scrolls down, covering the previous panel. I am currently accomplishing this by setting the "current" panel to have position:fixed and top:0 as soon as the page scrolls to it. The panels each have a z-index that corresponds to their vertical position on the page. So ideally:
You scroll down. when the next panel is halfway up the window, the scroll animates to get you all the way there, then that panel is snapped to the top so the next one can come in over it.
It's working pretty well in Chrome, but I am getting a lot of flickering and stuff elsewhere. Also on mobile it's a mess, but we really want a nice smooth swipe up down.
I know fixed elements can get pretty funky on mobile, so I am wondering if that is the problem, or if I should be using something other than just window scrolling for the animation / effect.
I see more complex parallax stuff all the time, so this should be pretty doable, I'm just not sure where to start.
Thanks for any help! Let me know if you need more info.
A few libraries that might help you:
https://github.com/dirkgroenen/jQuery-viewport-checker
https://github.com/janpaepke/ScrollMagic
https://github.com/matthieua/WOW
https://github.com/jlmakes/scrollReveal.js
https://github.com/Prinzhorn/skrollr
I've looked through a lot of smooth scrolling stuff and none of them do quite exactly what I want it to do. I would like to encapsulate a mouse scroll, and automatically smooth scroll to a specific div. So there the user is never between two divs, the screen is always filled with the next or previous div. Kind of like a hyperlink that jumps to an #anchor but instead of a click, its a mouse scroll, and instead of a jump, its a smooth scroll/transition. Simplest solution would be best. I don't want to involve jquery...
Thanks!
There is a good plugin for doing what you want.
http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html
I'm looking for a way to slow down scrolling between two specific pixels, for example 1 to 100 from the top. Would that be possible in any way?
Here's a link to a website that have that feature I'm looking for.
http://goo.gl/isH5o0
When you start scrolling the dark blue overlay div disappears using CSS3 Translate3d, but then the scroll seems to stop or go really slow, which makes the underlying div not scroll to far at the same time the overlay div slides up.
Can someone please give me a hint of what technique to use to accomplish this or maybe help me with some code.
I think that there's nothing special with the scroll on that page, just the divs moving using 3d transforms. But if you want to achieve special effects with scroll, you can use the jQuery animate function:
$('html').animate({scrollTop: position-to-scroll}, 300, 'ease-in');
More about animate.
It may be using disable scrolling. I noticed that if i drag the scroller on the right hand side of the window it is uneffected by the "slowing" however the mouse scroll is. This is similar to the effect of the demo described here How to disable scrolling temporarily? .. at a point you can temporarily disable the scroll and then re enable it to stop them going too far down
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!