Scrolling jQueryTo but slowing down in between

Question

I use a simple piece of code (based on ScrollTo Posts with jQuery ', which allows you to click the next / previous link and it will jump to the beginning of each post.

I have my HTML structure, so it goes post> image> post> image, etc.

I am wondering if it is possible if you press the next / previous button, it will scroll to the next message as usual, but it hangs / hovers over the images / div inbetween? That way, it eventually completes its scrolling, but slows down the divs between them.

Here is my jQuery code:

$(function () { function a(f) { var b, e, c = [], d = $(window).scrollTop(), g = $('.section-slide'); g.each(function () { c.push(parseInt($(this).offset()['top'], 10)) }); for (e = 0; e < c.length; e++) { if (f == 'next' && c[e] > d) { b = g.get(e); break } if (f == 'prev' && e > 0 && c[e] >= d) { b = g.get(e - 1); break } } if (b) { $.scrollTo(b, { duration: 1400 }) } return false } $('#next,#prev').click(function () { return a($(this).attr('id')) }); $('.scrolltoanchor').click(function () { $.scrollTo($($(this).attr('href')), { duration: 1400 }); return false }) }); 

Answer 1

Assuming your structure remains stationary: post → image → post → image, etc., you can do this by finding the previous / next image on the message that you will scroll, and scroll it first, then use onAfter callback / setting from the $.scrollTo to start secondary scrolling after the predefined setTimeout as follows:

 $(function () { function scroll(direction) { var scroll, scrollImage, i, positions = [], here = $(window).scrollTop(), collection = $('.post'); collection.each(function () { positions.push(parseInt($(this).offset()['top'], 10)); }); for (i = 0; i < positions.length; i++) { if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); // Find Image Before Post scrollImage = $(scroll).prev('.image').get(0); break; } if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i - 1); // Find Image After Post scrollImage = $(scroll).next('.image').get(0); break; } } if (scroll) { // Check if Scroll Image Exists if (scrollImage){ // Scroll with Image Delay $.scrollTo(scrollImage, { duration: 750, onAfter: function(){ setTimeout(function(){ $.scrollTo(scroll, { duration: 750 }); }, 1000); // Change the Delay to Increase / Decrease the Hover } }); } else { $.scrollTo(scroll, { duration: 750 }); } } return false; } $("#next,#prev").click(function () { return scroll($(this).attr('id')); }); $(".scrolltoanchor").click(function () { $.scrollTo($($(this).attr("href")), { duration: 750 }); return false; }); }); 

Here you can find the updated script: http://jsfiddle.net/hfg2v/2/

Hope this helps.

Answer 2

This is because you are using the parallax scroll library (Stellar.js), which causes different elements to scroll at different speeds.

A possible fix is ​​to scroll at a faster speed if no item is in the current viewport until the edge of the next item is removed from the screen, and then immediately scroll to the original scroll speed until the viewport again and continue repeating this until you reach the desired scroll offset.

Edit:

Sorry I came up with my answer and I did not have time to complete the code.

However, after some time working on it, I begin to think that my proposed solution will not work. I was thinking something along these lines:

 $(window).scrollTo(640, {onAfter: function () { var scrollRatio = 3; var distance = 855 - 640; $(window).scrollTo(855, { easing: 'linear', duration: distance * scrollRatio / speed, onAfter: function () { var scrollRatio = 1; var distance = 1200 - 855; $(window).scrollTo(1200, { easing: 'linear', duration: distance * scrollRatio / speed, onAfter: function () { var scrollRatio = 3; var distance = 1280 - 1200; $(window).scrollTo(1280, { easing: 'linear', duration: distance * scrollRatio / speed }); } }); } }); }}); 

If you paste the previous code onto the website indicated in the question ( http://dev.du.st/field-station/ ), you will be taken to the first element and it will try to scroll you to the next using the described method. I hard coded the offset values ​​because I was still experimenting with it. However, I do not think this approach will work as it still feels. This is because the instantaneous velocity change in the middle of the animation will always be noticeable.

Right now, I think the best way to mitigate the slow scrolling that causes the parallax scrolling is to use a different attenuation function. In the end, making the background image slower is exactly what you use to scroll through parallax.

The following code running on your website will force all animations to use the easeOutCirc function for their default easing function, after some experimentation, I found that this is the one that makes the scroll the least odd:

 // Add the jQuery-easing plugin, needed for the more sophisticated easing functions. $.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'); // Set easeOutCirc as the default easing. jQuery.easing.def = 'easeOutCirc'; 

You can find more facilitating features on this website.

After you finish experimenting, if you decide to use attenuation (you can use different ones to scroll up and down), then you should probably keep the default attenuation as it is, and just change the attenuation in the animation scroll by adding {easing: EASING_NAME} to your hash function in scrollTo function. So your code would look something like this:

 $.scrollTo($($(this).attr("href")), { duration: 750, easing: 'easeOutCirc' });