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
Latest posts by Diane Ensey (see all)
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017