Skip to content

Commit b0095d3

Browse files
lewhuntlewhunt
committed
inverting navigation so it better suits scrolling and has cleaner image transitions (from user feedback)
1 parent e43ef76 commit b0095d3

File tree

7 files changed

+28
-27
lines changed

7 files changed

+28
-27
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</p>
1515

1616
<p align='center'><i><small>
17-
A React UI component that lets you stack, swipe & slide through HTML elements on the 3D z-axis</small></i></p>
17+
A React UI component that lets you scroll, swipe & slide through HTML elements on the 3D z-axis</small></i></p>
1818

1919
<p dir="auto" align='center'><a href="https://lewhunt.github.io/divz/" rel="nofollow"><img align='center' src="https://lewhunt.github.io/assets/readme/divz-demo1.gif" alt="https://lewhunt.github.io/divz/"></a></p>
2020

‎index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Divz - Stack, Swipe, Slide & Zoom Divs on the 3D Z-Axis</title>
7+
<title>
8+
Divz - Scroll, Swipe & Slide through HTML divs on the 3D Z-Axis
9+
</title>
810
<meta
911
name="description"
10-
content="Divz is a free open-source React UI component that lets you stack, swipe, slide and zoom through HTML elements on the 3D z-axis"
12+
content="Divz is a free open-source React UI component that lets you scroll, swipe & slide and zoom through HTML elements on the 3D z-axis"
1113
/>
1214

1315
<meta
@@ -18,7 +20,7 @@
1820

1921
<meta
2022
property="og:title"
21-
content="Divz - Stack, Swipe, Slide & Zoom Divs on the 3D Z-Axis"
23+
content="Divz - Scroll, Swipe & Slide on the 3D Z-Axis"
2224
/>
2325

2426
<meta
@@ -29,27 +31,27 @@
2931
<meta name="twitter:card" content="summary_large_image" />
3032
<meta
3133
name="twitter:title"
32-
content="Divz - Stack, Swipe, Slide & Zoom Divs on the 3D Z-Axis"
34+
content="Divz - Scroll, Swipe & Slide on the 3D Z-Axis"
3335
/>
3436
<meta
3537
name="twitter:description"
36-
content="Divz is a free open-source React UI component that lets you stack, swipe, slide and zoom through HTML elements on the 3D z-axis"
38+
content="Divz is a free open-source React UI component that lets you scroll, swipe & slide and zoom through HTML elements on the 3D z-axis"
3739
/>
3840
<meta
3941
property="og:image"
4042
content="https://lewhunt.github.io/assets/readme/divz-screenshot.png"
4143
/>
4244
<meta
4345
property="og:image:alt"
44-
content="Divz is a free open-source React UI component that lets you stack, swipe, slide and zoom through HTML elements on the 3D z-axis"
46+
content="Divz is a free open-source React UI component that lets you scroll, swipe & slide and zoom through HTML elements on the 3D z-axis"
4547
/>
4648
<meta property="og:site_name" content="GitHub" />
4749
<meta property="og:type" content="object" />
4850

