CODEWITHSUNDEEP
javascriptjquerycsscss-animations
thesowismine
thesowismine

Reputation: 930

Get a marquee to begin repeating as soon as space is available

Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better:

.userAttributes > .attributeGroup > .favoriteArtistsAttr {
  max-width: 74%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { text-indent: 0; }
  100% { text-indent: -100%; }
}

I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part works already).

I found this example that accomplishes what I want to achieve. I noticed that they are doing so by duplicating the content, however I've been unable to get this to work correctly. I also wonder if this is the best way to achieve my goal, maybe it would be better to use javascript or some jquery plugin? I want to make sure that it works and looks the same on all browsers (within reason)

Upvotes: 2

Views: 2880

Answers (1)

Aaron Lavers
Aaron Lavers

Reputation: 986

I've updated your originally linked example fiddle with your 'genres' heading: http://codepen.io/anon/pen/oxEPeZ

What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:

The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.

Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.

After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.

So now, our markup for just the Genre section looks like this:

<div class="title">
    Genres:
</div>

<div class="marquee">
  <div>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
  </div>
</div>

I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags). Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.

I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.

Upvotes: 4

Related Questions