Scrolling Announcement Bar

PHOTO

Tue Dec 28 2021 14:20:32 GMT+0000 (UTC)

Saved by @jackie #announcement #bar #scrolling #underline #link-text

.sqs-announcement-bar {

  overflow: hidden;

}

.sqs-announcement-bar-text {

  -moz-transform: translateX(100%);

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  -moz-animation: scroll 15s linear infinite;

  -webkit-animation: scroll 15s linear infinite;

  animation: scroll 15s linear infinite;

}

@-moz-keyframes scroll {

  from { -moz-transform: translateX(100%); }

  to { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll {

  from { -webkit-transform: translateX(100%); }

  to { -webkit-transform: translateX(-100%); }

}

@keyframes scroll {

  from {

    -moz-transform: translateX(100%);

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  to {

    -moz-transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

}

.sqs-announcement-bar-close {display:none}

.sqs-announcement-bar-text a {
    text-decoration: none !important;
}

COPY

Makes marketing announcement bar at top of page scroll. Last but one line removes x to close the bar. Last line removes underline on hyperlink text.

https://insidethesquare.co/squarespace-tutorials/scrolling-announcement-bar

Save snippets that work from anywhere online with our extensions

Comments

SquareSpace Styling

@jackie

Remove Underline from Links in Header Button to Underline on Hover Custom Bullets Custom Bullets Announcement Bar padding Tooltip Tooltip - Styling Scrolling Announcement Bar Copyright date automatic Image Block - Button Size Add colour block behind text Custom Highlight Behind Text Use Two Different Fonts On One Line Vertical Text Creates a 'Sticky' Scroll effect with sections Low Highlight on Text Colour Animated Announcement Bar Split Screen Sections (not mobile)

#announcement #bar #animation #colour

Colour Animated Announcement Bar

// Color Animated Announcement Bar //

[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: linear-gradient(99deg,#0d7d88,#708090,#add8e6);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}

// Animation Keyframes - Do Not Edit or Delete //

@-webkit-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-webkit-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

#announcement #bar #scrolling #underline #link-text

Scrolling Announcement Bar

.sqs-announcement-bar {

  overflow: hidden;

}

.sqs-announcement-bar-text {

  -moz-transform: translateX(100%);

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  -moz-animation: scroll 15s linear infinite;

  -webkit-animation: scroll 15s linear infinite;

  animation: scroll 15s linear infinite;

}

@-moz-keyframes scroll {

  from { -moz-transform: translateX(100%); }

  to { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll {

  from { -webkit-transform: translateX(100%); }

  to { -webkit-transform: translateX(-100%); }

}

@keyframes scroll {

  from {

    -moz-transform: translateX(100%);

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  to {

    -moz-transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

}

.sqs-announcement-bar-close {display:none}

.sqs-announcement-bar-text a {
    text-decoration: none !important;
}

#announcement #bar #padding

Announcement Bar padding

.sqs-announcement-bar {
  padding: 10px;
}

#squarespace #button #hover #underline

Button to Underline on Hover

//Small Button//
.sqs-block-button-element--small {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--small:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--small:hover:before{ transition-delay: .2s; }.sqs-block-button-element--small:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--small:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--small:before { border-bottom: 2px solid #000000;}

//Medium Button//
.sqs-block-button-element--medium {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--medium:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--medium:hover:before{ transition-delay: .2s; }.sqs-block-button-element--medium:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--medium:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--medium:before { border-bottom: 2px solid #000000;}

//Large Button//
.sqs-block-button-element--large {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--large:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--large:hover:before{ transition-delay: .2s; }.sqs-block-button-element--large:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--large:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--large:before { border-bottom: 2px solid #000000;}

Scrolling Announcement Bar

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Scrolling Announcement Bar

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Embed code snippet