Skip to content

Instantly share code, notes, and snippets.

@anoopsankar

anoopsankar/css-flicker.html

Created September 5, 2012 08:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anoopsankar/3633576 to your computer and use it in GitHub Desktop.
Save anoopsankar/3633576 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Flicker Full
Raw
css-flicker.html
<!DOCTYPE html>
<html>
<head>
<title>Flickering Text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style>
body {
background: #666;
background-image: url('txture.png');
padding: 1em;
font-size: 36px;
font-family: 'DejaVu Serif', 'Georgia', serif;
}
#text-block {
color: white;
text-shadow: white 0 0 3px;
font-size: 1.5em;
}
#text-block .flickr {
color: transparent;
text-shadow: white 0 0 1px;
-webkit-transition: text-shadow 0.2s ease-in-out;
-moz-transition: text-shadow 0.2s ease-in-out;
transition: text-shadow 0.2s ease-in-out;
/* Transitions defined for smoother anim. */
}
#wrap {
margin-top: 50px;
width: 100%;
}
#logo {
margin: auto;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<div id="text-block">
i am a <span class="flickr">bad</span> lamp
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
var val = 1;
if (Math.random() > 0.5) {
val = Math.floor((Math.random()*10)+1);
}
$(".flickr").css("text-shadow", "white 0 0 " + val + "px");
}, 200);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment