用动画显示一个句子
我想显示一个带有动画的句子,如this site(最先进的机器学习意味着更多的销售)。用动画显示一个句子
html正文如下。看来,它可能会改变:
Where state-of-the-art machine learning means more
<span class="js-animate-words" style="width: 281px; height: 64px; display: inline-block;">
<span class="js-animate-words__label js-animate-words__label--in">sales.</span>
<span class="js-animate-words__label">discovery.</span>
<span class="js-animate-words__label">relevance.</span>
</span>
的CSS是:
.js-animate-words {
position:relative;
}
.js-animate-words__label--in {
opacity:1;
transform:scale(1);
}
.js-animate-words__label--out {
opacity:0;
transform:scale(0.8);
}
.js-animate-words__label {
left:0;
opacity:0;
position:absolute;
transform:scale(1.2);
transition:all 0.8s ease;
white-space:nowrap;
}
但是,我无法找到他们所使用的JavaScript库。因此, JSBin不起作用。
有谁知道如何解决它?
此外,如果我想保留相同长度如果改变的话呢?举例来说,我想表明
(sometimes:)
Where state-of-the-art machine learning means more sales.
(sometimes:)
Where state-of-the-art data mining means more sales.
我在他们app.min.js发现,他们正在做的类变化。看起来他们正在做一些简单的宽度/高度计算,具有setTimeout
函数。以下是处理该问题的代码:
$(function() {
var t, e, o = $(".js-animate-words"), n = 0, i = 3500, s = function() {
var e = 0
, n = 0;
t.each(function() {
var t = $(this);
t.width() > e && (e = t.width()),
t.outerHeight() > n && (n = t.outerHeight())
}),
o.css({
width: e,
height: n
});
var i = o.offset()
, s = $(window).width() - 20
, r = i.left + e;
r > s ? o.css({
display: "block"
}) : o.css({
display: "inline-block"
}),
o.parent("h1").css({
position: "relative",
top: "1px"
}),
setTimeout(function() {
o.parent("h1").css({
position: "relative",
top: ""
})
}, 1e3)
}
, r = function() {
t.removeClass("js-animate-words__label--in"),
t.eq(n).addClass("js-animate-words__label--in"),
"" !== e && t.eq(e).addClass("js-animate-words__label--out"),
setTimeout(function() {
n < t.length - 1 ? n++ : n = 0,
e = n - 1 >= 0 ? n - 1 : t.length - 1,
r()
}, i)
}
, a = function() {
for (var e = o.text().split(","), n = e.length, i = "", a = 0; n > a; a++)
i += '<span class="js-animate-words__label">' + e[a].trim() + "</span>";
o.html(i),
t = $(".js-animate-words__label"),
t.on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(t) {
$(this).hasClass("js-animate-words__label--out") && $(this).removeClass("js-animate-words__label--out")
}),
s(),
$(window).on("resize", s),
r()
}
;
o.length && a()
})
为什么我只能看到[此代码](https://s4.postimg.org/p8hqv9p59/Screen_Shot_2016_08_15_at_04_51_47.png)for app.min.js' ?你可以让JSBin工作吗? – SoftTimur
尝试使用Chrome DevTools检查页面。[这是我的发现](http://recordit.co/0X2EEHzbSB) –
对该链接代码的粗略检查显示他们正在使用jquery和bootstrap。 – Scott
我添加了jquery和bootstrap,它仍然不起作用... – SoftTimur