How do I add a sliding announcement bar

Site URL: https://mandarin-synthesizer-j5g7.squarespace.com/

Hello, 

I would like to add a slideshow effect to the announcement bar. For example one frame would say 'call us on xxxxxxx' and then the next frame would say 'or email us at xxxxx'.

Is this possible? and if so how would I find the css code for it? 

Many thanks for your help. 

Kelly

Have you found the solution yet?

My idea is create Summary Block or Gallery Block in Footer, then share url again, we will give the code to move it to announcement bar.

On 9/3/2020 at 10:50 AM, tuanphan said:

Have you found the solution yet?

My idea is create Summary Block or Gallery Block in Footer, then share url again, we will give the code to move it to announcement bar.

Thank you. 

This has been updated by adding a summary block and here is the url https://mandarin-synthesizer-j5g7.squarespace.com/config/

Many thanks for your help 🙂

Kelly

On 9/8/2020 at 7:40 PM, KellyHeard said:

Thank you. 

This has been updated by adding a summary block and here is the url https://mandarin-synthesizer-j5g7.squarespace.com/config/

 

Many thanks for your help 🙂

Kelly

Hi, no need to use summary block.

I just code this code, you can use, free.

On 9/10/2020 at 11:19 PM, tuanphan said:

Hi, no need to use summary block.

I just code this code, you can use, free.

Hi @tuanphan, I'd love to please grab this code if you still have it available? 🙂

Looking for a solution similar to https://www.khayni.com/

Thanks so much!

Nicole

17 hours ago, JanuaryMade said:

Hi @tuanphan, I'd love to please grab this code if you still have it available? 🙂

Looking for a solution similar to https://www.khayni.com/

Thanks so much!

 

Nicole

My site is expired.

You mean top bar of example site?

2 hours ago, tuanphan said:

My site is expired.

You mean top bar of example site?

Yes please 🙂 that's the one

On 7/5/2022 at 9:37 AM, JanuaryMade said:

Yes please 🙂 that's the one

First, choose effect from these examples

• https://codepen.io/nathantaylor/pen/WowbBE
• https://codepen.io/joseflores8082/pen/XbEgme
• https://codepen.io/Supha/pen/OQvLEj
• https://codepen.io/nathantaylor/pen/WowbBE
• https://codepen.io/search/pens?q=text+slide
• https://codepen.io/search/pens?q=text+carousel

Next, let me know. We will convert it to Squarespace

Next, you will add a Code Block in Footer & add Codepen Code

Next, we will use code to move Code Block into Announcement Bar.

13 hours ago, tuanphan said:

First, choose effect from these examples

• https://codepen.io/nathantaylor/pen/WowbBE
• https://codepen.io/joseflores8082/pen/XbEgme
• https://codepen.io/Supha/pen/OQvLEj
• https://codepen.io/nathantaylor/pen/WowbBE
• https://codepen.io/search/pens?q=text+slide
• https://codepen.io/search/pens?q=text+carousel

Next, let me know. We will convert it to Squarespace

Next, you will add a Code Block in Footer & add Codepen Code

Next, we will use code to move Code Block into Announcement Bar.

How exciting! Thank you so much! Would something like this work? https://codepen.io/cassidoo/pen/MyaWzp

11 hours ago, JanuaryMade said:

How exciting! Thank you so much! Would something like this work? https://codepen.io/cassidoo/pen/MyaWzp

First, enable Announcement Bar

Next, add a Code Block in Footer > Paste this code

<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim1">
          <div class="quote">Hello, this is a quote from a person.</div>
          <div class="source">- Person</div>
        </li>
        <li class="anim2">
          <div class="quote">Hello, this is a quote from another person.</div>
          <div class="source">- Another person</div>
        </li>
        <li class="anim3">
          <div class="quote">Hello, this is a quote from an animal.</div>
          <div class="source">- Animal</div>
        </li>
        <li class="anim4">
          <div class="quote">Hello, this is a quote from a plant.</div>
          <div class="source">- Plant</div>
        </li>
        <li class="anim5">
          <div class="quote">How do ya like that.</div>
          <div class="source">- Cassidy</div>
        </li>
      </ul>
    </div>
  </div>
</div>
<style>
.content-slider {
  width: 100%;
  height: 360px;
}

.slider {
  height: 320px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 320px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 680px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 40px;
  font-style: italic;
}

.slider .source {
  font-size: 20px;
  text-align: right;
}

.slider li.anim1 {
  animation: cycle 15s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 15s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
</style>

Next, add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('footer.sections .code-block').appendTo('#announcement-bar-text-inner-id');
	});
</script>
<style>
.sqs-announcement-bar {
    background-color: white;
}
.content-slider {
    max-height: 100px;
}
.slider {
    height: 100% !important;
    margin-top: 0 !important;
}
.mask {
    height: 100% !important;
    display: flex;
    align-items: center;
}
footer.sections .code-block {
    padding: 0;
}
#announcement-bar-text-inner-id p {
    display: none;
}
</style>