XF 2.0 Glitch Text Logo acting funny

[iamjudd]

Not sure what I need to fix exactly but the text should just seem like it's glitching but this is how it looks:

PAGE_CONTAINER:

<h3 class="glitch">
                                <span class='focus-logo'>
                                {{property('xenfocus_logoText')}}
                                    </span>
                            </h3>

xenfocus_theme.less:

.focus-logo{
    font-weight: bold;
}

extra.less:

.glitch{
    position: relative;
    top: 40%;
    margin: 0 auto;
    color: #fff;
    font-size: 20px;
    font-family: verdana;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
.glitch:before, .glitch:after{
    content: 'CAYDESHOT';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: #4e3273;
    color: #fff;
}
.glitch:before{
    left: 8px;
    text-shadow: 2px 0 #00ffea;
    animation: effect 3s infinite linear;
}
.glitch:after{
    left: 4px;
    text-shadow: 2px 0 #fe3a7f;
    animation: effect 2s infinite linear;
}
@-webkit-keyframes effect{
    0%{
        clip:rect(55px,9999px,56px,0);
    }
    5%{
        clip:rect(47px,9999px,30px,0);
    }
    10%{
        clip:rect(33px,9999px,36px,0);
    }
    15%{
        clip:rect(35px,9999px,9px,0);
    }
    20%{
        clip:rect(63px,9999px,59px,0);
    }
    25%{
        clip:rect(96px,9999px,98px,0);
    }
    30%{
        clip:rect(48px,9999px,77px,0);
    }
    35%{
        clip:rect(50px,9999px,34px,0);
    }
    40%{
        clip:rect(60px,9999px,72px,0);
    }
    45%{
        clip:rect(10px,9999px,81px,0);
    }
    50%{
        clip:rect(2px,9999px,60px,0);
    }
    55%{
        clip:rect(23px,9999px,89px,0);
    }
    60%{
        clip:rect(76px,9999px,91px,0);
    }
    65%{
        clip:rect(62px,9999px,30px,0);
    }
    70%{
        clip:rect(60px,9999px,73px,0);
    }
    75%{
        clip:rect(60px,9999px,87px,0);
    }
    80%{
        clip:rect(2px,9999px,14px,0);
    }
    85%{
        clip:rect(28px,9999px,87px,0);
    }
    90%{
        clip:rect(73px,9999px,50px,0);
    }
    95%{
        clip:rect(79px,9999px,70px,0);
    }
    100%{
        clip:rect(17px,9999px,79px,0);
    }
}

 

[iamjudd]

still trying to figure this out

 

[Ehren]

Without seeing a live version, it's a little difficult to diagnose. But I imagine it's because you've offset the pseudo element by 4px and 8px but you haven't catered for the right side by using -4px and -8px respectively, which causes the text to wrap.

See if this helps:

.glitch:before{
    right: -8px;
}
.glitch:after{
    right: -4px;
}

 

[iamjudd]

Without seeing a live version, it's a little difficult to diagnose. But I imagine it's because you've offset the pseudo element by 4px and 8px but you haven't catered for the right side by using -4px and -8px respectively, which causes the text to wrap.

See if this helps:

.glitch:before{
    right: -8px;
}
.glitch:after{
    right: -4px;
}

This helped a little bit, made this live so you can see
https://caydeshot.com/

I'm wondering if there is a better way to do the glitch animation

 

[Ehren]

This helped a little bit, made this live so you can see

I'm currently unable to access your site

Hmm. We’re having trouble finding that site.

We can’t connect to the server at caydeshot.com.

 

[iamjudd]

I'm currently unable to access your site

Odd, loads fine for me from multiple locations

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Ehren]

Odd, your site loads fine for me on 4G however it’s responding with Server Not Found whenever I’m on WiFi. I don’t have this issue with any other sites.

 

[iamjudd]

Odd, your site loads fine for me on 4G however it’s responding with Server Not Found whenever I’m on WiFi. I don’t have this issue with any other sites.

As another test can you load this site?
https://ijgwpodcast.com/

(On my same server)

 

[Ehren]

Same issue with that site:



Using 4G works fine.

 

[Paul B]

Most likely a routing issue.

Use tracert to identify where it's failing.

 

[iamjudd]

So back onto the logo thing with @Ehren suggestion it's getting better: