CODEWITHSUNDEEP
javascriptscripting
Paul Morris
Paul Morris

Reputation: 1773

Javascript - Setting & Controlling Scrolling Speed

Been working on implementing a scrolling news ticker into my site. Controlling the scrolling function with JS. The code I am using is below, can anyone advise me on how to set and scrolling the speed at which the ticker will scroll?

$(function() {

    //cache the ticker to improve the performance of the page.  
    var ticker = $("#ticker");

    //wrap dt:dd pairs in divs to allow us to smooth our the animations
    ticker.children().filter("dt").each(function() {

      var dt = $(this),
        container = $("<div>");

      dt.next().appendTo(container);
      dt.prependTo(container);

      container.appendTo(ticker);
    });

    //hide the scrollbar
    ticker.css("overflow", "hidden");

    //animator function
    function animator(currentItem) {

      //work out new anim duration
      var distance = currentItem.height();
        duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

      //animate the first child of the ticker
      currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

        //move current item to the bottom
        currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

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

    // start the news section scrolling
    animator(ticker.children(":first"));

    // users mouse enters the scrolling view
    ticker.mouseenter(function() {

      // Im stopping the animation when the mouse enters
      ticker.children().stop();

    });

    // the mouse now leaves the view
    ticker.mouseleave(function() {

      // begin the animating again of the scroller
      animator(ticker.children(":first"));

    });
  });

Thanks

Upvotes: 0

Views: 1798

Answers (1)

Andy Ray
Andy Ray

Reputation: 32066

Just copying and pasting JavaScript code can be dangerous stuff. Make sure you understand it before yanking it from a blog / tutorial. Also, have you tried anything yourself yet? Just reading the code should make the answer obvious:

duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

Changing 0.025 to something else will change the duration of the animation.

Upvotes: 2

Related Questions