Better marquee

JavaScript
1

Hi, I took a tutorial at Lynda.com. This helped me understand actual use very well. Up to now only reading not using. I understand this code decent. My questions are these. How would you get this code to do a animation that moves the picture (marquee) on the stage then off the stage? Do you need to employ jQuery easing for this? I would like to know how to make the marquee (doing a picture on and off the stage) loop infinite and go in either direction when clicking on the buttons. This code does a slick switching of classes on a div to make a form of a looping concept. I am thinking this code is not that far away, but don’t want to miss the good advice I usually get here. Thanks

https://jsfiddle.net/pctechtv/cb83x5kv/

3

Looks to me like you have many times as much code as you need to create a marquee.

See http://www.felgall.com/jstip109.htm for one I wrote several years ago - could probably make the code significantly smaller now by using some of the newer JavaScript commands.

4

Your fiddle doesn’t seem to work…? Anyway, I’d suggest to use CSS animations for this, which is usually much more performant (you can even take advantage of hardware acceleration). Then you only have to apply a certain animation class to your marquee when the CTA is clicked, such as e.g.

.marquee {
  position: absolute;
  display: none;
}

.marquee.left2right {
  display: block;
  animation: left2right 3s linear infinite;
}

@keyframes left2right {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(100%, 0);
  }
}

… thus keeping your JS to a minimum. Here’s a pen:

1 Like
5

Thanks that is super helpful. I have been reading about the CSS animations being a good option. Strategizing a solution now. I will post back. Thanks

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.