szld-libs 0.2.38 → 0.2.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/szld-components.es.js +1991 -1974
- package/dist/szld-components.umd.js +33 -33
- package/es/components/LoopSlide/index.css +3 -0
- package/es/components/LoopSlide/index.d.ts +1 -0
- package/es/components/LoopSlide/index.js +23 -2
- package/es/index.js +4 -4
- package/lib/components/LoopSlide/index.css +3 -0
- package/lib/components/LoopSlide/index.d.ts +1 -0
- package/lib/components/LoopSlide/index.js +23 -2
- package/lib/index.js +4 -4
- package/package.json +1 -1
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
height: 100%;
|
|
11
11
|
--content-height: 0px;
|
|
12
12
|
animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
|
|
13
|
+
backface-visibility: hidden;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
image-rendering: -webkit-optimize-contrast;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.LoopSlide-module_content_f392a {
|
|
@@ -17,7 +17,8 @@ const LoopSlide = ({
|
|
|
17
17
|
className = "",
|
|
18
18
|
style,
|
|
19
19
|
children,
|
|
20
|
-
height = "100vh"
|
|
20
|
+
height = "100vh",
|
|
21
|
+
mouseControl = false
|
|
21
22
|
}) => {
|
|
22
23
|
const wrapperRef = useRef(null);
|
|
23
24
|
const containerRef = useRef(null);
|
|
@@ -62,7 +63,27 @@ const LoopSlide = ({
|
|
|
62
63
|
}
|
|
63
64
|
};
|
|
64
65
|
}, [speed, delay]);
|
|
65
|
-
|
|
66
|
+
const handleMouseEnter = () => {
|
|
67
|
+
if (mouseControl && containerRef.current) {
|
|
68
|
+
containerRef.current.style.animationPlayState = "paused";
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const handleMouseLeave = () => {
|
|
72
|
+
if (mouseControl && containerRef.current) {
|
|
73
|
+
containerRef.current.style.animationPlayState = "running";
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
"div",
|
|
78
|
+
{
|
|
79
|
+
ref: wrapperRef,
|
|
80
|
+
className: `${styles.wrapper} ${className}`,
|
|
81
|
+
style: { height, ...style },
|
|
82
|
+
onMouseEnter: handleMouseEnter,
|
|
83
|
+
onMouseLeave: handleMouseLeave,
|
|
84
|
+
children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) })
|
|
85
|
+
}
|
|
86
|
+
);
|
|
66
87
|
};
|
|
67
88
|
export {
|
|
68
89
|
LoopSlide as default
|
package/es/index.js
CHANGED
|
@@ -61,11 +61,11 @@ const Demo = () => {
|
|
|
61
61
|
border: "1px solid #333",
|
|
62
62
|
margin: "20px"
|
|
63
63
|
},
|
|
64
|
-
children: /* @__PURE__ */ jsx(LoopSlide, { speed:
|
|
65
|
-
/* @__PURE__ */ jsx("h2", { style: { fontSize: "
|
|
64
|
+
children: /* @__PURE__ */ jsx(LoopSlide, { speed: 6, height: "100%", mouseControl: false, children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
|
|
65
|
+
/* @__PURE__ */ jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
|
|
66
66
|
section.people.map((person, j) => /* @__PURE__ */ jsxs("div", { children: [
|
|
67
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
68
|
-
person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
67
|
+
/* @__PURE__ */ jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
|
|
68
|
+
person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
|
|
69
69
|
] }, j))
|
|
70
70
|
] }, i)) }) })
|
|
71
71
|
}
|
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
height: 100%;
|
|
11
11
|
--content-height: 0px;
|
|
12
12
|
animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
|
|
13
|
+
backface-visibility: hidden;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
image-rendering: -webkit-optimize-contrast;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.LoopSlide-module_content_f392a {
|
|
@@ -18,7 +18,8 @@ const LoopSlide = ({
|
|
|
18
18
|
className = "",
|
|
19
19
|
style,
|
|
20
20
|
children,
|
|
21
|
-
height = "100vh"
|
|
21
|
+
height = "100vh",
|
|
22
|
+
mouseControl = false
|
|
22
23
|
}) => {
|
|
23
24
|
const wrapperRef = react.useRef(null);
|
|
24
25
|
const containerRef = react.useRef(null);
|
|
@@ -63,6 +64,26 @@ const LoopSlide = ({
|
|
|
63
64
|
}
|
|
64
65
|
};
|
|
65
66
|
}, [speed, delay]);
|
|
66
|
-
|
|
67
|
+
const handleMouseEnter = () => {
|
|
68
|
+
if (mouseControl && containerRef.current) {
|
|
69
|
+
containerRef.current.style.animationPlayState = "paused";
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const handleMouseLeave = () => {
|
|
73
|
+
if (mouseControl && containerRef.current) {
|
|
74
|
+
containerRef.current.style.animationPlayState = "running";
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
ref: wrapperRef,
|
|
81
|
+
className: `${styles.wrapper} ${className}`,
|
|
82
|
+
style: { height, ...style },
|
|
83
|
+
onMouseEnter: handleMouseEnter,
|
|
84
|
+
onMouseLeave: handleMouseLeave,
|
|
85
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) })
|
|
86
|
+
}
|
|
87
|
+
);
|
|
67
88
|
};
|
|
68
89
|
module.exports = LoopSlide;
|
package/lib/index.js
CHANGED
|
@@ -62,11 +62,11 @@ const Demo = () => {
|
|
|
62
62
|
border: "1px solid #333",
|
|
63
63
|
margin: "20px"
|
|
64
64
|
},
|
|
65
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed:
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "
|
|
65
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 6, height: "100%", mouseControl: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
66
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
|
|
67
67
|
section.people.map((person, j) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "
|
|
69
|
-
person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
|
|
69
|
+
person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
|
|
70
70
|
] }, j))
|
|
71
71
|
] }, i)) }) })
|
|
72
72
|
}
|