Tag Archives: hover effects

Code Snippets

Directional Shadow Hover Effect using CSS and jQuery

I wanted to make a hover effect that looked like the user’s cursor was a light source that was casting a directional shadow against some text. I’m sure there are fancier ways to do this, but by writing some CSS and jQuery I came up with this:

See the Pen Sequential Letter Animation Starter Pen by Braad Martin (@BraadMartin) on CodePen.0

It’s built with three main pieces. First, my span-letters.js script to wrap each letter of a string in a span with a class to indicate its position in the string. Then some jQuery to add a class to the wrapper indicating which letter is being hovered. Finally, a bunch of CSS to handle the text-shadows used to create the directional shadow.

I used the nesting power of Sass to keep everything DRY. Here’s the CSS for the center position:

#target.l5 {
  .sl1 {
    text-shadow: -8px 4px 8px #444444;
  }
  .sl2 {
    text-shadow: -6px 4px 8px #444444;
  }
  .sl3 {
    text-shadow: -4px 4px 8px #444444;
  }
  .sl4 {
    text-shadow: -2px 4px 8px #444444;
  }
  .sl5 {
    text-shadow: 0px 4px 8px #444444;
  }
  .sl6 {
    text-shadow: 2px 4px 8px #444444;
  }
  .sl7 {
    text-shadow: 4px 4px 8px #444444;
  }
  .sl8 {
    text-shadow: 6px 4px 8px #444444;
  }
  .sl9 {
    text-shadow: 8px 4px 8px #444444;
  }
}

The key is that each letter gets a more intense shadow the further away it is from the letter being hovered. A simple transition on the spans ties the whole thing together and gives it a sense of response as you quickly hover across the letters.

With the structure in place, it’s easy to create variations. I’ve always been a sucker for 3D text effects, so I had to try an inset shadow:

See the Pen Sequential Letter Animation Starter Pen by Braad Martin (@BraadMartin) on CodePen.0

The shadow was fun, but I still wasn’t getting that feeling of the light coming from the cursor and shining on the top of the letters. I decided to try adding a color change, and to make it flexible and achieve additional DRYness I created Sass mixins for each letter based on how far it was from the target letter:

See the Pen Sequential Letter Animation Starter Pen by Braad Martin (@BraadMartin) on CodePen.0

Not bad. I made the color change noticeably dramatic to illustrate the effect. A more subtle color change would definitely add some realism.

With the mixins in place I can easily add more CSS properties to each letter. My next move will be to add mixins for each letter based on the direction AND how far it is from the hovered letter, which will allow me to keep all the CSS properties including the text-shadows in a clean set of mixins. That will make it much easier to try out new ideas very quickly. Sass is a life saver in these kinds of situations.

-Braad

Code Snippets

Sequential Letter Animations using CSS3 & jQuery

I think that my recent exploration of individual letter hover effects was always going to lead me down this path. Once I wrote the JS for sequentially applying a class to individual letters in a string with a flexible timer structure, the ideas just kept coming. It all starts with this:

See the Pen Sequential Letter Animation Starter Pen by Braad Martin (@BraadMartin) on CodePen.0

With that JS, designing the effect is as simple as setting this line of CSS:

.container span.active {
  /* Do something crazy */
}

Then you can change the timing of the effect simply by changing the variables in the JS:

duration = 400; // Set duration of the effect here
speed = 100; // Set animation speed through the letters here
infiniteLoop = false // Set whether animation should keep on triggering

There is a lot of potential here. I'm only starting to scratch the surface:

Example 1 - Rotating Letters

See the Pen Sequential Letter Animations - Rotating Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 2 - Leaning Letters

See the Pen Sequential Letter Animations - Leaning Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 3 - 3D Letters

See the Pen Sequential Letter Animations - 3D Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 4 - Inset Letters

See the Pen Sequential Letter Animations - Inset Letters by Braad Martin (@BraadMartin) on CodePen.0

Too much fun!

-Braad

Code Snippets

Individual Letter Hover Effects using CSS3 & jQuery

