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
Related
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 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()
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 wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.