【问题标题】:jQuery text animation "explosion" effect on hover [closed]悬停时的jQuery文本动画“爆炸”效果[关闭]
【发布时间】:2016-07-31 06:23:17
【问题描述】:

尝试使用简单的 jQuery 从下面的链接中复制这个令人敬畏的“鼠标悬停”效果:http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445

任何提示或提示?请参阅上面链接中的“鼠标悬停”部分。

【问题讨论】:

  • codecanyon 网站的功能在 chrome 中似乎可以正常工作。
  • 效果很好!我在哪里可以买到呢?等等,你提供了链接!多么方便。谢谢。 -1
  • 这个想法是在不购买的情况下了解它的工作原理......

标签: javascript jquery css animation text


【解决方案1】:

这是我写的一个简单的 jQuery 代码:

// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/

$('.explodeMe').each(function() {
    var text = $(this).text();
    $(this).html(text.replace(/./g, "<span>$&</span>")); 
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
    min2 = -30, max2 = 30,
    random = Math.floor(Math.random() * (max - min + 1)) + min,
    random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
    css = "top:"+random+"px; left:"+random2+"px",
    el = $(this);
    el.on({
        mouseenter: function () {
            el.attr("style", css);
        },
        mouseleave: function () {
            setTimeout(function() {
            	el.removeAttr("style");
            }, 300);
        }
    });
});
.explodeMe span {
  position: relative;
  transition: 0.3s .1s;
  top:0;left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>

Codepen 演示:http://codepen.io/azizn/full/redbRa

逻辑:

  1. 将每个文本字符包装在&lt;span&gt; 标签内

  2. 使新的 span 标签相对定位,以便在不影响布局流程的情况下操纵它们的位置。

  3. 在悬停时将随机 CSS 样式分别应用于每个跨度(用于动态移动)

  4. 延迟后移除样式

位置变化使用 CSS transition 属性进行动画处理。

【讨论】:

  • Aziz,这正是我想要的。非常感谢,我将继续涉足它。
猜你喜欢
  • 2011-12-25
  • 1970-01-01
  • 2012-03-30
  • 1970-01-01
  • 1970-01-01
  • 2015-02-20
  • 1970-01-01
  • 2012-06-16
  • 1970-01-01
相关资源
最近更新 更多