The Morris worm was a famous computer worm.
How I Wrote this
I found a great example to reference on w3school as a jumping off point. I took
the general flow of setting up a popup in primarily CSS, modified it, and then
the framework by adding more features to it.
We need to pick a word we want our popup to define. We use a span with an id to refer to this word & dotted lines to illustrate to the user that they can interact
with this word.
See the Pen MpNNoe by hayden.french (@haydenfrench) on CodePen.
Next, we need an inner span where we can place our definition.
See the Pen zZggMp by hayden.french (@haydenfrench) on CodePen.
Hidden Inner Span
We hide the definition span & set important properties for it.
See the Pen GWVVPb by hayden.french (@haydenfrench) on CodePen.
Position Popup & Create Arrow for Speech Bubble Effect
We're hard coding this popup to be on the right for our example. In the real framework, we expect the user to pass in a side they want
(Note: inner span made visible to show positioning)
See the Pen PpMMMw by hayden.french (@haydenfrench) on CodePen.
Arrow for Speech bubble Effect
This is really silly, and I love that it works. We create a span with empty a single space inside of it. Then we give it a small border width.
Next we set the border color ONLY on a single side. Since our span is a rectangle, and made up of 4 sections, each section is a triangle. By
setting the border color only on a single side, we get a tiny triangle!
See the Pen OmLLNM by hayden.french (@haydenfrench) on CodePen.
On Hover Event
Now we need to change the visibility of our inner Span based on where the mouse is hovering! We use the
mouse over & mouse out event listeners to accomplish this.
See the Pen mmbbpV by hayden.french (@haydenfrench) on CodePen.
We want to add sounds to play when someone hovers over our outer span. We can use the Audio object & the
play() function and our previous mouseover event to trigger the sound.
See the Pen VbZZNe by hayden.french (@haydenfrench) on CodePen.
Note: In the framework, the audio handling is slightly more complex to deal with long songs. On mouseover, we first check if the audio is paused. If so, we rewind the audio
object back to the beginning and then play it. On mouseout, we pause the song.
We're going to use CSS keyframes. We'll show a simple example here and then in the real framework we will utilize a premade library
that enables us to have many beautiful and complex animations.
See the Pen wdwwLr by hayden.french (@haydenfrench) on CodePen.
Instead of declaring our own CSS keyframes, we simply include animate.css as a stylesheet. Then just as before, on the mouseover
and mouseout events we set two classnames declared in the CSS. The first classname is always animated and the second is the name
of the animation we want. A few of my favorites include: wobble, hinge, slideInDown, slideInDown, lightSpeedIn, lightSpeedOut. For
a complete list see the animate.css documentation listed below.
Bringing it all together
So now we know how all the individual parts work. We need to abstract this implementation
from the user & make it a simple import & declaration.
Final Framework: popupframework.js
How an HTML developer would utilize this framework
Here are the steps to use the framework:
- Include animate.css in head tags if you want pre-defined animations.
- Surround word you want to define in span and give it an id.
- Include framework in script tag.
- Inside script tag, create instance of framework.
- Call makePopup() & pass parameters you desire.
What parameters this framework can set:
- text: text you want displayed
- side: side of popup placement
- size: size of popup
- backgroundColor: color of popup background
- textColor: color of text in popup
- underlineColor: color to highlight word that will have popup on it
- width: width of popup
- borderRadius: size of border Radius
- animationIn: animation to display on mouseover
- animationOut: animation to display on mouseout
- audio: predefined audio sounds
- audioLink: link to audio hosted on any domain
var popFW = makePopupFramework();
text: "computer software that attempts to replicate itself and spread across computers",
animationIn: "animated slideInDown",
animationOut: "animated slideOutDown",
- This example is silent and not animated!
- This fills me with a crazy amount of awe!
- Wow so amazing!
- Totally worth an A+ grade, right guys? :)
Thanks to w3schools for giving me a jumping off point: Popup Tutorial
This showed me the basic concepts for creating a popup.
They also have wonderful documentation about all the CSS you could ever want to know: CSS
Big thanks to Daniel Eden @ animate.css
He made beautifully, complex CSS keyframes very easy to use.