之前的一个 pc 端项目,有文字滚动的功能,找了下,没有合适的轮子,于是自己造了一个
目前只支持横向滚动
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)
.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;
}
有更好实现思路的童鞋可以来给我上一课[让我看看]
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。