fix(classiques): reduce stops marquee scroll speed by 60% (duration 25s)
This commit is contained in:
1 parent
8449f502a4
commit
647ec37d99
3 files changed
+6
-2
No files matched your search
@@ -1,11 +1,13 @@
|
|||||||
import React, { useRef, useState, useEffect } from 'react';
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
import './MarqueeText.css';
|
import './MarqueeText.css';
|
||||||
|
|
||||||
const MarqueeText = ({ text, className, style }) => {
|
const MarqueeText = ({ text, className, style, duration = '10s' }) => {
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const textRef = useRef(null);
|
const textRef = useRef(null);
|
||||||
const [isOverflowing, setIsOverflowing] = useState(false);
|
const [isOverflowing, setIsOverflowing] = useState(false);
|
||||||
|
|
||||||
|
const formattedDuration = typeof duration === 'number' ? `${duration}s` : duration;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const checkOverflow = () => {
|
const checkOverflow = () => {
|
||||||
if (containerRef.current && textRef.current) {
|
if (containerRef.current && textRef.current) {
|
||||||
@@ -24,7 +26,7 @@ const MarqueeText = ({ text, className, style }) => {
|
|||||||
ref={textRef}
|
ref={textRef}
|
||||||
style={{
|
style={{
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
animation: isOverflowing ? 'marquee-scroll 10s linear infinite' : 'none',
|
animation: isOverflowing ? `marquee-scroll ${formattedDuration} linear infinite` : 'none',
|
||||||
paddingLeft: isOverflowing ? '100%' : '0',
|
paddingLeft: isOverflowing ? '100%' : '0',
|
||||||
fontSize: 'inherit',
|
fontSize: 'inherit',
|
||||||
fontWeight: 'inherit',
|
fontWeight: 'inherit',
|
||||||
|
|||||||
@@ -1314,6 +1314,7 @@ export default function ClassiquesArrivees(){
|
|||||||
<div className="aff-classiques-arrivees__sub-stops">
|
<div className="aff-classiques-arrivees__sub-stops">
|
||||||
<MarqueeText
|
<MarqueeText
|
||||||
className="aff-classiques-arrivees__sub-stops-marquee"
|
className="aff-classiques-arrivees__sub-stops-marquee"
|
||||||
|
duration="25s"
|
||||||
text={
|
text={
|
||||||
<span className="aff-classiques-arrivees__stops-chain">
|
<span className="aff-classiques-arrivees__stops-chain">
|
||||||
{stopsList.map((stopName, sIdx) => (
|
{stopsList.map((stopName, sIdx) => (
|
||||||
|
|||||||
@@ -1311,6 +1311,7 @@ export default function ClassiquesDeparts(){
|
|||||||
<div className="aff-classiques-departs__sub-stops">
|
<div className="aff-classiques-departs__sub-stops">
|
||||||
<MarqueeText
|
<MarqueeText
|
||||||
className="aff-classiques-departs__sub-stops-marquee"
|
className="aff-classiques-departs__sub-stops-marquee"
|
||||||
|
duration="25s"
|
||||||
text={
|
text={
|
||||||
<span className="aff-classiques-departs__stops-chain">
|
<span className="aff-classiques-departs__stops-chain">
|
||||||
{stopsList.map((stopName, sIdx) => (
|
{stopsList.map((stopName, sIdx) => (
|
||||||
|
|||||||
Reference in new issue
Block a user