Front-End Journal #02 — CSS Glitch Effects

Paula Vaz — Sun, 09 Aug 2020 16:12:24 +0000

This time, after a chat with a friend about a website that uses beautiful glitch effects, I decided to try to play with it aiming to explore how to create similar results utilizing only HTML and CSS. It’s a pleasure to share my journey with you.

Fist of all, our HTML couldn’t be more simple, it’s just an h1:

<body>
  <h1>we are not equally present in all parts of ourselves</h1>
</body>

The key point

These days, I discovered how to play with pseudo-elements and this idea is particularly helpful to create our effect.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
$width: 800px;
$height: 280px;

body {
  background-color: black;
  color: white;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  width: $width;
  height: $height;

  &::before,
  &::after {
    content: 'we are not equally present in all parts of ourselves';
    display: block;
    position: absolute;
    top: 0;
  }

  &::before {
    color: rgba(122, 180, 255, 1);
    z-index: -1;
  }

  &::after {
    color: rgba(123, 91, 217, 1);
    z-index: -2;
  }
}

In lines 1 to 20, I just did the base style of our body and our h1 (positioning, font style, background color, etc).

The logic between lines 22 and 39 is our essential point. I created two pseudo-elements: :before and :after. These two elements are two copies of the h1, and the rules display: block, position: absolute and top: 0 guarantees the correct positioning perfectly behind the principal h1. Finally, I modified the text color of each pseudo-element.

Glitch Effect

I produced the glitch effect using the idea of clip.
The clip CSS property defines a visible portion of an element.

Formal syntax:

clip: rect(<top> <right> <bottom> <left>);

The and values are offsets from the inside top border edge of the box, while and are offsets from the inside left border edge of the box — that is, the extent of the padding box.

It’s important to say here that I used clip property because I just needed a simple rect, but if you want to do more complex clips, you can check the newer clip-path property instead.

To obtain the glitch effect, I simply created an animation, which is a for loop (this is why I used SCSS). In each interaction, I randomly selected two values and used them to create the clip. If you want to understand a little bit more about CSS animations, click here.

@keyframes glitch {
  $steps: 40;
  @for $step from 0 through $steps {
    #{percentage($step / $steps)} {
      $top: random($height);
      $bottom: random($height);
      @while $bottom < $top {
        $bottom: random($height);
      }
      clip: rect(#{$top}px $width #{$bottom}px 0);
    }
  }
}

Lastly, I attached the animation to the hover state of my pseudo-elements and added de left property so my pseudo-elements are displayed just when they’re on the hover state.

h1 {
  &:hover {
    &::before {
      animation: glitch 3s ease reverse infinite;
      left: 5px;
    }

    &::after {
      animation: glitch 3s ease infinite;
      left: -5px;
    }
  }
}

The result

You can see the complete code here. I hope you enjoyed it! ;)

Front-End Journal #01 — First steps with CSS Animations

Paula Vaz — Sat, 18 Jul 2020 19:51:04 +0000

I always wanted to have a tech blog, as a journal of my learnings and growth, but until now this idea seemed so far away from me because of my lack of self-confidence to share technology content with others, I always felt like I didn’t have anything innovative, attractive or even interesting to show. However, recently, I’ve been particularly inspired by my friends’ blogs, especially this one, by Alexandre Cisneiros, and I decided to just do it. I’ve been reading a lot about this and now I’m convinced that keeping a journal or a blog is not only about teaching something new frequently, but it’s also a matter of tracking my evolution as a programmer and become more self-confident about my skills, so I’m very excited to see what happens next.

CSS Animations

My strategy for maintaining a consistent writing routine will be to take baby steps, so I started building a simple CSS animation using only scales and translations. You can see the entire code below e then and I will explain a few concepts for a better understanding.

The basic HTML:

<body>
  <div class="wrapper">
    <div class="big-circle">
      <div class="small-circle"></div>
    </div>
  </div>
</body>

The CSS:

body {
  background: linear-gradient(90deg, rgba(122, 180,255,1) 0%, rgba(123,91,217,1) 100%);
}

.wrapper {
  margin-top: 200px;
}

.big-circle {
  animation: pulse 1.5s alternate infinite;
  margin: 0 auto;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255,255,.3);
}

.small-circle {
  position: relative;
  top: 50px;
  left: 50px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: white;
}

.small-circle:hover {
  animation: shake .1s alternate infinite;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes shake {
  0% {
    transform: translate(0%);
  }
  25%, 75% {
    transform: translateY(1%);
  }
  50%, 100% {
    transform: translateX(1%);
  }
}

And then, the beautiful result:

How it works

My focus here is to show you how these two animations work, pulse and shake, so the rest of the HTML and CSS can be the topic for another blog post.

According to MDN:
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

Let’s take a look at these two components.

Style describing the CSS animation

First of all, we have to set the style of our animation and this is what I did in these two lines.
Here:

animation: pulse 1.5s alternate infinite;

And here:

animation: shake .1s alternate infinite;

I chose the elements that I wanted to animate, in this case, the big circle and the small circle (in its hover state), and I used the shorthand version animation to configure the name, duration, direction, and iteration count of my animations.
However, I could write the complete version, as you can see below:

animation-name: pulse; // or shake
animation-duration: 1.5s; // or .1s
animation-direction: alternate;
animation-iteration-count: infinite;

These names are self-explained, but let's take a particular look in animation-direction, this property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. In this example, I used the alternate, which indicates that the animation reverses direction each cycle, with the first iteration being played forwards. You can check more here.

The keyframes

Ok, but where is our animation? I used the CSS @keyframes that controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. As you can see in the two animations, we can use from/to or percentages to set how many keyframes we need along the animation course.

Finally, I used the transform function with scale, translate, translateX and translateY to build the final animation, in which the entire object is always scaling in and out, and then, if the small circle is in the hover state, the shake animation is activated.

I hope you enjoyed it! ;)

DEV Community: Paula Vaz