diff options
Diffstat (limited to 'packages/website/ts/@next/pages/instant.tsx')
| -rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 86a2485ce..9f996b182 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -71,7 +71,7 @@ export const Next0xInstant = () => ( <Section isFullWidth={true} isPadded={false} padding="30px 0"> <MarqueeWrap> <div> - {[...Array(12)].map((item, index) => ( + {[...Array(18)].map((item, index) => ( <Card key={`card-${index}`} index={index}> <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} /> </Card> @@ -114,9 +114,10 @@ export const Next0xInstant = () => ( ); // scroll animation calc is simply (imageWidth * totalRepetitions) / 2 +// img width is 370px const scroll = keyframes` - 0% { transform: translate3d(0, 0, 0) } - 100% { transform: translate3d(-2220px, 0, 0) } + 0% { transform: translate3d(-2220px, 0, 0) } + 100% { transform: translate3d(-4440px, 0, 0) } `; const scrollMobile = keyframes` @@ -142,6 +143,7 @@ const ConfiguratorSection = styled(Section)<SectionProps>` `; // width = 370 * 12 +// mobile width = 300 const MarqueeWrap = styled.div` width: 100vw; height: 514px; @@ -151,19 +153,20 @@ const MarqueeWrap = styled.div` height: auto; display: flex; will-change: transform; + transform: translate3d(-2220px, 0, 0); } @media (min-width: 768px) { > div { - width: 4440px; - animation: ${scroll} 30s linear infinite; + width: 6660px; + animation: ${scroll} 70s linear infinite; } } @media (max-width: 768px) { > div { - width: 3600px; - animation: ${scrollMobile} 30s linear infinite; + width: 5400px; + animation: ${scrollMobile} 70s linear infinite; } } `; |