Skip to main content

Here is another fun little HTML/CSS idea for all of you.

A rotating text barrel.

OK - maybe there is another name for this but I am going with the barrel.

Here is the code needed to pull this off.
As always - test with your platform for conflicts and let me know about any bugs with this

CSS for Branding and Look area
 

/** Rotating Text Barrel **/

/** This block will help set the color and dimensions of your widget **/
#barrel {
  background: #000000;
  height: 100px;
  width:100%;
  position: absolute;
}

/** This block will allow you to adjust **/
/** your positioning of the barrel **/
/** Set all values as desired **/
#barrelBox {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}

/** This block will set parameters on the static text **/
.flipSign h3 {
  height: 30px;
  float: left;
  margin-right: 5px;
  color: #ffffff;
}

/** This block has general settings for the moving text **/
.barrelText {
  float: left;
  overflow: hidden;
  position: relative;
  height: 25px;
  top: 0px;
}

/** This block has settings specific to the moving text **/
/** Adjust animation timing as desired **/
.barrelText h3 {
  display: inline-block;
  color: #00ff00;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 3;
  animation:move 10s;
  animation-iteration-count:infinite;
  animation-delay:1.5s;
}

/** This block provides the timing of the animation **/
/** If you want more or less words, **/
/** you'll need to adjust the segmentation of this **/
/** Adjust the pixel values to suit your desired font size **/
@keyframes move{
0%  { top: 0px; }
20% { top: -24px; }
40% { top: -48px; }
60% { top: -72px; }
80% { top: -96px; }
100% { top: -120px; }
}

HTML for your widget

<div id="barrel" class="flipSign">
  <div id="barrelBox">
    <h3>Learning is</h3>
    <div class="barrelText">
<!-- Adjust your words as desired -->
<!-- Adjust your font size as desired -->
<!-- If you change font size you will need -->
<!-- to make other adjustments in CSS -->
      <h3>
        fun<br /> 
        important<br />
        invigorating<br />
        uplifting<br />
        life<br />
        fun
      </h3>
    </div>
  </div>
</div>

Hopefully this makes someone smile today!

Nicely done as always - looks great, just throwing out there for those who are interested in similar effect, you could just do an animated gif and not need to worry about all the code updates on this one :)

(Just make sure to add alt text to the image to cover the accessibility.)

Hi - is there a way to make this a clickable widget? 

@Kelly 

You can add different links to the words as they scroll up.

For example - you could modify the word fun in the list above like so…

<a href="https://www.docebo.com">fun</a><br />

You might also want to tweak the CSS to your liking as adding links will change the look of the text.

Also - remember to add the link to the last word in the list if you add one to the first in the list as they wrap around.

@gstager This is looking great, thanks so much. I am struggling with the enlarging of the font - any tips? 

@Kelly - You can add an inline style to the HTML to tweak the size.

If you alter the size significantly enough - it may require you to tweak some other parameters in the CSS so that the other words are masked properly.

<h3 style="font-size:24px;">

 

Reply


Terms & ConditionsCookie settings