How to make header menu heading text blinking.

[rzwahmed]

issue: How to make header menu heading text blinking.

theme: sense

URL: https://theaairascloset.com/

see attached

[Spac-es · 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.

[Spac-es · 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.

[rzwahmed]

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?

Accept as Solution

0

Report

"

[Spac-es · 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!

[rzwahmed]

code pasted 

but still no blinking

also see attached video.

[Spac-es]

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;
}

[Spac-es]

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>

[outgearsfitness]

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