How to make header menu heading text blinking.

Solved

How to make header menu heading text blinking.

rzwahmed
Shopify Partner
14 0 3

issue: How to make header menu heading text blinking.

theme: sense

URL: https://theaairascloset.com/

see attached

Accepted Solutions (2)

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

This is the code you are looking for:

@keyframes flashing {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flashing text {
  animation: flashing 1s infinite;
  transition: opacity 0.3s ease-in-out;
}

 Basically we play with the opacity of the text, add a smooth effect with 'ease-in-out', and set the 'infinite' attribute to make it play in a loop.

Add the 'flashing-text' class to the container you want the effect to have.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

I understand. Here you have the step by step:

 

1ºAdd this code in your theme.liquid:

 

<script>
document.addEventListener("DOMContentLoaded", function() {
  var saleElement = document.querySelector('a.header__menu-item.list-menu__item.link.link--text.focus-inset span:contains("SALE")');

  saleElement.classList.add('flashing-text');
});
</script>

 

 2º Add this code in your base.css:

 

@keyframes flashing {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flashing text {
  animation: flashing 1s infinite;
  transition: opacity 0.3s ease-in-out;
}

 

 I hope it helped you!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 7 (7)

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

This is the code you are looking for:

@keyframes flashing {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flashing text {
  animation: flashing 1s infinite;
  transition: opacity 0.3s ease-in-out;
}

 Basically we play with the opacity of the text, add a smooth effect with 'ease-in-out', and set the 'infinite' attribute to make it play in a loop.

Add the 'flashing-text' class to the container you want the effect to have.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
rzwahmed
Shopify Partner
14 0 3

1- what its mean? 

"Add the 'flashing-text' class to the container you want the effect to have." 

pl share complete code , - i want to make SALE tab blinking

2- where to paste this code?

 
 
 

"

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

I understand. Here you have the step by step:

 

1ºAdd this code in your theme.liquid:

 

<script>
document.addEventListener("DOMContentLoaded", function() {
  var saleElement = document.querySelector('a.header__menu-item.list-menu__item.link.link--text.focus-inset span:contains("SALE")');

  saleElement.classList.add('flashing-text');
});
</script>

 

 2º Add this code in your base.css:

 

@keyframes flashing {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flashing text {
  animation: flashing 1s infinite;
  transition: opacity 0.3s ease-in-out;
}

 

 I hope it helped you!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
rzwahmed
Shopify Partner
14 0 3

code pasted 

but still no blinking

also see attached video.

 

 

1.png2.png

Spac-es
Shopify Partner
389 112 135

I just saw the error. My fault. In the base.css make sure the class is written like this:

.flashing-text

Result:

@keyframes flashing {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flashing-text {
  animation: flashing 1s infinite;
  transition: opacity 0.3s ease-in-out;
}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
389 112 135

By the way, if you use translations on your website, the script will not work, because it only takes into account when the text is 'SALE'.

 

You can add this instead:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var saleElement = document.querySelector('a.header__menu-item.list-menu__item.link.link--text.focus-inset[href="/collections/sale"]');
    
    if (saleElement) {
      saleElement.classList.add('flashing-text');
    }
  });
</script>

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
outgearsfitness
Visitor
1 0 0

Hello. Thank you for insight. I am using this on Refresh Theme 12.0. and i can't seem to make it work. can you please guide. my site is outgearsfitness.com