Skip to content

Instantly share code, notes, and snippets.

@ZSX-JOJO

ZSX-JOJO/css-glitched-text.markdown

Created June 15, 2019 03:18
Show Gist options
  • Save ZSX-JOJO/cbc0a33a2f975f73864ec5981068d56e to your computer and use it in GitHub Desktop.
Save ZSX-JOJO/cbc0a33a2f975f73864ec5981068d56e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ZSX-JOJO created this gist Jun 15, 2019.
    7 changes: 7 additions & 0 deletions css-glitched-text.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS Glitched Text
    -----------------
    Pure CSS glitched, noisy, analog-y text.

    A [Pen](https://codepen.io/lbebber/pen/ypgql) by [Lucas Bebber](https://codepen.io/lbebber) on [CodePen](https://codepen.io).

    [License](https://codepen.io/lbebber/pen/ypgql/license).
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>

    <div class="glitch" data-text="GLITCH">GLITCH</div>
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    55 changes: 55 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    @import "compass/css3";

    body{
    background:black;
    font-family: 'Varela', sans-serif;
    }

    .glitch{
    color:white;
    font-size:100px;
    position:relative;
    width:400px;
    margin:0 auto;
    }
    @keyframes noise-anim{
    $steps:20;
    @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
    clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
    }
    }
    .glitch:after{
    content:attr(data-text);
    position:absolute;
    left:2px;
    text-shadow:-1px 0 red;
    top:0;
    color:white;
    background:black;
    overflow:hidden;
    clip:rect(0,900px,0,0);
    animation:noise-anim 2s infinite linear alternate-reverse;
    }

    @keyframes noise-anim-2{
    $steps:20;
    @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
    clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
    }
    }
    .glitch:before{
    content:attr(data-text);
    position:absolute;
    left:-2px;
    text-shadow:1px 0 blue;
    top:0;
    color:white;
    background:black;
    overflow:hidden;
    clip:rect(0,900px,0,0);
    animation:noise-anim-2 3s infinite linear alternate-reverse;
    }