Sliding Text Effect Using Jquery

Sliding Text Effect Using Jquery

by: Marvin

Create a cool ‘sliding’ text effect to your blog's WordPress template with this JQuery tutorial. The goal is to animate your text in a sliding manner when you hover over anchored text. The text switches to a new one by sliding in the new text at once or one letter at a time. This web design mockup experiment will add a lively feature to your site and to any other blog themes.

Use Lettering.js jQuery Plugin (http://letteringjs.com/) at Github (https://github.com/davatron5000/Lettering.js).

Begin with the HTML code.

1              <div class="slide_cases">

2                  <a href="#" id="case1" data-hover="Creativity">Illustrations</a>

3              </div>

To indicate the text that should appear on the hover, we must use data-hover. If not, the text elements won’t switch.

Follow this format:

01           .slide_cases{

02               float:left;

03               font-family: 'Averia', cambria, serif;

04               font-size:40px;

05               line-height:40px;

06               color:#ffcccc;

07               margin-right:5px;

08               text-transform:uppercase;

09           }

10           .slide_cases a{

11               display:block;

12               position :relative;

13               float:left;

14               clear:both;

15               color:#0000cc;

16           }

17           .slide_cases a > span{

18               height:40px;

19               float:left;

20               position:relative;

21               overflow:hidden;

22           }

23           .slide_cases a span span{

24               position:absolute;

25               display:block;

26               left:0px;

27               top:0px;

28               text-align:center;

29           }

30           .slide_cases a span span.slide-w1{

31               color:#0000cc;

32               text-shadow:0px 0px 1px #0000cc;

33               z-index:2;

34           }

35           .slide_cases a span span.slide-w2{

36               color:#993366;

37               text-shadow:-1px 1px 2px #cc3366;

38               z-index:3;

39           }

"Slide-w1" will be letters to form the first word while "slide-w2" will form the second word.

Then the plugin :

1              $(window).load(function(){

2                  $('#case1').hoverwords({ delay:50 });

3              });

You can use these settings :

1              delay       : false,        // each letter will have different animation times

2              speed       : 300,          // animation speed

3              easing      : 'jswing',     // easing animation

4              dir         : 'leftright',  // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left,

5              overlay     : false,        // hover word slides on top of the current word (just for the case when the hover word equals word)

6              opacity     : true          // animate the letters’ opacity

You can easily learn web design techniques ....