jQuery text animation explosion effect on hover

0 votes

Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445

Any pointers or tips? See "Mouse over Escape" section in link above.

Aug 3 in Web Development by gaurav
• 18,960 points
71 views

1 answer to this question.

0 votes

The logic:

  1. Wrap each textual character inside a <span> tag

  2. Make the new span tags relatively positioned to manipulate their location without affecting layout flow.

  3. Apply randomized CSS style to each span separately (for dynamic movement) on hover

  4. Remove the style after a delay

The position change is animated using the CSS transition property.

answered Aug 4 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

jQuery animation fade effect

The fade effect here isn't working.... ui.fadebox is a ...READ MORE

Jul 25 in Web Development by gaurav
• 18,960 points
30 views
0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,440 points
76 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
1,250 views
0 votes
0 answers

jQuery - Read More / Read Less. How to replace text?

HTML: <a href="#" class="show_hide" data-content="toggle-text">Read More</a> jQuery: // Slide Up ...READ MORE

Jul 1 in Web Development by gaurav
• 18,960 points
112 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
334 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
9,373 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
16,593 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,780 points
1,440 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
497 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
26 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP