Glitch effect in CSS

glitch-effect-in-css.markdown

Glitch effect in CSS

Glitch effect on hover, as seen on http://www.kikk.be/2016/. Shout out to @Dogstudio for this cool website!

A Pen by Thomas Aufresne on CodePen.

License.

index.html

<h1>Glitch effect in CSS</h1>
<div class="table">
    <div class="table-cell">
        <div>
            <a href="http://www.kikk.be/2016/" class="btn-link">
                <span class="link-inner">
                    On a button
                </span>
            </a>
        </div>
        <div>
            <a href="http://www.kikk.be/2016/" data-content="On plain text" class="text-link">
                On plain text
            </a>
        </div>
        <div>
            <a href="http://www.kikk.be/2016/" class="line-link">
                Or on a border
            </a>
        </div>
    </div>
</div>

script.js

// By https://twitter.com/thomAufresne

style.less

html,  {
    background-color: #fff;
    height: 100%;
}

body {
    position: relative;
    font-family: 'Noticia Text';
    text-align: center;
    background: linear-gradient(180deg,#281130 0,#0f0021);
    height: 100%;
    margin: 8px;
    min-height: 500px;
    
    &:before,
    &:after {
        content:'';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &:before {
        background-color: #00ffff;
        z-index: -1;
        animation: glitchy 0.3s ease 0.3s infinite;

    }

    &:after {
        background-color: #ff00ff;
        z-index: -2;
        animation: glitchy 0.3s ease infinite reverse;
    }
}

h1 {
    position: absolute;
    color: #fff;
    left: -100px;
    top: 50%;
    transform: rotate(-90deg);
    margin: -22px 0 0;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
    
    > div {
        padding: 45px 0;
    }
}

.btn-link {
    position: relative;
    display: inline-block;
    color: #281130;
    font-size: 24px;
    letter-spacing: 0.02em;
    text-decoration: none;
    z-index: 1;
    
    &:before,
    &:after {
        content:'';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &:before {
        background-color: #00ffff;
        z-index: -1;
    }

    &:after {
        background-color: #ff00ff;
        z-index: -2;
    }
    
    &:hover {
        .link-inner {
            animation: glitchy 0.3s ease 1;
        }

        &:before {
            animation: glitchy 0.3s ease 0.3s infinite;
        }
        
        &:after {
            animation: glitchy 0.3s ease infinite reverse;
        }
    }
}

.link-inner {
    display: block;
    height: 100%;
    background-color: #fff;
    padding: 15px 25px;
}

.text-link {
    position: relative;
    display: inline-block;
    font-size: 45px;
    text-decoration: none;
    color: #fff;
    z-index: 1;
    
    &:before,
    &:after {
        content:attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    &:before {
        color: #00ffff;
        z-index: -1;
    }

    &:after {
        color: #ff00ff;
        z-index: -2;
    }
    
    &:hover {
        &:before {
            animation: glitchy 0.3s ease 0.3s infinite;
        }
        
        &:after {
            animation: glitchy 0.3s ease infinite reverse;
        }
    }
}

.line-link {
    position: relative;
    display: inline-block;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 0.10em;
    color: #fff;
    font-weight: lighter;
    z-index: 1;
    border-bottom: 1px solid fade(#fff, 75%);
    padding-bottom: 10px;
    
    &:before,
    &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        visibility: hidden;
    }
    
    &:before {
        background-color: #00ffff;
        z-index: -1;
    }

    &:after {
        background-color: #ff00ff;
        z-index: -2;
    }
    
    &:hover {
        &:before {
            visibility: visible;
            animation: line-glitchy 0.3s ease 0.3s infinite;
        }
        
        &:after {
            visibility: visible;
            animation: line-glitchy 0.3s ease infinite reverse;
        }
    }
}

@keyframes glitchy {
    0%   {transform: translate(-2px, 2px);}
    25%  {transform: translate(-2px, -2px);}
    50%  {transform: translate(2px, 2px);}
    75%  {transform: translate(2px, -2px);}
    100%  {transform: translate(-2px, 2px);}
}

@keyframes line-glitchy {
    0%   {transform: translate(-1px, 1px);}
    25%  {transform: translate(-1px, -1px);}
    50%  {transform: translate(1px, 1px);}
    75%  {transform: translate(1px, -1px);}
    100%  {transform: translate(-1px, 1px);}
}