CODEWITHSUNDEEP
jquerycarouselscroller
user429620
user429620

Reputation:

How to make this a continuous vertical scroller? (jquery)

See this page:

http://www.laurensbeerten.be/Frames/FrameE.html

The first problem is that there is a "hickup" in the animation after a second or so.

The second problem is that once all images have been looped, it immediately starts again at the top, instead of it being continuous. Is there any way to change this?

I think I need to somehow clone a set of the images and attach that..

The code:

$(function() {
  var ticker = $('#ticker');
  function animator(currentItem, first) {                              
    if (first) {
      distance = 85;
    } else {
      distance = currentItem.outerHeight();
    }
    duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.05;
    if (isNaN(duration)) {
      duration = 1200;
    }
    currentItem.animate({ marginTop: -distance}, duration, "linear", function() {
      currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
      animator(currentItem.parent().children(":first"));
    });
  };
  animator(ticker.children(":first"), true);
  ticker.mouseenter(function() {
    ticker.children().stop();
  });
  ticker.mouseleave(function() {
    animator(ticker.children(":first"));
  });
});

Upvotes: 0

Views: 3903

Answers (1)

John McKim
John McKim

Reputation: 590

I have two JS fiddle's for you.

The first fixes your code http://jsfiddle.net/VCBXz/12/. The first problem was that you need to manipulate the container's margin not the current item. Secondly you need to detach and re-append the current item in the DOM so that the list is updated.

The second fiddle is using CSS3 http://jsfiddle.net/ca7Ef/4/. This way there is no code involved. Browser support might not be as good as jquery but it is something to consider.

Here is the updated javascript. Note that I changed your inner p tag to a div.

var ticker = $('#ticker');
var container = $('#ticker > div');
var spacing = ticker.outerHeight() - ticker.height();

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;
    var currentTop = parseInt(container.css('margin-top'), 10);
    var duration = (distance + currentTop) / 0.05;

    container.animate({ marginTop: -distance}, duration, "linear", function() {
        var parent = currentItem.parent();

        currentItem.detach();
        parent.css("marginTop", 5);

        parent.append(currentItem);
        animator(parent.children(":first"));
    });
};


animator(container.children(":first"));
ticker.mouseenter(function() {
    container.stop();
});

ticker.mouseleave(function() {
    animator(container.children(":first"));
});​

Upvotes: 2

Related Questions