I've been playing around with the idea of applying CSS3 transforms and other effects to individual letters in a string, and I wanted a flexible way to do this that didn't involve any special markup from the content author.

After testing some ideas I settled on writing a small jQuery plugin to handle the task of wrapping each letter of a string in its own span. I call the plugin Span Letters, and it looks like this:

( function( $ ) {

    // Example usage: jQuery( '.selector' ).spanLetters();

    $.fn.spanLetters = function() {

        // Loop through each element on which this function has been called
        this.each( function() {   
          
            // Make an array with each letter of the string as a value
            var words = $( this ).text().split( '' );

            // Loop through the letters and wrap each one in a span
            for ( i = 0; i in words; i++ ) {
                words[i] = '<span class="sl' + (i + 1) + ' span-letter">' + words[i] + '</span>'
            };

            // Join our array of span-wrapped letters back into a string
            var text = words.join( '' );

            // Replace the original string with the new string
            $( this ).html( text );
        })
    }
}( jQuery ));

This will wrap each letter in a span and give the span a unique sequential class that we can use to apply our individual letter styling. Of course we can also use something like span:nth-child() instead of using the sequential classes. We can bring this to life with some CSS like this:

.container {
  font-family: verdana;
  font-weight: bold;
  text-shadow: -1px 0 0px #FFADDA, 0 1px 0px #F99ACD, -2px 1px 0px #FFADDA, -1px 2px 0px #F99ACD, -3px 2px 0px #FFADDA, -2px 3px 0px #F99ACD, -4px 3px 0px #FFADDA, -3px 4px 0px #F99ACD, -5px 4px 0px #FFADDA, -4px 5px 0px #F99ACD, -6px 5px 0px #FFADDA, -5px 6px 15px #000000;
  text-transform: uppercase;
}

.container span {
  display: inline-block;
  transition: 0.8s;
}

.container .sl1 {
  color: red;
  transform: rotateX( 20deg ) rotateY( -20deg ) rotateZ( 10deg );
}

.container .sl2 {
  color: orange;
  transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( -15deg );
}

.container .sl3 {
  color: yellow;
  transform: rotateX( 0deg ) rotateY( 30deg ) rotateZ( 25deg );
}

.container .sl4 {
  color: green;
  transform: rotateX( 0deg ) rotateY( 5deg ) rotateZ( -5deg );
}

.container .sl5 {
  color: blue;
  transform: rotateX( 20deg ) rotateY( 0deg ) rotateZ( -35deg );
}

.container .sl6 {
  color: indigo;
  transform: rotateX( 10deg ) rotateY( 0deg ) rotateZ( 5deg );
}

.container .sl7 {
  color: violet;
  transform: rotateX( 0deg ) rotateY( 30deg ) rotateZ( 35deg );
}

.container .sl8 {
  color: white;
  transform: rotateX( -10deg ) rotateY( 0deg ) rotateZ( -15deg );
}

.container .sl9 {
  color: black;
  transform: rotateX( -10deg ) rotateY( 0deg ) rotateZ( 15deg );
}

.container:hover span {
  transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
  cursor: pointer;
}

To create this:

Transform

Hover/Tap to revert to normal

That's pretty neat, but how can we make this more functional? I like the idea of transitioning into or out of the effect when the user hovers over the text. Here are some examples:

Example 1 - 2D Spinning Letters

.container {
  font-family: verdana;
  font-weight: bold;
  text-shadow: -1px 0 0px #FFADDA, 0 1px 0px #F99ACD, -2px 1px 0px #FFADDA, -1px 2px 0px #F99ACD, -3px 2px 0px #FFADDA, -2px 3px 0px #F99ACD, -4px 3px 0px #FFADDA, -3px 4px 0px #F99ACD, -5px 4px 0px #FFADDA, -4px 5px 0px #F99ACD, -6px 5px 0px #FFADDA, -5px 6px 15px #000000;
  text-transform: uppercase;
  color: white;
}

