react 文字跑马灯

之前的一个 pc 端项目,有文字滚动的功能,找了下,没有合适的轮子,于是自己造了一个

目前只支持横向滚动

index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { useRef, useEffect, useState } from 'react'
import './index.css'
import styled from 'styled-components'

interface TextScrollProps {
/**
* 内容
*/
content: string
/**
* 持续时间/s
*/
duration: number
}

function TextScroll(props: TextScrollProps) {
const { content, duration } = props

const defaultState = {
contentWidth: 0,
left: 0,
duration,
}

const [state, setState] = useState(defaultState)

let ref = useRef<HTMLParagraphElement>(null)

useEffect(() => {
const { offsetWidth, parentElement } = ref.current as HTMLParagraphElement

setState({
...state,
contentWidth: offsetWidth,
left: parentElement!.offsetWidth,
})
}, [])

const { contentWidth, left, duration: timing } = state

const animationName = `marquee_${contentWidth}`

const Text = styled.p`
position: relative;
left: ${left}px;
animation: ${animationName} ${timing}s linear infinite both;
animation-play-state: running;
animation-fill-mode: forwards;

@keyframes ${animationName} {
0% {
transform: translateX(0px);
}

100% {
transform: translateX(-${contentWidth + left}px);
}
}
`

return (
<div className="marquee_box">
<Text ref={ref}>{content}</Text>
</div>
)
}
TextScroll.defaultProps = {
content: '',
duration: 3,
}

export default React.memo(TextScroll)

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.marquee_box {
width: 100%;
height: 100%;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
display: flex;
align-items: center;
}

.marquee_box p {
display: inline-block;
}

.marquee_box:hover p {
animation-play-state: paused;
cursor: default;
}

有更好实现思路的童鞋可以来给我上一课[让我看看]

预览地址

Edit react 文字跑马灯

更多实用组件:https://github.com/isxiaoxin/front_end_wheel