3

using jquery, how can i auto scroll a div continuously? like the news and features section of this website: http://animalsasia.org/. And also when you hover over the slider it stops the scrolling until you hover away.

is there a jquery plugin that will do that? Any help would be much appreciated.

dave
  • 14,991
  • 26
  • 76
  • 110

4 Answers4

14

I wrote some working example. There is live example on JsFiddle. The idea is to create container with position=relative, and put div with text into it. Also, we need to create a copy of text to avoid empty space when last part of text is showing. jQuery animate() function will do the rest.

HTML:

<div class="news_container">
    <div class="news">
       <div class="text">
           Long text
        </div>   
    </div>
</div>

CSS:

.news_container {
  border: 1px solid black;
  width:150px;
  height: 300px;   
  overflow: hidden;
  position: relative;
  padding: 3px;
}

.news {
  position: absolute; 
  left: 0px;
  top: 0px;
}

JavaScript:

(function($, undefined) {
  $.fn.loopScroll = function(p_options) {
    var options = $.extend({
        direction: "upwards",
        speed: 60
    }, p_options);

    return this.each(function() {
      var obj = $(this).find(".news");
      var text_height = obj.find(".text").height();
      var start_y, end_y;
      if (options.direction == "downwards") {
        start_y = -text_height;
        end_y = 0;
      } else if (options.direction == "upwards") {
        start_y = 0;
        end_y = -text_height;
      }

      var animate = function() {
        // setup animation of specified block "obj"
        // calculate distance of animation    
        var distance = Math.abs(end_y - parseInt(obj.css("top")));

        //duration will be distance / speed
        obj.animate(
          { top: end_y },  //scroll upwards
          1000 * distance / options.speed,
          "linear",
          function() {
            // scroll to start position
            obj.css("top", start_y);
            animate();    
          }
        );
      };

      obj.find(".text").clone().appendTo(obj);
      $(this).on("mouseover", function() {
        obj.stop();
      }).on("mouseout", function() {
        animate(); // resume animation
      });
      obj.css("top", start_y);
      animate(); // start animation       
    });
  };
}(jQuery));

$(".news_container").loopScroll();

Options:

  • direction ("downwards" or "upwards") - direction of text movement;
  • speed - speed of movement.

Here is example of using this plugin with options:

$("#example3").loopScroll();
$("#example4").loopScroll({ speed: 120 });
$("#example1").loopScroll({ direction: "downwards" });
$("#example2").loopScroll({ direction: "downwards", speed: 30 });
Pavel Strakhov
  • 39,123
  • 5
  • 88
  • 127
  • This is a helpful answer for my problem. Thanks, How to make it scroll downwards? – Solomon Sam Nov 23 '12 at 00:05
  • 1
    I've updated my answer with implementation. Now it's jQuery plugin and it has `direction` option to make it scroll downwards. – Pavel Strakhov Nov 24 '12 at 10:57
  • @PavelStrakhov How would this solution work if the animation is made with translate(x, y)? It seems to be more CPU friendly. I'm trying to make an implementation with a [jquery plugin](https://github.com/benbarnett/jQuery-Animate-Enhanced) that creates translate elements out of the current ones, but hitting a wall with pausing / resuming the CSS3 transition. – r1987 May 23 '16 at 21:33
  • Thank you SO MUCH for creating that JS Fiddle. I have been looking all over for something like this. Glad to see that a solution created in 2012 is just as relevant and useful in 2016. – Willow Oct 11 '16 at 01:49
2

Looks like a set of DIV positioned absolutely within the container. They're probably using a setInterval timer to modify the top position of each of the DIVs by a fixed amount every few milliseconds. Once a DIV scrolls completely off the top (the top position is the negative of the DIV height) they probably reposition it at the bottom of the stack. Having enough DIVs to fill the entire container plus some, give the illusion of continuous scrolling because you don't see them pop off the top and back on to the bottom.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795
2

If you inspect the element, you can see that it's changing the top position of the elements.

As the list starts, item 1 is within the bounds of the container.

------
item 1
item 2
item 3
------
item 4

As the ticker progresses, it moves item 1 outside of the bounds of the container

item 1
-----
item 2
item 3
item 4
------

As item 1 is moved out of bounds, it then moves it to the bottom of the container and continues moving the other items up

-----
item 2
item 3
item 4
-----
item 1

It's fairly trivial to implement yourself, but jquery vticker should contain the functionality you desire.

djlumley
  • 2,955
  • 2
  • 24
  • 30
  • 1
    WELL DUH....i mean i didn't need you to further describe whats happening...i was asking for a jquery solution... – dave Apr 19 '12 at 01:09
  • If you know how it's done, then it's pretty easy to create your own jQuery plugin to do it. . . – djlumley Apr 19 '12 at 01:10
0

You can use the marquee html tag( non standart but should work almost everywhere ) , or check this jquery plugin:

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

mpm
  • 20,148
  • 7
  • 50
  • 55