如何逐字隐藏滚动文本

Posted

技术标签:

【中文标题】如何逐字隐藏滚动文本【英文标题】:how to hidden the scrolling text word by word 【发布时间】:2016-06-09 04:48:49 【问题描述】:

我想逐字从左到右滚动文本。就像这个page,单词逐字滚动直到最后一个单词。然后在隐藏最后一个单词后重新开始。

我没有在 ios 上使用 <marquee>,因为滚动文本看起来不像在 android 中那样平滑滚动。所以,我对我的code 做了一些更改。

结果是滚动文本直到最后一个单词才逐字隐藏。最后一个字还没翻完,突然半路消失了。然后它又开始 srcolling。

【问题讨论】:

尝试-100%的-130px属性 当我输入 -230% 时它起作用了。但是如果字符小于我的代码中的文本数。再次显示滚动文本已经很晚了。 【参考方案1】:

试试这个css代码

body 
cursor: url('http://ionicframework.com/img/finger.png'), auto;


.scroll-left 
height: 50px;
position: relative;
overflow: hidden;


.scroll-left p 
white-space: nowrap !important;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
/* Apply animation to this element */
-moz-animation: scroll-left 20s linear infinite;
-webkit-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;


@-moz-keyframes scroll-left 
0% 
    -moz-transform: translateX(100%);

100% 
    -moz-transform: translateX(-100%);



@-webkit-keyframes scroll-left 
0% 
    -webkit-transform: translateX(100%);

100% 
    -webkit-transform: translateX(-100%);



@keyframes scroll-left 
0% 
    -moz-transform: translateX(100%);
    /* Browser bug fix */
    -webkit-transform: translateX(100%);
    /* Browser bug fix */
    transform: translateX(100%);

100% 
    -moz-transform: translateX(-100%);
  width:165%;
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);


【讨论】:

该代码确实逐字隐藏了滚动文本,但直到单词末尾才隐藏。它突然消失并从头开始滚动文本

以上是关于如何逐字隐藏滚动文本的主要内容,如果未能解决你的问题,请参考以下文章

滚动表格视图时隐藏文本字段数据

如何在 UIView 中设置滚动视图以向上滑动被键盘隐藏的文本字段?

如何在页面滚动时隐藏元素?

当用户滚动时如何显示或隐藏日期文本视图就像whatsapp聊天android Kotlin

不需要时如何隐藏垂直滚动条

在滚动视图中隐藏文本视图