Text Animations

When I saw Aurelio De Rosa’s tutorial on writing a jQuery plugin I bookmarked it. What caught my eye was the title “Flashing Text Effect”. No idea why, but as I read the article and worked through the tutorial I envisioned it being used in a header with a background image. And what if that background image changed as well?

I made one change to his code. I want to be able to specify the size of the text: random, normal (unchanging and inheriting the font-size from you page) or a specific, unchanging font size. This required two additions to his code. First, adding a default value:

1
2
3
4
5
6
7
8
9
10
11
12
var defaultValues = {
      strings: [], // array. A set of strings to show.
      //My addition here:
      fontSize: 'normal', //string.  "normal" = no resizing. "random"= random resizing. Or enter size in px or ems (16px; 1.5em)
      //End my addition
      fadeIn: 300, // numeric. The time in milliseconds the element appears by fading to opaque.
      duration: 500, // numeric. The time of milliseconds the element stays visible.
      fadeOut: 300, // numeric. The time of milliseconds the element disappears by fading to transparent.
      selection: "random" // string. The order of selection of the strings.
                          // The possible values are: "random", "ascending", "descending".
   };</p>
<p>

Then, under the start method I added:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
start: function(settings, index, idElem)
      {
         if (typeof idElem === "undefined") {
            idElem = this.selector;
         }
         if (typeof settings === "undefined") {
            $.error("Invalid method call: No settings specified");
            return;
         }
         if (index == null) {
            if (settings.selection === "ascending")
               index = 0;
            else if (settings.selection === "descending")
               index = settings.strings.length - 1;
            else
               index = Math.floor(Math.random() * settings.strings.length);
         }</p>
<p>		//My additions here
                //determine if we are resizing font or not
		var fs = "1 em";
		if(settings.fontSize == 'random') {var fs = (Math.random() * 2 + 0.5) + "em";}else if (settings.fontSize != 'normal'){ var fs = settings.fontSize;}
                //endadditions
<p>         var $text = $("<span>")
         .text(settings.strings[index])
         .addClass("audero-flashing-text") // This is used as a bookmark to help the stop method
         .css({
            position: "absolute",
            display: "none",
            fontSize: fs  //my addition
         })
         .appendTo("#" + idElem)
         .fadeIn(settings.fadeIn)
         .animate({opacity: 1}, settings.duration) // Simulate delay
         .fadeOut(settings.fadeOut, function() {
            // Remove the current element
            $(this).remove();
            var nextIndex;
            if (settings.selection === "ascending")
               nextIndex = (index + 1) % settings.strings.length;
            else if (settings.selection === "descending")
               nextIndex = (index === 0) ? settings.strings.length : index - 1;
            else
               nextIndex = Math.floor(Math.random() * settings.strings.length);
            // Start again the effect
            methods.start(settings, nextIndex, idElem);
         });

I handled the background image changer with a slick little plugin called cross-slide.js


jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Ftext-animations%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Text Animations appeared first on Sophrosyne Life.

Diane Ensey
Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Diane Ensey
Follow me

Submit a Comment