Rotating Text Barrel - Animation Idea #11

  • 5 August 2022
  • 1 reply
  • 93 views

Userlevel 7
Badge +5

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!


1 reply

Userlevel 7
Badge +3

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.)

Reply