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.
- 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