4951
<meta property="og:url" content="https://lewhunt.github.io/divz/" />
5052
<meta
5153
property="og:description"
52-
content="Divz is a free open-source React UI component that lets you stack, swipe, slide and zoom through HTML elements on the 3D z-axis"
54+
content="Divz is a free open-source React UI component that lets you scroll, swipe & slide and zoom through HTML elements on the 3D z-axis"
5355
/>
5456
</head>
5557
<body>

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "divz",
33
"author": "Lewis Hunt",
4-
"description": "A React UI component that lets you stack, swipe, slide and zoom through HTML elements on the 3D z-axis",
4+
"description": "A React UI component that lets you scroll, swipe & slide through HTML elements on the 3D z-axis",
55
"private": false,
6-
"version": "1.0.1",
6+
"version": "1.1.0",
77
"type": "module",
88
"homepage": "https://lewhunt.github.io/divz",
99
"repository": "https://github.com/lewhunt/divz.git",

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function App() {
3333
</div>
3434
<h1>divz</h1>
3535
<small>
36-
A React component that lets you stack, swipe and slide divs on the 3D
36+
A React component to scroll, swipe and slide through divs on the 3D
3737
z-axis
3838
</small>
3939
<a className="github" href="https://github.com/lewhunt/divz">

‎src/lib/Divz/Divz.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ body {
2323
width: 100%;
2424
height: 100%;
2525
transform-style: preserve-3d;
26-
transform: translateZ(-30000px);
26+
transform: translateZ(500px);
2727
}

‎src/lib/Divz/Divz.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const Divz: React.FC<DivzProps> = ({
3636
isDarkMode = false,
3737
autoPlay = false,
3838
isAutoPlayLooped = true,
39-
autoPlayDuration = 6000,
39+
autoPlayDuration = 5000,
4040
showPlayButton = true,
4141
showNavButtons = true,
4242
showExpandButton = true,
@@ -56,7 +56,7 @@ export const Divz: React.FC<DivzProps> = ({
5656
const zoomIncrement = isSnapEnabled ? snapInterval : snapInterval / 3;
5757
const maxZoom = 0;
5858
const minZoom = -(numChildren * snapInterval) + snapInterval;
59-
const zoomLevel = useRef<number>(minZoom);
59+
const zoomLevel = useRef<number>(maxZoom);
6060

6161
useEffect(() => {
6262
if (!divzListRef.current) return;
@@ -89,7 +89,7 @@ export const Divz: React.FC<DivzProps> = ({
8989
const items = divzListRef.current?.children;
9090
if (items) {
9191
for (let i = 0; i < items.length; i++) {
92-
const translateZ = snapInterval * (items.length - i);
92+
const translateZ = snapInterval * i + snapInterval;
9393
(
9494
items[i] as HTMLElement
9595
).style.transform = `translateZ(${translateZ}px)`;
@@ -104,7 +104,7 @@ export const Divz: React.FC<DivzProps> = ({
104104
const updateTranslateFromIndex = (index: number) => {
105105
if (index !== undefined && index < numChildren && divzListRef.current) {
106106
divzListRef.current.style.transition = `transform 0.01s ease`;
107-
zoomLevel.current = minZoom + index * snapInterval;
107+
zoomLevel.current = maxZoom - index * snapInterval;
108108
divzListRef.current.style.transform = `translateZ(${zoomLevel.current}px)`;
109109
setSelectedIndex(index);
110110
}
@@ -120,7 +120,7 @@ export const Divz: React.FC<DivzProps> = ({
120120
if (playing) {
121121
autoplayTimer = setInterval(() => {
122122
if (selectedIndex < numChildren - 1) {
123-
zoomLevel.current += zoomIncrement;
123+
zoomLevel.current -= zoomIncrement;
124124
changeTranslate();
125125
} else {
126126
updateTranslateFromIndex(0);
@@ -143,8 +143,7 @@ export const Divz: React.FC<DivzProps> = ({
143143
useEffect(() => setPlaying(autoPlay), [autoPlay]);
144144

145145
const updateSelectedIndex = () => {
146-
const currentIndex =
147-
numChildren - 1 - Math.abs(Math.round(zoomLevel.current / snapInterval));
146+
const currentIndex = Math.abs(Math.round(zoomLevel.current / snapInterval));
148147
setSelectedIndex(currentIndex);
149148
};
150149

@@ -178,11 +177,11 @@ export const Divz: React.FC<DivzProps> = ({
178177
const deltaY = touchY - touchStartY;
179178

180179
if (deltaY > 10) {
181-
if (zoomLevel.current < minZoom) return;
182-
zoomLevel.current -= zoomIncrement / 4;
183-
} else if (deltaY < -10) {
184180
if (zoomLevel.current > maxZoom) return;
185181
zoomLevel.current += zoomIncrement / 4;
182+
} else if (deltaY < -10) {
183+
if (zoomLevel.current < minZoom) return;
184+
zoomLevel.current -= zoomIncrement / 4;
186185
}
187186

188187
setPlaying(false);
@@ -196,11 +195,11 @@ export const Divz: React.FC<DivzProps> = ({
196195
}
197196

198197
if (event.deltaY > 10) {
199-
if (zoomLevel.current > maxZoom) return;
200-
zoomLevel.current += zoomIncrement / 10;
201-
} else if (event.deltaY < -10) {
202198
if (zoomLevel.current < minZoom) return;
203199
zoomLevel.current -= zoomIncrement / 10;
200+
} else if (event.deltaY < -10) {
201+
if (zoomLevel.current > maxZoom) return;
202+
zoomLevel.current += zoomIncrement / 10;
204203
}
205204

206205
setPlaying(false);

‎src/lib/Divz/components/DivzNavButtons.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const DivzNavButtons: React.FC<DivzNavButtonsProps> = ({
3131
>
3232
<div
3333
className={cn("divz-nav-button", {
34-
disabled: selectedIndex === itemsCount - 1,
34+
disabled: selectedIndex === 0,
3535
})}
3636
onClick={handleNext}
3737
onTouchStart={handleNext}
@@ -44,7 +44,7 @@ export const DivzNavButtons: React.FC<DivzNavButtonsProps> = ({
4444
</div>
4545
<div
4646
className={cn("divz-nav-button", {
47-
disabled: selectedIndex === 0,
47+
disabled: selectedIndex === itemsCount - 1,
4848
})}
4949
onClick={handlePrevious}
5050
onTouchStart={handlePrevious}

0 commit comments

Comments
 (0)