SHARE
TWEET

Untitled

a guest Oct 19th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  @import url('https://fonts.googleapis.com/css?family=Montserrat:100');
  2.  
  3.  
  4. html, body, h1 {
  5.     padding: 0;
  6.     margin: 0;
  7.     font-family: 'Montserrat', sans-serif;
  8. }
  9.  
  10. #app {
  11.     background: rgb(10,10,10);
  12.     height: 100vh;
  13.     width: 100%;
  14.     margin: 0;
  15.     padding: 0;
  16.     display: flex;
  17. }
  18.  
  19. #wrapper {
  20.      text-align: center;
  21. }
  22.  
  23. .sub {
  24.     color: rgb(100,220,220);
  25.     letter-spacing: 1em;
  26. }
  27.  
  28. @mixin glitchCopy {
  29.         content: attr(data-text);
  30.         position: absolute;
  31.         top: 0;
  32.         left: 0;
  33.         width: 100%;
  34.         height: 100%;
  35. }
  36.  
  37. .glitch {
  38.     position: relative;
  39.     color: white;
  40.     font-size: 4em;
  41.     letter-spacing: .5em;
  42.     /* Animation provies a slight random skew. Check bottom of doc
  43.     for more information on how to random skew. */
  44.     animation: glitch-skew 1s infinite linear alternate-reverse;
  45.    
  46.     &::before{
  47.         // Duplicates our text with the mixin.
  48.         @include glitchCopy;
  49.         // Scoots text slightly to the left for the color offset.
  50.         left: 2px;
  51.         // Creates the color 'shadow' that happens on the glitch.
  52.         text-shadow: -2px 0 #ff00c1;
  53.         /* Creates an initial clip for our glitch. This works in
  54.         a typical top,right,bottom,left fashion and creates a mask
  55.         to only show a certain part of the glitch at a time. */
  56.         clip: rect(44px, 450px, 56px, 0);
  57.         /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
  58.         with an alternating animation to keep things fresh. */
  59.         animation: glitch-anim 5s infinite linear alternate-reverse;
  60.     }
  61.    
  62.     &::after {
  63.         @include glitchCopy;
  64.         left: -2px;
  65.         text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  66.         animation: glitch-anim2 1s infinite linear alternate-reverse;
  67.     }
  68. }
  69.  
  70. @keyframes glitch-anim {
  71.   $steps: 20;
  72.   @for $i from 0 through $steps {
  73.     #{percentage($i*(1/$steps))} {
  74.       clip: rect(random(100)+px, 9999px, random(100)+px, 0);
  75.             transform: skew((random(100) / 100) + deg);
  76.     }
  77.   }
  78. }
  79.  
  80. @keyframes glitch-anim2 {
  81.   $steps: 20;
  82.   @for $i from 0 through $steps {
  83.     #{percentage($i*(1/$steps))} {
  84.       clip: rect(random(100)+px, 9999px, random(100)+px, 0);
  85.             transform: skew((random(100) / 100) + deg);
  86.     }
  87.   }
  88. }
  89.  
  90. @keyframes glitch-skew {
  91.   $steps: 10;
  92.   @for $i from 0 through $steps {
  93.     #{percentage($i*(1/$steps))} {
  94.       transform: skew((random(10) - 5) + deg);
  95.     }
  96.   }
  97. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top