Swipe Intro Text Effect with CSS & Javascript



A simple swipe in intro text effect/animation for your page titles or whatever you choose to use it for. Go crazy!

A Minimal Swiperoo

An HTML ID, a few lines of CSS and JS is all that's needed to create the effect.

HTML

<h1 id="swiperoo">Swiperoo!</h1>

CSS

#swiperoo {
  background-image: linear-gradient(to right, #000 50%, transparent 50%);
  background-position: 100%;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  -webkit-text-fill-color: transparent;
}

#swiperoo.swipe {
  -webkit-transition: all .7s cubic-bezier(0, 0, 0.5, 1);
  transition: all .7s cubic-bezier(0, 0, 0.5, 1);
  background-position: 0;
}

JAVASCRIPT

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("swiperoo").classList.add("swipe");
});

A Fully Styled Swiperoo Example With Google Fonts

Here is a full HTML page example with a fancy font and using font-size: 12vw; to scale the text when on different screen sizes.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Swiperoo</title>
  <link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet" rel="preconnect">

  <style>
    body {
      background: #0a0a0a;
      font-family: 'Sigmar One', cursive;
    }

    .container {
      padding-top: 5rem;
      text-align: center;
    }

    #swiperoo {
      background-image: linear-gradient(to right, #fff 50%, transparent 50%);
      background-position: 100%;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      -webkit-text-fill-color: transparent;
      font-size: 12vw;
    }

    #swiperoo.swipe {
      -webkit-transition: all .7s cubic-bezier(0, 0, 0.5, 1);
      transition: all .7s cubic-bezier(0, 0, 0.5, 1);
      background-position: 0;
    }
  </style>

</head>

<body>

  <div class="container">
    <h1 id="swiperoo">Swiperoo!</h1>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      setTimeout(function () {
        document.getElementById("swiperoo").classList.add("swipe");
      }, 500);
    });
  </script>

</body>

</html>

Thanks for reading. x

Resources