Add a glitch effect to your website
Give your site a bit of visual punch with an animated glitch that's easy to implement.
A great way to grab attention – and keep hold of it – is to create a website layout that showcases your talents from the off (a decent website builder can help with the build). Ukraine web agency Vintage's site is a great example of this, drawing you into its VR design portfolio with an eye-catching combination of a pulsating logo built from glass particles and a lovely bit of glitch that activates on hover.
A simple glitch effect used sparingly can give your site a vital little extra bit of visual interest, and it's surprisingly easy to implement. Here's how to do it.
Got a complex website in mind? Make sure your web hosting is up to the task. And keep your design files safe in cloud storage.
Download the files for this tutorial.
01. Add code to the body tag of your page
Creating a simple glitch effect can be done in so many different ways. Here we are going to do it by having an animated GIF over the top of the text, which will be turned on and off in the display. First up, add this code to the body tag of your page.
<div id="holder" onmouseover="glitch()">
<div id="glitch"></div>
WEB
<br> PRODUCT-
<br> ION
</div>
02. Styling the display
The content will use a specific typeface from Google Fonts called Work Sans. Grab the link from there and place it in your head section; then add the CSS to either style tags or a separate CSS file. The page is made black with white text and the holder is styled up for the text.
body {
background: #000;
font-family: 'Work Sans', sans-serif;
color: #fff;
}
#holder {
font-size: 6em;
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
}
03. Displaying the glitch
The glitch effect is going to be a background image that is placed directly over the top of the text. The important part here is that it is made invisible by reducing the opacity to zero so that it doesn't show up until the user interacts with the text.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
#glitch {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: url(glitch.gif);
opacity: 0;
}
04. Hold everything
Add script tags to the end of the body section and create a cached reference to the 'glitch' div in the document. Then a variable named 'over' is set to false. This will be turned on and off when the user moves over the text.
var gl = document.getElementById("glitch");
var over = false;
05. Running the glitch
The glitch function is called when the mouse moves over the text. If the glitch is not running then the glitch visibility is turned on and it is turned off after one and a half seconds. You can experiment with this and use a random number to make it more unpredictable.
function glitch() {
if (over == false) {
gl.style.opacity = "1";
setTimeout(function() {
normal();
}, 1500);
}
}
06. Back to normality
The glitch effect should not stay on as it would be too annoying to the user, but as an interactive element it works well. Here, the code resets the opacity back to zero so that it isn't visible over the top of the text.
function normal() {
gl.style.opacity = "0";
}
Get your ticket for Generate New York now
Three-day web design event Generate New York is back. Taking place between 25-27 April 2018, headline speakers include SuperFriendly’s Dan Mall, web animation consultant Val Head, full-stack JavaScript developer Wes Bos and more. There’s also a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.
This article was originally published in issue 270 of creative web design magazine Web Designer. Buy issue 270 here or subscribe to Web Designer here.
Related articles:
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.
Related articles
- The best Cyber Monday deals for 3D artists - get 40% off Autodesk, Adobe and Reallusion
- The 10 best Christmas animations everyone needs to watch: from Aardman, Netflix, Disney and more
- The stunning new WWF video used a really wild animation technique
- Here's how Aardman shot Apple HQ's towering Wallace and Gromit animation on an iPhone