generate animation as if it were a marquee

Question

I do not know much about css, but I think this code could help me generate a marquee. basically I want the animation that is done with the boxes, be done with the texts.

My main problem occurs with the animation, it is not very fluid, I want it to be more fluid and it starts from the end of the container to the left. How can I do it? I would be very grateful.

http://jsfiddle.net/joof5dhx/

<div id="horizontalScroller">
 <div>it is a message a little more of 100 characteres</div>
 <div>it is a message a little more of 110 characteres</div>
 <div>it is a message a little more of 120 characteres</div>
 <div>it is a message a little more of 130 characteres</div>
</div>

window.horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $('#horizontalScroller > div').height();
    if(left < temp) {
        left = $('#horizontalScroller').height()
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-60) }, 900, function () {
      window.horizontalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller > div").each(function () {
          $(this).css("left", i);
          i += 60;
          window.horizontalScroller($(this));
    });
});

http://jsfiddle.net/hhcbtyyg/

There are other questions already covering marquee effects. [This one](https://stackoverflow.com/questions/21233033/css3-marquee-effect) includes some techniques that use CSS with no JS. — nnnnnn, Sep 13 '17 at 03:01
@nnnnnn that way the marquee will be finite. with this I guarantee to have an infinite marquee. — yavg, Sep 13 '17 at 03:04

masterpreenz · Accepted Answer · 2017-09-13T03:49:23.823

You could just:

window.horizontalScroller = function($elem)
{
    var left = parseInt($elem.css("left"));

    $elem.animate({ left: (parseInt(left)-60) }, 900, function ()
    {
      // get the current left of the element
      var currentLeft = parseInt($(this).css("left"));
      // get the width of the element
      var width       = $(this).width();
      // get the container
      var container   = $(this).parent("#horizontalScroller");
      // get the width of the container
      var containerWidth = $(container).width();

      // check if the element goes out of the view item X + item w < 0
      if ((currentLeft + width) <= 0)
      {
        // put it on the opposite side: simply container w + item w
        $(this).css("left", (containerWidth + width) + "px");
      }

      window.horizontalScroller($(this))
    });
}

I just don't understand why you use height in your code above. If there is something I don't know let me know.

UPDATED:

To make the items appear on the leftmost by default:

$(document).ready(function() {
    var container  = $("#horizontalScroller");
    var children   = $(container).children();
    var containerW = $(container).width();

    // Loop through each item of container
    for (var i = 0; i < children.length; i++)
    {
      var item  = children[i];
      var itemW = $(item).width();
      // this is simply the space between them, remove if you don't need it
      var padding = 10 * (i + 1);

      // simply: padding + Container Width + (Item Width * (i + 1))
      // (Item Width * (i + 1)) because you need to position each element beside each other.
      $(item).css("left", (padding + containerW + itemW * (i + 1)) + "px");
      window.horizontalScroller($(item));
    }
});

your updated fiddle

hope that helps

thanks, but your code not works for me.. you have all the reason, width instead of height — yavg, Sep 13 '17 at 03:28
I forgot to put your updated fiddle I made http://jsfiddle.net/joof5dhx/2/ — masterpreenz, Sep 13 '17 at 03:29
you are a genious! Thank you. but I need the animation to start from the right side of the container (as shown in the image). this can be made responsive? without depending on the default value of the width of the container... — yavg, Sep 13 '17 at 03:34
I updated the answer and the fiddle in it to make the elements appear on the left most by default. Also it already responsive as it is as every end of the animation it gets the current width of the container means it will always end up at the end no matter what width it may be. — masterpreenz, Sep 13 '17 at 03:50
can you help me with this? https://stackoverflow.com/questions/46188659/if-i-change-a-fixed-width-to-auto-the-animation-is-distorted — yavg, Sep 13 '17 at 04:03

score 0 · Answer 2 · answered Sep 13 '17 at 03:05

0

Hi checked this version of your jsfiddle, i did some modificaitons, since your animation starts from whatever the value of height is your div had. check this I tried to match the height of your css and width in your css, i just noticed that the "left" var in your js gets the height of your element.

CSS:

#horizontalScroller {
position: absolute;
width:300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}

Maybe you can get some tips how to accomplish it in responsive way. JSFIDDLE

answered Sep 13 '17 at 03:05

jek

148
1
1
12

Thank you! you almost make it! how could you do it responsive with any width of the container? – yavg Sep 13 '17 at 03:11
if you want it to be responsive (is this by you mean that it adjusts to the width), well you have to set the div in 100%, for the div to adjust on any screen size, and check this jsfiddle again, i've changed the parameter that the animation follows, so instead of height, we're going to follow the width set then. Here http://jsfiddle.net/joof5dhx/3/ – jek Sep 13 '17 at 03:34
I wish I knew as much as you did! I just need the animation to start from the left of the container to the right. by the way instead of div you use span and the text gets disorganized, you know the reason? http://jsfiddle.net/rjogdygc/ – yavg Sep 13 '17 at 03:43

generate animation as if it were a marquee

2 Answers2