mirror of
https://github.com/Aroy-Art/Aroy-Art-Site.git
synced 2024-12-30 20:24:23 +01:00
Compare commits
No commits in common. "3bce8b549afc6979e860f54bc5043b142c8d58e9" and "17a813debabc48e37efac884963c52e2498f179a" have entirely different histories.
3bce8b549a
...
17a813deba
1 changed files with 13 additions and 16 deletions
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: Cyberpunk-Style Glitch Text Walkthrough
|
title: Cyberpunk-Style Glitch Text Walkthrough
|
||||||
date: 2024-07-23T18:35:26.560Z
|
date: 2024-07-23T18:35:26.560Z
|
||||||
lastmod: 2024-07-26T17:49:19.234Z
|
lastmod: 2024-07-24T20:43:47.560Z
|
||||||
image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
|
image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
|
||||||
description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
|
description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
|
||||||
tags:
|
tags:
|
||||||
|
@ -27,7 +27,6 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
||||||
|
|
||||||
.post-single-content .demo {
|
.post-single-content .demo {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
margin: 0 20px 0 20px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -506,9 +505,18 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
# Walkthrough
|
# The Effect
|
||||||
|
|
||||||
This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
|
{{< details "The Effect (What we are going to make)">}}
|
||||||
|
<div class="hero-container">
|
||||||
|
<div class="environment"></div>
|
||||||
|
<h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
|
||||||
|
</div>
|
||||||
|
{{< /details >}}
|
||||||
|
|
||||||
|
## Walkthrough
|
||||||
|
|
||||||
|
This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible.
|
||||||
|
|
||||||
There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
|
There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
|
||||||
|
|
||||||
|
@ -525,17 +533,6 @@ There's a lot of pieces that go into an effect like this. What follows is an out
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## The Effect
|
|
||||||
|
|
||||||
This is how the complete effect looks like
|
|
||||||
|
|
||||||
{{< details "The Effect (What we are going to make)">}}
|
|
||||||
<div class="hero-container">
|
|
||||||
<div class="environment"></div>
|
|
||||||
<h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
|
|
||||||
</div>
|
|
||||||
{{< /details >}}
|
|
||||||
|
|
||||||
## Layers
|
## Layers
|
||||||
|
|
||||||
Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.
|
Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.
|
||||||
|
@ -574,7 +571,7 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
|
||||||
|
|
||||||
## Paths
|
## Paths
|
||||||
|
|
||||||
Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project)
|
Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
|
||||||
|
|
||||||
**Example Path:**
|
**Example Path:**
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue