<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Marcellus+SC" rel="stylesheet">
    <title>Document</title>
</head>
<body>

    <div class="svs-glitch">
          <div class="svs-glitch-text">
                <span class="svs-glitch-text-first">Everything</span>
                <span class="svs-glitch-text-second">False</span>
          </div>
      </div>
</body>
</html>
 html, body{
        margin: 0;
        overflow: hidden;
        font-family: 'Zilla Slab Highlight', cursive;
        font-size: 200px;
        animation: animate 4s ;
    }

    .svs-glitch-text{
          position: relative;
          padding-top: 10%;
          z-index: 10;
    }

    .svs-glitch-text-second{
          padding-left: 40%;
          animation: animate 2s infinite;
          font-size: 400px;
    }

    .svs-glitch{
        position: relative;
        width: 100vw;
        height: 100vh;
        background-image: url('https://images.pexels.com/photos/315191/pexels-photo-315191.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1362&w=2048');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .svs-glitch:before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('https://images.pexels.com/photos/315191/pexels-photo-315191.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1362&w=2048');
      background-size: cover;
      opacity: 0.8;
      animation: animate .6s infinite;
    }

@keyframes animate {
      0% {
            background-position: 0 0;
            filter: saturate(8);
            filter: hue-rotate(50deg);
      }
      10% {
            background-position: 14px 0;
            filter: saturate(4);
            transform: translateX(50px);
      }
      20% {
            background-position: -4px 0;
            filter: grayscale(100%);
            transform: translateY(425px);
      }
      30% {
            background-position: 12px 20px;
            transform: translateY(145px);
      }
      40% {
            background-position: -16px 0;
            transform: translateY(-245px);
            
      }
      50% {
            background-position: -24px 0;
            filter: blur(15px);
            transform: translateY(445px);
      }
      60% {
            background-position: -42px 0;
            filter: grayscale(100%);
            transform: translateY(45px);
      }
      70% {
            background-position: 10 22px;
            transform: translateX(45px);
      }
      80% {
            background-position: -60px -10px;
      }
      100% {
            background-position: 0 0;
            filter: saturate(24);
      }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.