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, 2022 in Web Development by gaurav
• 23,260 points
643 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, 2022 by rajatha
• 7,640 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, 2022 in Web Development by gaurav
• 23,260 points
410 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, 2022 in Web Development by rajatha
• 7,640 points
1,010 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, 2022 in Web Development by gaurav
• 23,260 points
7,219 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, 2022 in Web Development by gaurav
• 23,260 points
1,332 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
991 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,880 points
14,221 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,880 points
22,423 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,880 points
2,965 views
0 votes
1 answer

Date range picker on jquery ui datepicker

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
4,287 views
0 votes
1 answer

Why use jQuery on() instead of click()

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
240 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