aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 02:11:55 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 02:11:55 +0800
commita900593c8803b3d8761044b2874b2ab4d3640e69 (patch)
tree61e865855f14e627ec3518bef384fcdddb6866aa /packages/website/ts/@next
parent48fdb567cb9cb29f747b368bb0e8aeb363c82920 (diff)
downloaddexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.gz
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.bz2
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.lz
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.xz
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.tar.zst
dexon-sol-tools-a900593c8803b3d8761044b2874b2ab4d3640e69.zip
Tests transition in instant
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/pages/instant.tsx39
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;
+ }
+`;