Are there any jQuery plugins that make it easy to control/animate dom elements based on scroll position?
Similar to the nike better world and ben the body guard sites.
My actual goal is to have elements move up and fade in when scrolling down and move down and fade out when scrolling up with the animation being 1 to 1 with the scroll.
http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
This plugin was just released. Does exactly what I was looking for.
I've never found any plugins that do it too well. If you want custom control over I'd recommend just coding something from hand. This site has a pretty solid tutorial on the premise of it.
Related
Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.
I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.
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 trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php
I am attempting to get out of amateur status, so forgive any false assumptions or silly questions.
I am interested in updating my web site http://scenicdesktops.com, so that instead of the old-school inline element that scrolls in a traditional manner (independent of the rest of the page), I would like to implement a movable inline element with smooth, side-to-side, page-to-page style scrolling. I would like to do this using side buttons, which, when clicked, would result in a smooth, moving transition of this middle section to the next / previous page.
It would also be convenient to have page links at the bottom which move the middle section strait to that specific page, all with the same smooth side-to-side motion.
I am a fan of minimalistic code, so the lighter the better. Perhaps I might need jquery or mootools for this, but my know-how ends right about there. Can anyone point me in the right direction?
Use jQuery and jQuery Tools, then you can:
$(".scrollable").scrollable();
(very minimalistic)
See http://flowplayer.org/tools/demos/scrollable/index.html for a demo