Decrease visibility time of Announcement Bar message before transition

Solved

Decrease visibility time of Announcement Bar message before transition

luvlyandwilde
Visitor
2 0 0

I'm working with Clean Canvas' Symmetry theme and am looking to shorten the duration of time that any "announcement bar" message displays before it transitions into the next message, as it's currently static for too long IMO. Below is the .css code that applies to that announcement bar, but I can't seem to find a specification for how long it's visible. I can shorten / lengthen the transition time, but not the time it's visible. I'm not a serious coder by any means, but can find and adjust simple items. This one is puzzling me. Anyone know how to set a specific length of time that it's visible before the transition?

 

CSS Code:

 


.announcement-bar {
display: block;
position: relative;
z-index: 401; /* above header */
background-color: var(--bg-color);
background-image: var(--bg-gradient, none);
color: rgb(var(--text-color));
font-size: var(--smaller-text-size-1);
line-height: 1.4em;
}
.announcement-bar a {
color: rgb(var(--link-color));
text-decoration: none;
}
.announcement-bar a:hover {
text-decoration: none;
}
.announcement-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.announcement-bar:not(.announcement-bar--with-announcement) .announcement-bar__left {
flex: 0 0 auto;
}
.announcement-bar .social {
margin-top: -8px;
padding-top: 0.8em;
padding-bottom: 0.8em;
}
.announcement-bar .social a {
margin: 8px 0 0;
margin-inline-end: 10px;
transition: color 100ms ease;
}
.announcement-bar .custom-select__btn {
transition: color 100ms ease;
}

.announcement-bar__left {
flex: 2 0 0;
}

.announcement-bar__middle {
position: relative;
flex: 1 1 auto;
text-align: center;
}
@media (min-width: 768px) {
.announcement-bar__middle:not(:first-child):not(:last-child) {
max-width: 50%;
}
}

.announcement-bar__right {
flex: 2 0 0;
text-align: end;
}

.announcement-bar__announcements {
position: relative;
margin: 0.8em 0;
font-size: var(--announcement-font-size);
}

.announcement-bar__link > .announcement-bar__announcements {
padding: 0;
}

@media (min-width: 768px) and (max-width: 999.98px) {
.announcement-bar--tablet-wrap .container {
flex-wrap: wrap;
}
.announcement-bar--tablet-wrap .announcement-bar__left {
flex: 0 0 auto;
}
.announcement-bar--tablet-wrap .announcement-bar__middle {
flex: 1 0 100%;
order: -1;
max-width: none !important;
}
}
.announcement-bar__link {
display: inline-block;
padding-top: 0.8em;
padding-bottom: 0.8em;
}

.announcement {
display: flex;
align-items: center;
color: rgb(var(--text-color));
/*
the following style and the next line-height lower risk of bold text (which may be
taller than normal-weight text) causing a jumping container
*/
min-height: 1.4em;
}
.announcement p {
margin: 0;
}
.announcement a {
text-decoration: underline;
text-underline-offset: 1px;
text-decoration-color: rgb(var(--link-color)/0.6);
text-decoration-thickness: 1px;
}
.announcement a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--link-color));
}
.announcement .countdown {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.announcement .countdown:not([loaded]) {
visibility: hidden;
}
.announcement .countdown__grid {
--countdown-size: 1em;
}
.announcement .countdown__item:not(.countdown__item--is-0) {
--countdown-divider-width: calc(var(--countdown-size) / 2.4);
display: flex;
align-items: flex-start;
}
.announcement .countdown__unit {
direction: ltr;
align-self: flex-start;
margin-top: 0.14em;
margin-inline-start: 2px;
opacity: 0.5;
width: 1em;
font-size: calc(0.6 * var(--announcement-font-size));
line-height: 1;
letter-spacing: 2em;
-webkit-clip-path: polygon(0 -50%, 120% -50%, 120% 150%, 0 150%);
clip-path: polygon(0 -50%, 120% -50%, 120% 150%, 0 150%);
}

.announcement__text {
flex: 0 0 100%;
line-height: 1.3em;
transition: opacity 500ms ease-out 500ms, transform 700ms cubic-bezier(0.09, 0.49, 0.39, 0.99) 500ms;
}

.announcement--inactive {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: visibility 0s 300ms;
}
.announcement--inactive .announcement__text {
opacity: 0;
transform: translateY(8px);
transition: opacity 300ms ease-out 0s, transform 300ms ease-out 300ms;
}

.announcement-bar__announcement-controller {
position: absolute;
top: calc(100% - 4px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.announcement-bar__announcement-controller:not(:focus-within) {
height: 0;
overflow: hidden;
clip: rect(0 0 0 0);
}
.announcement-bar__announcement-controller .announcement-button {
background: var(--bg-color);
color: inherit;
}

.announcement-text-separation-box {
margin-inline-start: 0.5em;
padding: 2px 7px;
background: rgb(var(--text-color)/0.2);
border-radius: var(--btn-border-radius);
}

.announcement-text-separation-dash::before {
content: "–";
margin: 0 0.4em;
}

.announcement-text-separation-dot::before {
content: "·";
margin: 0 0.3em;
}

.announcement-text-separation-space {
margin-inline-start: 0.5em;
}

.announcement-bg {
transition: opacity 300ms ease;
transition: opacity 300ms ease 300ms;
opacity: 0;
}
.announcement-bg.is-active {
transition-delay: 0s;
opacity: 1;
}
.announcement-bg:not(:has(+ .announcement-bg)) {
transition-delay: 0s;
}

Accepted Solution (1)

Raj-webdesigner
Shopify Partner
324 76 78

This is an accepted solution.

Add This Script On Your This css Code Below.

 

<script>
const announcements = document.querySelectorAll('.announcement-bar__announcements');
let currentIndex = 0;
const displayDuration = 5000; // Current duration (5000 ms = 5 seconds)

function showNextAnnouncement() {
  announcements[currentIndex].classList.remove('is-active');
  currentIndex = (currentIndex + 1) % announcements.length;
  announcements[currentIndex].classList.add('is-active');
  setTimeout(showNextAnnouncement, displayDuration); // Change the duration here
}
setTimeout(showNextAnnouncement, displayDuration);
</script>

 

 I Think This Is work.

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 2 (2)

Raj-webdesigner
Shopify Partner
324 76 78

This is an accepted solution.

Add This Script On Your This css Code Below.

 

<script>
const announcements = document.querySelectorAll('.announcement-bar__announcements');
let currentIndex = 0;
const displayDuration = 5000; // Current duration (5000 ms = 5 seconds)

function showNextAnnouncement() {
  announcements[currentIndex].classList.remove('is-active');
  currentIndex = (currentIndex + 1) % announcements.length;
  announcements[currentIndex].classList.add('is-active');
  setTimeout(showNextAnnouncement, displayDuration); // Change the duration here
}
setTimeout(showNextAnnouncement, displayDuration);
</script>

 

 I Think This Is work.

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


luvlyandwilde
Visitor
2 0 0

Thanks!