diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 02:11:55 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 02:11:55 +0800 |
commit | a900593c8803b3d8761044b2874b2ab4d3640e69 (patch) | |
tree | 61e865855f14e627ec3518bef384fcdddb6866aa | |
parent | 48fdb567cb9cb29f747b368bb0e8aeb363c82920 (diff) | |
download | dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.gz dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.bz2 dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.lz dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.xz dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.zst dexon-0x-contracts-a900593c8803b3d8761044b2874b2ab4d3640e69.zip |
Tests transition in instant
-rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 39 |
1 files changed, 34 insertions, 5 deletions
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index b20a2c044..442aa0c8b 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -71,9 +71,9 @@ export const Next0xInstant = () => ( <Section isFullWidth={true} isPadded={false} padding="30px 0"> <MarqueeWrap> <div> - <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> - <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> - <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> + {[...Array(20)].map((item, index) => ( + <Card index={index} /> + ))} </div> </MarqueeWrap> </Section> @@ -110,17 +110,31 @@ export const Next0xInstant = () => ( </SiteWrap> ); +// scroll calc for infinite is (width * total / 2) + padding const scroll = keyframes` 0% { transform: translate3d(0, 0, 0) } - 100% { transform: translate3d(-1715.18px, 0, 0) } + 100% { transform: translate3d(-2615px, 0, 0) } `; + +const fadeUp = keyframes` + 0% { + opacity: 0; + transform: translateY(50px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +`; + +// width = (260 * 20) - (15 * 19) const MarqueeWrap = styled.div` width: 100vw; height: 380px; padding-bottom: 60px; > div { - width: 5145.54px; + width: 5485px; height: 380px; display: flex; animation: ${scroll} 20s linear infinite; @@ -131,3 +145,18 @@ const MarqueeWrap = styled.div` } } `; + +const Card = styled.div` + width: 260px; + height: 370px; + background: #555; + border-radius: 5px; + display: inline-block; + opacity: 0; + transform: translateY(10px); + animation: ${fadeUp} 0.5s ${props => `${props.index * 0.05}s`} forwards; + + & + & { + margin-left: 15px; + } +`; |