MakeuseoftheCSShoverselectorforapplyinga fuzzanimationtohoveredtext
- Initiate HTML document
The first step is to initiate the HTML document. This
consists of a container for the HTML which is used
to store the head and body sections. While the head
section includes the external CSS and Javascript
files, the body section will be used to store the
visible content created in step 2.
<!DOCTYPE html>
<html>
<head>
<title>Fuzz</title>
<link rel='stylesheet' type='text/css'
href='styles.css' />
<script src='code.js' type='text/
javascript'></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>- Body content
The visible page content consists of three heading
tags that each have the 'fuzz' class applied to them.
Additionally, two of the headings have an additional
colour class, which will be used to apply further
properties that complement the standard fuzz
settings. While headings are used in this example, the
effect will work with any element type.
<h1 class='fuzz red'>Fuzz Text red</h1>
<h2 class='fuzz blue'>Fuzz Text blue</h2>
<h3 class='fuzz'>Fuzz Text</h3>- Javascript: search
Create a new file called 'code.js'. This step tells the
browser to wait until the page has loaded, upon which
an instruction is set to search the page for elements
using the 'fuzz' class. Each element found is referenced
by a 'for' loop to apply the code defined in step 4.window.addEventListener('load',function(){
var nodes = document.querySelectorAll('.
fuzz');
for(var i=0; i<nodes.length; i++){
*** STEP 4 HERE
}
});4. Javascript: text clone
Each item found in step 3 will have a replica of its text
content inserted. This step creates the container for this
text, as well as copying the text into this element and
inserting it into the parent element. The copied element
will be used later by the CSS as the fuzz effect.var newNode = document.createElement('span');
newNode.innerText = nodes[i].innerText;
nodes[i].appendChild(newNode);5. CSS: fuzz elements
Create a new file called 'styles.css'. This step sets the
parent fuzz element to use relative positioning, with the
child element created in step 4 to use absolute positioning
placed in the top left corner. The child element is also set
with a default colour and invisible opacity by default..fuzz{
position: relative;
}
.fuzz > *{
position: absolute;
top: 0;
left: 0;
opacity: 0;
text shadow: 0 0 10px rgba(0,0,0,1);
}6. Hover interactions
Two alterations are required when a hover interaction
is detected over the fuzz elements. While the parent
has opacity set to display with semi-transparency, the
child element is set to trigger the 'fuzzAnim' animation.
This animation is set to last three seconds, repeating
infinitely until the parent element is no longer hovered..fuzz:hover{
opacity: .5;
}
.fuzz:hover > *{
animation: fuzzAnim 3s linear infinite;
}7. Fuzz colours
Elements using the colour classes will have some
additional settings applied. Firstly, the parent element
needs to have a colour defined for its text,. Secondly,
the child element created in step 5 needs an updated
colour for the defined text shadow used for the fuzz
effect. Other colours can be set using the same
combination of settings..fuzz.red{ color: red; }
.fuzz.red > *{ text shadow: 0 0 15px red; }
.fuzz.blue{ color: blue; }
.fuzz.blue > *{
text shadow: 0 0 15px blue;
}8. Fuzz animation
The animation referenced in step 6 is defined using
the keyframes feature. This step defines the
properties at specific points throughout the
animation. Movement is controlled using margin
positioning. As animation transitions are automatically
handled by the browser, but with a requirement to
snap movement, specific frames are applied to keep
the elements in position when required.@keyframes fuzzAnim {
0%{margin: 0; opacity: 0;}
1%{margin left: .5em; opacity: 1;}
25%{margin left: .5em; opacity: 1;}
26%{margin: 0; opacity: 0;}
50%{margin top: 0; opacity: 0;}
51%{margin top: .25em; opacity: 1;}
75%{margin top: .25em; opacity: 1;}
76%{margin top: 0; opacity: 0;}
100%{margin: 0;}
}lightbox ________________________________________________ 19LightBoxg
DGTL.TRI
Create an interactive
text fuzz effect