Glitch Text Animation on Header Text Home Page

[AbbyLaurenPrice]

Hi there! I am looking to get the following code pen glitch text look on the blue header text on my home page. It is just HTML & CSS (no JS), was wondering if someone could point me in the right direction of where to put the code to get this effect?

CodePen Glitch Animation Inspiration: https://codepen.io/cbanlawi/pen/xxRBeMY
My site URL: https://byabbylauren.com/

Would greatly appreciate any help or if you could point me in the right direction of how to accomplish this. Thanks in advance!!

[shadowsfall118]

@AbbyLaurenPrice You will need to edit header.liquid. Look for “

” around line 324.

Remove this block of code:

And replace with:

codepen
codepen
codepen

Then open base.css and add below CSS to the bottom of this file:

.glitch {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}

[AbbyLaurenPrice]

hi!! thank you so so much for getting back to me you are amazing - this worked!

however, it seems to have changed the logo to the glitch text, rather than the image slider main page text. playing around now to see how to transfer it to the “launch ecomm sites” text below on image slide.

any insight on how to move to that text below? and have it render on mobile as well? attaching images for reference

thanks in advance!!

[shadowsfall118]

@AbbyLaurenPrice to change the text from codepen, just replace “codepen” text with “launch ecomm sites” like below:

launch ecomm sites
launch ecomm sites
launch ecomm sites

I will look into the mobile aspect.

[shadowsfall118]

@AbbyLaurenPrice Where you inserted the code I gave you, look for “{%- if request.page_type == ‘index’ -%}” remove this and the code below it to the {%- endif -%}. Then replace with this code:

{%- if request.page_type == 'index' -%}
      # 
    {%- endif -%}
        
          
         

          launch ecomm sites
          launch ecomm sites
          launch ecomm sites
          

          
        
    {%- if request.page_type == 'index' -%}
      
    {%- endif -%}

The code should look like below:

Then the code in base.css replace:

.glitch {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

with:

.glitch {
  margin:0;
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

Play around with “font-size: 3rem;” to get the desired logo size.

[AbbyLaurenPrice]

this is amazing, it looks great!! and yes, if you are able to figure for mobile that would be awesome, just let me know thank you so much, can’t tell you how much i appreciate it!

[shadowsfall118]

@AbbyLaurenPrice I noticed its working for desktop but not for mobile as the code you added is not in proper order. If you would like it to show on both desktop and mobile, you will need to replace the block code you currently have.

Desktop:

Mobile:

Step 1:

    {%- endif -%}
--------------------------------

REMOVE ALL THE CODE YOU EDITED BETWEEN THE {%- endif -%} above and {%- if section.settings.menu != blank -%} BELOW

---------------------------------  
     {%- if section.settings.menu != blank -%}
      

Step 2 (option a - hardcode logo text) - Add below code where you removed code in step 1:

```markup
{%- if request.page_type == 'index' -%}
      # 
    {%- endif -%}
        
          
         

          abbylauren
          abbylauren
          abbylauren
          

          
        
    {%- if request.page_type == 'index' -%}
      
    {%- endif -%}

Step 2 (option b - use shop name text) - Add below code where you removed code in step 1:

{%- if request.page_type == 'index' -%}
      # 
    {%- endif -%}
        
          
         

          {{ shop.name }}
          {{ shop.name }}
          {{ shop.name }}
          

          
        
    {%- if request.page_type == 'index' -%}
      
    {%- endif -%}

Then it should work on both mobile and desktop.