LETTER DROP

index.html

<style type="text/css">
.pseudolink { 
   text-decoration:underline; 
   cursor:pointer; 
   }
</style>
<span 
   class="pseudolink" 
   onclick=" window.open(https://www.projectthing.tk);">

<h1> <a href="hi">Some Link Text</a> </h1>
</span>
<h1>Blog</h1>
<h1>About</h1>

LETTER DROP.markdown

LETTER DROP

Experimenting with more text effects using CSS animations and jQuery to keep the markup down.

The delay is added via drop.styles() on the fly, you could I guess make all the CSS required on the fly using the same method but I've kept these separate for now. The animation effect, look and feel are customised via the CSS the way they should be. The JS plugin is a helper for all the repetition needed to create the effects on each letter.

Version 0.0.8 out now! Fork me on GitHub https://github.com/KryptoniteDove/letter-drop

Forked from Rich's Pen LETTER DROP.

Forked from Rich's Pen LETTER DROP.

A Pen by Captain Anonymous on CodePen.

License.

script.js

;
(function($) {

  $.fn.letterDrop = function() {
    // Chainability
    return this.each(function() {

      var obj = $(this);

      var drop = {
        arr: obj.text().split(''),

        range: {
          min: 1,
          max: 9
        },

        styles: function() {
          var dropDelays = '\n',
            addCSS;

          for (i = this.range.min; i <= this.range.max; i++) {
            dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }\n';
          }

          addCSS = $('<style>' + dropDelays + '</style>');
          $('head').append(addCSS);
        },

        main: function() {
          var dp = 0;
          obj.text('');

          $.each(this.arr, function(index, value) {

            dp = dp.randomInt(drop.range.min, drop.range.max);

            if (value === ' ')
              value = '&nbsp';

            obj.append('<span class="letterDrop ld' + dp + '">' + value + '</span>');

          });

        }
      };

      Number.prototype.randomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      };

      // Create styles
      drop.styles();

      // Initialise
      drop.main();
    });

  };

}(jQuery));

// USAGE
$('h1').letterDrop();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: #EEEEEE;
  text-align: center;
}

h1 {
  margin: 0;
  padding: 0;
  font-family: 'Raleway';
  font-weight: 400;
  font-size: 2.4em;
  color: #9A12B3;
}

.letterDrop {
  position: relative;
  top: 0.60em;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1.2s ease 1 normal forwards;
}

@keyframes letterDrop {
  10% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.8;
    top: 3.75em;
    transform: rotateX(-360deg);
  }
  100% {
    opacity: 1;
    top: 4.50em;
    transform: rotateX(360deg);
  }
}

span:nth-child(2n) {
  color: #663399;
}