Create Glitch-Style Text Effects with HTML and CSS

Feb 6, 2015

Your Majesty, Amsterdam developer Hugo Wiledal and designer Sjoerd van Rijen teach us how to create glitch effects, originally written for Web Designer Mag.

The glitch effect

Hover over a menu link on Volkshotel.nl and you’ll notice how a ‘glitch’ effect is applied on rollover. We achieved this by dynamically generating multiple <span> elements just a few pixels thick, using them as masks to form a spliced link. Applying a random x-offset to the left or right positions of each <span> then forms the effect, as Hugo kindly demonstrates here.

Stack those spans

To illustrate this technique, our example simplifies the idea but crucially again uses stacked <span> elements. Instead we use just five with each assigned a background image positioned at intervals. The background image is our link text and is a transparent PNG of 145 pixels high. We divide this by five to get the height of each <span> and then set the ‘top’ positions at increments of this height. The span stack is then wrapped in a link.

  
<div>
    <a id="myLink" href="#">
        <span></span>
        <span style="top:29px; background-position: 0px -29px;"></span>
        <span style="top:58px; background-position: 0px -58px;"></span>
        <span style="top:87px; background-position: 0px -87px;"></span>
        <span style="top:116px; background-position: 0px -116px;"></span>
    </a>
</div>

<div>
    <a id="myLink" href="#">
  

Set the CSS

Our styling is simple, focused most on defining the <span> elements. They must be positioned ‘absolute’ to stack perfectly vertical and as empty, we set display to ‘block’ to adopt our set dimensions. We then attach the background image, make the overflow hidden so they function like the masks we require. Each is set to the required 29px high, stipulating the width as 100%. Here we've wrapped everything in a <div> container purely for page positioning:

  
div {
    position:relative;
    border:10px solid #0000FF;
    margin:20% auto;
    width:840px;
    height:145px;
}

span {
    position:absolute;
    display:block;
    background-image:url(text.png);
    background-repeat:no-repeat;
    overflow:hidden;
    height:29px; 
    width:100%;
}
  

Code called on rollover

The first part of our JavaScript, placed just before our closing </body> tag, is called when our link wrapper is rolled over (onmouseover). We get the element by the id ‘myLink’ and call our function. Here each of the spans is placed in an array, before a Boolean variable initializes as ‘true’ for left. We then loop the array, shifting each in left or right directions by a set amount of pixels, toggling the ‘left’ Boolean for the next pass left or right:

  
document.getElementById("myLink").onmouseover = function(){
    var spans = document.getElementsByTagName('span');
    pageVerticalPosition) + “px”;
    var left = true;
    for(var i = 0; i < spans.length; i++) {
        if(left){
            spans[i].style.left = "-3px";
        } else {
            spans[i].style.left = "3px";
        }
        left=!left;
    }
};
  

Code called on roll-off

The last part of our code is triggered on roll-off of our link (onmouseout). We grab the element id again as before and run a much smaller function this time. Looping the spans array once again, all we do is reset the left position to zero pixels and returning it back to normal – and that’s it.

  
document.getElementById("myLink").onmouseout = function() {
    var spans = document.getElementsByTagName('span');
    for(var i = 0; i < spans.length; i++) {
        spans[i].style.left = "0px";
    }
};
  

Simplify by splicing

Make no mistake, Your Majesty’s method for Volkshotel.nl is far more elegant and sophisticated. However our simplified effect can be enhanced by using more <span> elements thus splicing the link more thinly. Try experimenting with this and the left or right shift values to achieve more glitch-like results!