Announcement Bar Marquee

  1. Enable your Announcement Bar — Marketing > Announcement Bar > Enable

  2. Add to Custom CSS

/* Removing the underline on link in the announcement bar */
.sqs-announcement-bar-text a{
  text-decoration: unset !important;
}

/* Remove left and right padding */
.sqs-announcement-bar-text{
  padding-left: 0px;
  padding-right: 0px;
}

/* Hiding anything that extends beyond the screen */
#announcement-bar-text-inner-id {
  margin: 0 auto;
  overflow: hidden;
}

/* Starting the text off of the screen and adjusting width, change the animation speed */
#announcement-bar-text-inner-id p {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 10s linear infinite;
}

/* Stopping the marquee on hover so people can click on links */
#announcement-bar-text-inner-id p:hover {
  animation-play-state: paused
}

/* Animation for Marquee */
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
Previous
Previous

Animated Gradient Text on Hover

Next
Next

Rollover Image on Hover