大型文本行高度动画

我正在为我的业务设计一个网站，我正在拼命地尝试使交互式设计理念发挥作用。大型文本行高度动画

我将我的标志设置为白色而不是文字。 Here's an image。我非常喜欢它，我使用了整个侧边栏的文字体。

现在我一直在试图将背景文本的行高属性设置为"fade in" the white logo。

问题是，为了让足够的文本行使徽标和侧边栏文本脱颖而出，我必须有一大块文本。

现在，我正在使用大约6700行长的文本。

我试过两种基本的方法来设置线高度变化的动画。但是，这种变化总是突然而且稍微延迟。

1）我添加了一个transition: all声明的CSS文本：

#text { 
text-align: right; 
font-size: 30%; 
height: 100px; 
line-height: 7.0 em; 
transition: all 500ms ease;

然后我写了一个函数与一系列滑块以更改行高。滑块可以工作，但不存在转换 - 即使只有一步（0.01em），行高也会瞬时变化。

2）我从gsgd.co.uk下载并安装了jQuery easings插件。然后我做了它，所以每次点击标志时文本的行高都会下降。

$(document).ready(function(){ 
    $("#logo").click(function(){ 
     $("#text").animate({ 
     "line-height": "-=0.5em"}, 
     1000, 
     "easeInOutQuad" 
     ); 
    }); 
});

在我尝试了这个之前，我在三行文本上测试了easeInOutBounce。缓动插件工作，虽然它不像我希望的那样流畅。而在文字的大墙上，线条高度的变化仍然是瞬间的。事实上，它缓冲;文本会缩小到一行，我会用滑块将它带回4em，然后行高将继续收缩（突然突发），就像它没有处理完所有的点击一样。

所以我认为浏览器是在极限（我正在使用Chrome BTW）。不过，我真的很喜欢这个主意。

有什么办法可以使这样的工作？如果没有，那么在浏览器放弃之前，您可以尝试使用多少文字进行动画处理？

来源

2014-10-05 danwroy

能你请为你的代码做一个jsfiddle – 2014-10-05 10:41:36

我从来没有做过一个jsfiddle。你想要整个6700行的文字吗？ – danwroy 2014-10-06 23:47:57

在这里，你去。由于某种原因，我无法让滑块工作：http://jsfiddle.net/6yuqus8r/ – danwroy 2014-10-07 01:20:38

感谢您制作JSFiddle，虽然我们完全可以通过使用jQuery与easing插件完成它，但最好尽可能使用CSS3，所以我有。

改变了CSS：

#text { 
text-align: /*justify*/ right; 
font-size: 30%; 
height: 50px; 
line-height: 0.5em; 
transition: all 2000ms ease; 
} 

#text.anime { 
    line-height: 5em; 
}

改变了的Javascript：

$(document).ready(function(){ 
    $("#logo").click(function(){ 
     // you can use addClass or toggleClass if you want to toggle it 
     //$('#text').addClass('anime'); 
     $('#text').toggleClass('anime'); 
    }); 
});

您可以检查的jsfiddle叉：http://jsfiddle.net/sameersemna/74fg3tn1/1/

希望你得到你想要的东西:)

来源

2014-10-07 06:05:22

大型文本行高度动画

回答

相关问题