diff options
Diffstat (limited to 'packages')
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-1.png | bin | 37046 -> 27160 bytes | |||
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-2.png | bin | 68311 -> 47878 bytes | |||
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-3.png | bin | 37805 -> 27505 bytes | |||
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-4.png | bin | 37148 -> 30727 bytes | |||
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-5.png | bin | 181796 -> 144454 bytes | |||
-rwxr-xr-x[-rw-r--r--] | packages/website/public/images/@next/0x-instant/widget-6.png | bin | 37812 -> 28382 bytes | |||
-rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 17 |
7 files changed, 10 insertions, 7 deletions
diff --git a/packages/website/public/images/@next/0x-instant/widget-1.png b/packages/website/public/images/@next/0x-instant/widget-1.png Binary files differindex 9c3abe97b..622c1f42c 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-1.png +++ b/packages/website/public/images/@next/0x-instant/widget-1.png diff --git a/packages/website/public/images/@next/0x-instant/widget-2.png b/packages/website/public/images/@next/0x-instant/widget-2.png Binary files differindex dbe662e89..7fec16cfb 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-2.png +++ b/packages/website/public/images/@next/0x-instant/widget-2.png diff --git a/packages/website/public/images/@next/0x-instant/widget-3.png b/packages/website/public/images/@next/0x-instant/widget-3.png Binary files differindex d74755361..91ac7d36a 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-3.png +++ b/packages/website/public/images/@next/0x-instant/widget-3.png diff --git a/packages/website/public/images/@next/0x-instant/widget-4.png b/packages/website/public/images/@next/0x-instant/widget-4.png Binary files differindex 45ef37fa6..3db35e068 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-4.png +++ b/packages/website/public/images/@next/0x-instant/widget-4.png diff --git a/packages/website/public/images/@next/0x-instant/widget-5.png b/packages/website/public/images/@next/0x-instant/widget-5.png Binary files differindex 992353efe..05cebf28b 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-5.png +++ b/packages/website/public/images/@next/0x-instant/widget-5.png diff --git a/packages/website/public/images/@next/0x-instant/widget-6.png b/packages/website/public/images/@next/0x-instant/widget-6.png Binary files differindex a4bd33de2..33def6e04 100644..100755 --- a/packages/website/public/images/@next/0x-instant/widget-6.png +++ b/packages/website/public/images/@next/0x-instant/widget-6.png 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; } } `; |