For long now flash has been dominating the interactive web animation,
using JavaScript was a daunting task. But introduction of frameworks
like jQuery, MooTools, Scriptaculous, etc have made animating web
component much easier. Another advantage of using these frameworks over
flash is that they are search engine friendly. Though search engine do
not index JavaScript, actual content is present in html or other SEO
friendly code.
You must have seen this text effect on many flash websites. jTicker is a
jQuery plugin that can be used for creating such effect without the use
of flash. This effect comes in handy when you want to force the visitor
to read the text. But should be used wherever necessary, as the
usability suffers. jTicker can be declared on any element and can be
stylized using CSS. You can also use event buttons to play, stop and
control the speed of the effect.
HTML
Let us start with html markup. Make sure that you have linked the .js files correctly.
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
02 | < html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en" > |
04 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
05 | < title >jticker | Demo</ title > |
06 | < script type = "text/javascript" SRC = "js/jquery-1.3.2.min.js" ></ script > |
07 | < script type = "text/javascript" SRC = "js/jquery.jticker.js" ></ script > |
11 | < h2 >jTicker Demo </ h2 > |
14 | < h3 >What does jTicker do?</ h3 > |
15 | < p >jTicker
takes an elements' children and displays them one by one, in sequence,
writing their text 'ticker tape' style. It is smart enough to ticker
text from an element heirarchy, inserting elements back into the DOM
tree as it needs them. That means almost any content can be
'tickered'.</ p > |
16 | < p >It can be controlled with jQuery events.</ p > |
17 | < a class = "next" href = "#" >next</ a > |
20 | < h3 >Not my cup of tea, really, ...</ h3 > |
21 | < p >annoying
little blinky things trying to distract attention when you want to get
on with the serious business of reading a website, but if it's your
thing, here it is.</ p > |
23 | < a class = "next" href = "#" >next</ a > |
26 | < h3 >jTicker has some neat features:</ h3 > |
28 | < li >jTicker
can be declared on any element, and it respects that element's DOM
tree, printing it back out with the same hierarchy.</ li > |
29 | < li >jTicker handles any number of alternating cursors (or just one).</ li > |
31 | < li >jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</ li > |
32 | < li >jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</ li > |
34 | < a class = "next" href = "#" >next</ a > |
38 | < h3 >There is one caveat:</ h3 > |
41 | < li >< span >jTicker
can't understand text and children at the same level (I don't know how
to do that yet), so if you want some text and then a link, you have to
wrap the text in, say, a span, like this:</ span > |
42 | < code >|span| some text |/span| |a|and then a link|/a|</ code > |
44 | < li >But
obviously not with those brackets. That's another thing, jTicker is not
good at handling html character entities. So make that two
caveats.</ li > |
46 | < a class = "next" href = "#" >next</ a > |
CSS
Add this code to your CSS file or to the <style>
02 | { height : 12em ; padding : 0.6em 0 ; margin : 0 0 1.8em 0 ; border-top : 3px solid #efefef ; border-bottom : 3px solid #efefef ; position : relative ;} |
04 | { display : inline- block ; background : #565c61 ; width : 0.6em ; height : 1em ; text-align : center ;} |
06 | { margin-bottom : 0.8em ;} |
08 | { margin : 0.4em 0.4em ; display : block ;} |
10 | { position : absolute ; bottom : 1em ;} |
JavaScript
Now initialize jTicker by adding this JavaScript to <head> between <script type=”text/javascript”></script>
02 | jQuery(document).ready( function (){ |
04 | jQuery( "#ticker" ).ticker({ |
08 | }).trigger( "play" ).trigger( "stop" ); |
11 | jQuery( ".stop" ).click( function (){ |
12 | jQuery( "#ticker" ).trigger( "stop" ); |
16 | jQuery( ".play" ).click( function (){ |
17 | jQuery( "#ticker" ).trigger( "play" ); |
21 | jQuery( ".speedup" ).click( function (){ |
32 | jQuery( ".slowdown" ).click( function (){ |
43 | jQuery( ".next" ).live( "click" , function (){ |
45 | .trigger({type: "play" }) |
46 | .trigger({type: "stop" }); |
50 | jQuery( ".style" ).click( function (){ |
54 | cursor: jQuery( "#ticker" ).data( "ticker" ).cursor.css({width: "4em" , background: "#efefef" , position: "relative" , top: "1em" , left: "-1em" }) |
View Demo
Download Files
Visit Authors Website
No comments:
Post a Comment