Web effects, HTML, Jquery, CSS Part 1.1 - My code for my front page.

Front page animation Sam's Playground (Portfolio)

Code Snippet for my animation on my front page here

View Animation

Javascript

So first we start by defining a few variables. Next we extract the characters from the head tag and perform required steps in the extract function. This is a function I defined to perform animation. It is a helper function. Also, we register animation frame for the window. All happening inside the ready function.

var head1 = $("h1#head1");
var total = 0;
var scene;
var camera;
var renderer;
var mwidth = 900, mheight = 900;
// Jquery Ready function, triggered when document is "ready"
$(document).ready(function() {
//Extract the head tag value
extract(head1);
// Use built-in function to create new animation frame to make it smooth.
window.requestAnimFrame(dripp);
// Variable to store oldtext from head value.
var oldtxt;
});

// Extracting Characters from the string from head tag. Making this a slightly modular approach.
function extract(_textholder){
var htext = _textholder.text();
var hlen = htext.length;
total += hlen;
_textholder.text("");
for(i=0; i< hlen; i++){
_textholder.append("<h1
class='drippers'>"+htext[i]+"</h1>");
}
}
// Function that actually performs addition and deletion of animation class so that we can animate random characters.

function dripp(){
rnd = parseInt(Math.random() * total);
$(".drippers").each(function(i, obj) {
if(i == rnd)
$(this).toggleClass("drippin");
});
window.requestAnimFrame(dripp);
}

// Fix for built-in function for setting callback time.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000);
};
})();

CSS

.drippin is a CSS class which enables the 'drippin' keyframe animation. This is the class we apply and remove to perform the animation. The animation itself is defined in keyframes. The first part of the animation starts at 0% and the text-shadow property allows to create the effect. We define the property value for each of the time steps in the keyframe. We define individual keyframe animations for each browser.
Chrome - @-webkit-keyframe
Mozilla - @-moz-keyframe
Opera - @-o-keyframe
Others - @keyframe

.drippin {
 -webkit-animation: ease drippin 1.5s infinite;
 /* Safari 4+ */
 -moz-animation: ease drippin 1.5s infinite;
 /* Fx 5+ */
 -o-animation: ease drippin 1.5s infinite;
 /* Opera 12+ */
 animation: ease drippin 1.5s infinite;
 /* IE 10+, Fx 29+ */
}
.drippers {
 text-transform: full-width;
}



@-webkit-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px black;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -10px 4px white;
 }
}
@-moz-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px red;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px maroon;
 }
}
@-o-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px red;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px maroon;
 }
}
@keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px blue;
 }
 10% {
  text-shadow: 0px -0px 2px lightgreen;
 }
 15% {
  text-shadow: 0px -3px 3px blue;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px lightgreen;
 }
}

If any of the code doesn't work, you can troubleshoot it by:

1. Checking the variable names, definitions, and other related syntax 
2. Remove all or misplaced comments.
3. Check for keyword spelling mistakes.
4. Try a different browser.
5. Open Inspector > Console to check for errors.

Best of luck, and happy coding! Hope you have fun and create more such animations to place on your websites!

Samartha  K V