Blinking text!
You know you miss it too! You don't have to live in denial any longer. Just accept it. It's okay.
Blink.
Blink.
Blink.
Even though Netscape Navigator is a distant memory, it's easy to relive your glory days of website design by making text blink using jQuery. It's really easy.
Just take whatever elements you want to blink and add the blink class to them, like I did with this paragraph tag:
<body> <p class="blink">This text should blink.</p> </body>
Then in a script tag, just do this (updated):
$(function() {
var vis = "hidden";
function bringBackBlink() {
$(".blink").css("visibility", vis);
vis = ( vis === "hidden" ? "visible" : "hidden" );
}
setInterval(bringBackBlink, 500);
});
Updated: After the bringBackBlink (say that 5 times fast) function is defined, setInterval makes sure it gets called every 500 milliseconds. All the function does is find all elements on the page that have the blink class and toggles their
As pointed out in the comments, I originally used jQuery's .toggle() function to alternatively hide and show the element. This will only work correctly in situations where the element to be blinked is using fixed or absolute positioning (that's why it works for me in frog comics). In "normal" situations, like my paragraph tag example above, all the other elements on the page will shift around. This is because jQuery's toggle function sets the value of the display property to none, which causes the hidden element to no longer take up space on the page. Using the visibility property instead keeps things where they belong.
Now look at this example of HTML. It has lots of other non-blinking elements on the page that won't shift around when things blink.
<body>
<p>This text should not blink.</p>
<p class="blink">This text should blink.</p>
<p>This text should not move.</p>
<p class="pink">
<span class="blink">
This text should blink and be pink.
</span>
</p>
<p>This text should not move.</p>
</body>
<style>
.pink {
background-color: #000000;
color: #FF3399;
padding: 5px;
}
</style>
Here is an animated GIF showing the results:
Just like neon windbreakers and cargo pants, blinking text on the web is coming back in style! (Disclaimer: I don't actually know if neon windbreakers and cargo pants are coming back in style)
And speaking of blinking...if you still have your Christmas lights up like the frogs do, it might be time to take them down.
 |
| Amphibian.com comic for 20 February 2015 |
No comments:
Post a Comment