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
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)
|