.container span {
  display: inline-block;
  transition: 0.8s;
}

.container:hover span:nth-child(odd) {
  transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( 370deg );
  cursor: pointer;
}

.container:hover span:nth-child(even) {
  transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( -370deg );
  cursor: pointer;
}
Result:

Transform

Hover/Tap for effect

Example 2 - 3D Spinning Letters

.container {
  font-family: verdana;
  font-weight: bold;
  text-shadow: -1px 0 0px #FFADDA, 0 1px 0px #F99ACD, -2px 1px 0px #FFADDA, -1px 2px 0px #F99ACD, -3px 2px 0px #FFADDA, -2px 3px 0px #F99ACD, -4px 3px 0px #FFADDA, -3px 4px 0px #F99ACD, -5px 4px 0px #FFADDA, -4px 5px 0px #F99ACD, -6px 5px 0px #FFADDA, -5px 6px 15px #000000;
  text-transform: uppercase;
  color: white;
}

.container span {
  display: inline-block;
  transition: 1.5s;
}

.container:hover span:nth-child(odd) {
  transform: rotateX( 0deg ) rotateY( 370deg ) rotateZ( 370deg );
  cursor: pointer;
}

.container:hover span:nth-child(even) {
  transform: rotateX( -370deg ) rotateY( 0deg ) rotateZ( -370deg );
  cursor: pointer;
}
Result:

Transform

Hover/Tap for effect

Example 3 - The Gangster Lean

.container {
  font-family: verdana;
  font-weight: bold;
  text-transform: uppercase;
  color: #545454;
}

.container span {
  display: inline-block;
  transition: 1s;
}

.container:hover span {
  transform: skewX( -10deg ) translateX( 10px );
  cursor: pointer;
}
Result:

Transform

Hover/Tap for effect

Example 4 - Individual Letter Scaling

.container {
  font-family: verdana;
  font-weight: bold;
  text-shadow: -1px 0 0px #FFADDA, 0 1px 0px #F99ACD, -2px 1px 0px #FFADDA, -1px 2px 0px #F99ACD, -3px 2px 0px #FFADDA, -2px 3px 0px #F99ACD, -4px 3px 0px #FFADDA, -3px 4px 0px #F99ACD, -5px 4px 0px #FFADDA, -4px 5px 0px #F99ACD, -6px 5px 0px #FFADDA, -5px 6px 15px #000000;
  text-transform: uppercase;
  color: white;
}

.container span {
  display: inline-block;
  transition: 0.8s;
}

.container:hover span {
  cursor: pointer;
  position: relative;
}

.container:hover .sl1 {
  transform: scale(1.25);
  z-index: 4;
}

.container:hover .sl2 {
  transform: scale(1.15);
  z-index: 3;
}

.container:hover .sl3 {
  transform: scale(1.05);
  z-index: 2;
}

.container:hover .sl4 {
  transform: scale(0.95);
  z-index: 1;
}

.container:hover .sl5 {
  transform: scale(0.85);
  z-index: 0;
}

.container:hover .sl6 {
  transform: scale(0.95);
  z-index: 1;
}

.container:hover .sl7 {
  transform: scale(1.05);
  z-index: 2;
}

.container:hover .sl8 {
  transform: scale(1.15);
  z-index: 3;
}

.container:hover .sl9 {
  transform: scale(1.25);
  z-index: 4;
}
Result:

Transform

Hover/Tap for effect

Example 5 - Text-Shadow Animations

.container {
  font-family: verdana;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(210, 210, 210, 0.6);
  text-shadow: 1px 2px 6px #FFFFFF, 0 0 0 #000000;
}

.container span {
  transition: 0.3s;
  display: inline-block;
}

.container:hover span {
  cursor: pointer;
  color: rgba(200, 200, 200, 0.6);
  text-shadow: 3px 6px 10px #FFFFFF, 0 0 0 #000000;
}
Result:

Transform

Hover/Tap for effect

With each letter wrapped in a span, the possibilities are endless.

-Braad