如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?

Posted

技术标签:

【中文标题】如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?【英文标题】:How to Fade In/Out multiple texts using CSS/jQuery like on Droplr? 【发布时间】:2013-06-19 17:14:22 【问题描述】:

当 CSS3 关键帧开始获得动力时,我在网站上看到过这种类型的动画,但我找不到它,也无法使用 CSS 或 jQuery 复制它,我认为你们中的一些人可以在这里帮助。

我已经动画化了我希望实现的目标,并将其嵌入到下方。我相信这可以使用新的 CSS3 关键帧或 jQuery 的 .animate();特征。我不知道。我已经尝试了我所知道的一切,但都是徒劳的。

这是我想要的 GIF 动画:

我刚刚注意到,http://droplr.com/ 在他们的主页上使用了非常相似的过渡,但有一些滑动效果。出现的数据(单词)都是随机的,一直都是。我想知道这怎么可能!

【问题讨论】:

你把这种方法叫做什么?有名字吗? 这叫做变形。 morphext.fyianlai.com 【参考方案1】:

DEMO

纯 CSS 的可能解决方案!

@-webkit-keyframes fade-in
from
    opacity:1;
    top:0px;

to
    opacity:0;
    top:-5px;


.text-animated-one
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;


.text-animated-two
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;


.aggettivi
display:inline;
width:100px;
height:100px;

【讨论】:

完美! :D 非常感谢! 当你的动画文本超过一行时它不起作用【参考方案2】:

我知道这个问题已经解决了,但我认为它可能对其他人有帮助,所以我决定分享 xD

我一直在寻找比这里提出的建议更顺畅的东西,在花了一些时间寻找之后,我制定了自己的解决方案

这里我们需要考虑一下关键帧的时间线,在这种情况下,文本只会在另一个已经完成淡入淡出动画时显示

div
  posititon: relative;

.js-nametag
  position: absolute;

.js-nametag:nth-child(1)
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  



.js-nametag:nth-child(2)
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;


@keyframes fade
    0%,50% 
      opacity: 0;

    100%
      opacity: 1;
  
  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>

https://codepen.io/theNewt/details/PdWeKX

【讨论】:

这太棒了!您将如何向其中添加第 3 位文本并调整关键帧,使其在无限循环中的 3 之间淡入/淡出? 您好,感谢您的提问,不幸的是,此解决方案最多仅适用于两个短语,对于两个以上和/或动态数字,我建议您使用 JS 或 Jquery 为该动画创建更强大的内容, ;) 这非常有效!可以通过修改animation-duration来改变淡入淡出时间【参考方案3】:

一些广泛的 Google 搜索和实验使我能够及时回答自己的问题!

如果你们中的任何人想知道如何做到这一点,请查看我写的这个 CodePen sn-p:http://codepen.io/AmruthPillai/pen/axvqB

【讨论】:

@Nick-R 该方法包括必须在自己的 jQuery 脚本中输入单词。当内容是动态的时候呢?无论如何,我找到了一种方法,使用 html 作为数据源,使用 jQuery 作为动画师。查看上面答案中的链接! :) 很高兴您找到了解决方案 :) 好吧,我重新编写了我找到的示例(使用array 存储单词的示例)-这是我的修改版本-jsfiddle.net/kMBMp/1 它有效通过循环遍历unordered 列表,其中包含display:none。因此,如果单词是dynamically generated,这种方法肯定会起作用。【参考方案4】:

类似这样的:

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden display:none;
span  position: absolute; left:45px; top:10px;
p width:200px; border:1px solid #000; padding:10px; position:relative;

jQuery

$(document).ready(function() 

    // run the fade() function every 2 seconds
    setInterval(function()
        fade();
    ,2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade()
        $("span").fadeToggle(300);
    

);

注意:这仅适用于切换 2 个单词,最好有一个单词数组,并编写一个函数来循环遍历这些单词并应用 `fadeIn/fadeOut 动画。

编辑:这是一个针对多个单词的解决方案 - https://***.com/a/2772278/2470724 它使用 array 来存储每个单词,然后循环遍历它们。

编辑 2 :非数组解决方案:http://jsfiddle.net/kMBMp/ 此版本循环通过带有 display:noneun-ordered list

【讨论】:

我正要问你一个选择更多的词! :D 一个函数循环?我错误地认为这将是在公园里散步编码:P 感谢您花时间写这篇文章,这当然很有帮助。看看我对这个问题的编辑,可能会对这个话题有更多的了解。 @Amruth A. Pillai 我刚刚找到了您想要的多个单词 - ***.com/a/2772278/2470724 这就是我正在考虑为解决方案编写的内容。所以你有一个array 的单词。像这样var terms = ["term 1", "term 2", "term 3"]【参考方案5】:

最省力的方法可能是使用 Morphext jQuery 插件:

https://github.com/MrSaints/Morphext

它由 animate.css 提供支持,因此可以轻松更改文本的动画样式。

如果您正在寻找更强大的东西(可以指定输入和输出动画;动画不仅仅是文本),有一个名为 Morphist 的衍生产品:

https://github.com/MrSaints/Morphist

【讨论】:

以上是关于如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?的主要内容,如果未能解决你的问题,请参考以下文章

Netty实战十四之案例研究

在 NodeJS 上使用 jQuery 的函数 css()

如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面

jquery datepicker在页面上刷新数据

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?