Are there any plugins or does anyone know of a good way to achieve the iPhone elastic band scroll?
working example in flash
http://www.shinedraw.com/text-effect/silverlight-3-and-flash-iphone-dragging-effect/
I'm looking to drag and scroll a div, but if it goes past a certain point it bounces back.
Thanks
Check out iScroll.
Once you have figured out how to scroll it, it's very simple in mootools to obtain that "bounce" effect.
For example, you can apply a particular bounce effect in this way:
//element is supposed to be the main div you want to drag on iPhone
var element = $('elementID');
//instantiate a morph fx referred to that element
var bounceEffect = new Fx.Morph(element,{duration:1000, transition:Fx.Transitions.Bounce.easeOut});
//...then, when you want it to bounce back (e.g. at the release, or when it goes below a certain position) you can do:
bounceEffect.start({'top':0});
Edit: take a look # mootouch too, it's a very interesting project
Drew McCormack wrote an article for MacResearch about the physics of the bounce and momentum scrolling here, which includes JavaScript code for replicating much of the behavior you see on the iPhone.
Related
I've been looking everywhere and I cannot find an answer for this specific need.
I want to create a page with this effect - I want the page to scroll down automatically and smoothly to a certain section on the page as soon as the user begins to scroll their mouse. The problem with using the plugin linked above is that I already have my page designed the way I want, I just want to implement this scrolling effect. I am by no means a javascript expert - I deal mainly with the layout aspects of web. But if someone could show me how I could use javascript to automatically drop to a certain section on the page when the user begins to scroll, I would GREATLY appreciate it. Thank you!
Try Using Nice Scroll
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
$("#thisdiv").niceScroll({
mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
});
I am working with the Skrollr Plugin.
I am running jQuery 1.9.1 too.
I have found out that parallax pages are a lot of fun on a desktop with a mouse wheel to scroll. On an iPad or other touch devices nobody wants to scroll through that much animation, no matter how cool it is.. poor user experience. So what I decided to do is add two buttons. One on the middle right side and the other on the middle left side for the thumbs. You press the one on the right and you autoscroll to the next section. Vice versa for the left side.
Well instead of testing a bunch of different screen sizes and manually adding a bunch of values to an array and then having a script figure out what size screen it is and go through the custom array... I would rather have a function that looks up the IDs and grab the scrollTopPosition and push that into the array.
As far as the plugins documentation I have only seen this function. s.getScrollTop. That returns your current scroll position.
I tried the following commands:
document.getElementById('id').getBoundingClientRect();
document.getElementById('id').offsetTop;
$('#id').offset().top;
$("#id").position();
All gave me the wrong values when comparing to the s.getScrollTop() return value.
This is the last item in my icebox and I would love to knock it out today. Thank you for any help!
So I saw some homepages with a cool script making the scroll action as a autoscroll to the next div.
Here's what I mean in a better way: You start of in the hero part, and then when you use scroll to scroll down on the page, the script forces the homepage to lock itself to the next div in lets say hero 2 with a smooth animation, is there some kind of plugin for this or can anyone be kind enough to post a script that does that?
Thank you.
You could try ScrollMagic.js or Skrollr.js. ScrollMagic's great because you can use Greensock to animate your elements. Check out this scrollMagic tutorial
As Agent Zebra's answer mentioned there are lots of JavaScript library out there to do this sort of thing.
In the future there will be another way of doing it without JavaScript, using CSS scroll snap points. Firefox added support in version 39, but support in other browsers is lacking right now.
I found some lovely websites - http://www.mini.jp/event_campaign/big-point/, http://www.twenty8twelve.com/ and http://www.scozzese.com - all vertical scrolling, and all using a technique that aligns the 'pages' to the top of the browser when you scroll onto a new 'page' - even if you scroll half way into one.
Could anyone give me any pointers e.g. the right terminology/words I could use to search for more info, or a brief intro on the basics behind this technique, or if any jQuery etc plugins exist I can play and learn with?
I did a search of their code but nothing jumped out as how to do it, my Javascript and jQuery are still novice level.
Javascript Has some native methods like scroll(), scrollTo(), scrollBy() which (with some tricks) you can use to smoothly scroll the page. Together with offsetTop(), offsetLeft() you can achieve effects like on these sites.
There are also a lot of jQuery Plugins out there (e.g. like this google hit) to save you a lot of work with this.
Just search for these Methodnames, this should give you enough hits I guess.
Basic scrolling...
// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();
if(t > h) {
$(window).scrollTop(t - h);
}
Their scrolling script isn't very smart. If I scroll the webpage down by repeatedly clicking on the down arrow, every time I click, it scrolls back up. So inevitably it doesn't work.
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.