XF 2.0 Glitch Text Logo acting funny

iamjudd

Well-known member
Not sure what I need to fix exactly but the text should just seem like it's glitching but this is how it looks:
Uzx21zp.gif


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

xenfocus_theme.less:
Code:
.focus-logo{
    font-weight: bold;
}

extra.less:
Code:
.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);
    }
}
 

Ehren

Well-known member
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:
CSS:
.glitch:before{
    right: -8px;
}
.glitch:after{
    right: -4px;
}
 

iamjudd

Well-known member
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:
CSS:
.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

Well-known member
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.
 
Top