404 Page with Flickering Light Text Effect
404 error pages are a necessary part of any website, but that doesn't mean they have to be boring. With a little creativity and the help of SVG and GSAP, you can create a 404 error page that is both informative and cool.
This tutorial will show you how to create a simple but creative 404 error page template in no time. The template will use SVG to create a basic layout and GSAP to add flickering light text effect animation.
This time I will focus on HTML (the SVG part) and mainly on CSS styles. Of course, we will touch on the JavaScript part as well, but as you will see in the following text, there, we've only written a small, simple function to locate our "target" text and create a "flickering light text" effect on it.
HTML Magic
The HTML part consists of several sections, all of which are contained within a single section serving as the main tutorial container. This section will have the class "error-demo", which we will later locate, target, and partially animate using our JavaScript code.
Within this section, we will create two "child" div elements. One will have the class "description", which will contain static text – static in the sense that it won't be animated in any way. The other div will have the class "error" and will contain an SVG element for the "404" message. Additionally, there will be a div with the class "error-message" that will contain the message "Page not found".
The section itself will have a background image, which, similarly, won't be integrated into our animation in any way.
1<section class="error-demo" style="background-image: url(assets/img/bcg.jpg);">
2 <div class="content">
3
4 <div class="description">
5 <!-- WITHOUT ANIMATION -->
6 </div>
7
8 <div class="error">
9 <!-- WITH ANIMATION -->
10 </div>
11 </div>
12</section>As I just mentioned, the part that will be of interest to us in this instance can be found within the div element with the class "error". For this reason, in the following code snippet, we will present the entire code that we will try to explain and understand together.
1<div class="error">
2 <svg version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
3
4 <defs>
5 <filter id="gemma">
6 <feMorphology operator="dilate" radius="0" in="SourceAlpha" result="BEVEL_10" />
7 <feOffset dx="0.5" dy="-1.5" in="BEVEL_10" result="BEVEL_20" />
8 <feComposite operator="out" in="BEVEL_10" in2="SourceGraphic" result="BEVEL_30" />
9 <feFlood flood-color="#333333" result="COLOR-glow" />
10 <feComposite in="COLOR-glow" in2="BEVEL_30" operator="in" result="BEVEL_40" />
11 <feMerge result="BEVEL_50">
12 <feMergeNode in="BEVEL_40" />
13 <feMergeNode in="SourceGraphic" />
14 </feMerge>
15 </filter>
16
17 <filter id="gemma-glow">
18 <feMorphology operator="dilate" radius="0" in="SourceAlpha" result="BEVEL_10" />
19 <feOffset dx="0.5" dy="-1.5" in="BEVEL_10" result="BEVEL_20" />
20 <feComposite operator="out" in="BEVEL_10" in2="SourceGraphic" result="BEVEL_30" />
21 <feFlood flood-color="#F62459" result="COLOR-glow" />
22 <feComposite in="COLOR-glow" in2="BEVEL_30" operator="in" result="BEVEL_40" />
23 <feMerge result="BEVEL_50">
24 <feMergeNode in="BEVEL_40" />
25 <feMergeNode in="SourceGraphic" />
26 </feMerge>
27 </filter>
28 </defs>
29
30 <g class="filtered">
31 <text x="52" y="72" font-family="Neoneon" text-anchor="middle" class="glow">404</text>
32 </g>
33
34 </svg>
35
36 <span class="error-message">Page not found</span>
37</div>This code is responsible for creating a unique error message with flickering light text effect, and we will break it down step by step to understand how it works.
1<div class="error">
2 <!-- ... -->
3</div>This is the outermost container for our error message. The class "error" is applied for styling purposes.
1<svg version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
2 <!-- ... -->
3</svg>An SVG (Scalable Vector Graphics) element is used to generate the visual effects. It defines the version, viewBox, and the way our text (further in the text, I will use the word "image") is preserved within the viewport.
Within the SVG, two filters are defined using the <filter> element:
Filter #1 - gemma
1<filter id="gemma">
2 <!-- Filter operations -->
3</filter>Filter #2 - gemma-glow
1<filter id="gemma-glow">
2 <!-- Filter operations -->
3</filter>These filters are used to apply various visual effects to elements within the SVG. The heart of this code lies within the filter operations. Both "gemma" and "gemma-glow" filters have the same operations:
feMorphology: This operation dilates the source image, which essentially expands it. The "radius" attribute controls the intensity of this dilation.feOffset: It offsets the source graphic, moving it slightly. The "dx" and "dy" attributes control the horizontal and vertical offset.feComposite: This operation combines two input "images" using various methods, including "out". It affects how the source "image" and filter "image" interact.feFlood: This operation floods the input "image" with a specified color, influencing its appearance.feMerge: This element merges the input "images", deciding how the various filter operations are combined.
1<g class="filtered">
2 <text x="52" y="72" font-family="Neoneon" text-anchor="middle" class="glow">404</text>
3</g>Within the SVG, a <g> element is used to group the elements together, and a text element is created with specific attributes. The x and y attributes define the coordinates (52, 72) for the text's position, while the font-family attribute sets the font to "Neoneon". Additionally, the text-anchor attribute is used to center the text horizontally, and the class "glow" is assigned to the text element.
1<span class="error-message">Page not found</span>This simple HTML span element contains the error message "Page not found" and is given the class "error-message" for styling.
The text "404" within the <text> element is what the filters are applied to. The "filtered" group element, which encapsulates the text, applies the filters "gemma" or "gemma-glow" to create the glowing effect. The filters control the dilation, offset, color flooding, and merging operations, ultimately resulting in the distinctive appearance of the "404" text.
In other words, this HTML and SVG code work together to make an error message look nice. The filters play a crucial role in generating the glowing effect on the "404" text, making sure the user sees the "page not found" message quickly.
Styling SVG Elements
In this part, we define CSS styles that are crucial for styling the SVG elements, creating an eye-catching error message. Let's break down the CSS code into important sections and explain each of them:
1body section.error-demo .content .error {
2 position: relative;
3 display: block;
4 width: 50%;
5 height: 100%;
6 overflow: visible;
7 float: left;
8}This CSS block defines styles for the main error container, including positioning, width adjustments, and responsiveness for different screen sizes.
1body section.error-demo .content .error svg {
2 background-color: transparent;
3 width: 100%;
4 height: 100%;
5 position: absolute;
6 display: block;
7 margin: auto;
8 top: 0;
9 right: 0;
10 bottom: 0;
11 left: 0;
12 overflow: visible;
13}Here, we style the SVG element, making sure it takes up the full viewport and maintains a responsive design. It is positioned absolutely, centered, and made visible.
1body section.error-demo .content .error svg .filtered {
2 position: relative;
3 display: block;
4 width: 100%;
5 height: 100%;
6 filter: url(#gemma);
7 opacity: 0.65;
8}This section is responsible for styling the text within the SVG element that undergoes the filter effects. The text is given a certain opacity, and the filter property applies the filter defined in the SVG code.
1body section.error-demo .content .error svg .filtered .glow {
2 font-size: 68px;
3 text-shadow: 0 0 6px rgba(0, 0, 0, 0.92), 0 0 21px rgba(0, 0, 0, 0.34), 0 0 12px rgba(0, 0, 0, 0.52), 0 0 21px rgba(0, 0, 0, 0.92), 0 0 34px rgba(0, 0, 0, 0.78), 0 0 54px rgba(0, 0, 0, 0.92);
4 fill: #666666;
5}Here, we style the glowing effect on the text. This includes setting the font size, text shadow for a glowing appearance, and the text fill color.
1@media screen and (max-width: 1300px) {
2 /* Responsive styles for different screen widths */
3}
4@media screen and (max-width: 768px) {
5 /* Responsive styles for different screen widths */
6}These media queries adjust the styling for various screen sizes. It modifies the font size and text shadow to ensure the design remains attractive on smaller screens.
1body section.error-demo .content .error span.error-message {
2 color: #666666;
3 font-family: "Neoneon";
4 font-weight: bold;
5 position: absolute;
6 display: block;
7 right: 0;
8 bottom: 0;
9 left: 0;
10 text-align: center;
11 font-size: 48px;
12 text-transform: uppercase;
13 text-shadow: 0 0 3px rgba(0, 0, 0, 0.98), 0 0 15px rgba(0, 0, 0, 0.42), 0 0 6px rgba(0, 0, 0, 0.58), 0 0 12px rgba(0, 0, 0, 0.84), 0 0 31px rgba(0, 0, 0, 0.88), 0 0 31px black;
14 opacity: 0.65;
15}This section styles the error message text. It specifies the font size, font family, and various text shadow effects to make it look better.
1body section.error-demo::after {
2 background: radial-gradient(circle closest-corner at 70% 50%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.9) 100%);
3 content: "";
4 position: absolute;
5 display: block;
6 width: 100vw;
7 height: 100vh;
8 top: 0;
9 right: 0;
10 bottom: 0;
11 left: 0;
12 z-index: 2;
13}
14
15body section.error-demo::before {
16 background-color: rgba(0, 0, 0, 0.45);
17 content: "";
18 position: absolute;
19 display: block;
20 width: 100vw;
21 height: 100vh;
22 top: 0;
23 right: 0;
24 bottom: 0;
25 left: 0;
26 z-index: 1;
27}These CSS blocks style the overlay elements used to darken the background when displaying the error message. They make sure the background and dimensions cover the entire viewport.
1body section.error-demo.glowing::before {
2 background-color: rgba(246, 36, 89, 0.25);
3}This section defines styles for creating a glowing effect when the "glowing" class is applied to the error container.
1body section.error-demo.glowing .content .error span.error-message {
2 color: #FC427B;
3 text-shadow: 0 0 3px rgba(246, 36, 89, 0.98), 0 0 15px rgba(246, 36, 89, 0.42), 0 0 6px rgba(246, 36, 89, 0.58), 0 0 12px rgba(246, 36, 89, 0.84), 0 0 31px rgba(246, 36, 89, 0.88), 0 0 31px #f62459;
4}This CSS block styles the text within the glowing error message, changing its color and text shadow when the "glowing" class is used.
In summary, this CSS code snippet plays a pivotal role in styling the SVG elements and error message container, making sure error messages look good and work well on different screens, with the ability to add a glowing effect when desired.
A Little Bit of JavaScript
The JavaScript part consists of just one small function, but to keep nothing from you, we will explain it in detail.
1const flickerFire = 1;
2
3const flicker = () => {
4 if (!flickerFire) return false;
5
6 gsap.to(".filtered, .error-demo", {
7 duration: 2,
8 className: "+=glowing",
9 opacity: 1,
10 ease: RoughEase.ease.config({
11 template: Power0.easeNone,
12 strength: 100,
13 points: 20,
14 taper: 'none',
15 randomize: true,
16 clamp: true
17 }),
18 repeat: 1,
19 yoyo: true,
20 onComplete: flicker
21 });
22};
23
24flicker();The flickerFire variable is set to 1, which acts as a switch for enabling or disabling the flickering effect.
The flicker function is responsible for defining the behavior of the flickering effect. To elaborate, if the flickerFire variable is set to 0, the function returns false, effectively preventing the flickering effect from running. Conversely, when flickerFire is enabled, the code leverages the GreenSock Animation Platform (GSAP) library to animate elements bearing the "filtered" and "error-demo" classes.
During this animation, the configuration includes a 2-second duration, the addition of the "glowing" class to trigger the glowing effect as discussed in the CSS section, and the adjustment of opacity to a value of 1, rendering the elements fully visible.
Additionally, the animation's smoothness is controlled by the ease parameter, which can be customized according to your preferences. For further refinement, parameters such as strength, points, taper, randomize, and clamp can be modified to fine-tune the animation. The animation is programmed to repeat once and yoyo back and forth, thus generating the distinctive flickering effect.
Finally, the flicker function is called, initiating the flickering effect. This code makes your error message more exciting and catches the users' attention. When you use JavaScript with your HTML and CSS, your error message becomes lively and gets noticed, making it clear and important.
Remember, it's not always about how well you know a programming language; sometimes, it's more important how creative you are and how capable you are to solve a complicated problem with a simple solution. Until next time, happy coding.
Credits
- The inspiration for effects and Layout comes from Tamara Laforest
- Monserrat by Google Fonts
- Neoneon by Bakoom Studio
- GSAP by Greensock