Skip to content

Commit

Permalink
Merge pull request #261 from hepengwei/feat_he
Browse files Browse the repository at this point in the history
新增鼠标Hover交互效果3
  • Loading branch information
hepengwei authored Dec 12, 2024
2 parents 3601193 + 760d964 commit f7151ce
Show file tree
Hide file tree
Showing 24 changed files with 146 additions and 3 deletions.
1 change: 0 additions & 1 deletion docs/2926.js

This file was deleted.

1 change: 1 addition & 0 deletions docs/8868.js

Large diffs are not rendered by default.

Binary file added docs/images/2d40aaff.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/4c6b00fb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/6a5e2167.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/main.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/styles/pages/2926.2324bf41.css

This file was deleted.

1 change: 1 addition & 0 deletions docs/styles/pages/8868.778d45c9.css

Large diffs are not rendered by default.

Binary file removed src/images/amazon_ads_logo.png
Binary file not shown.
Binary file removed src/images/canvas/coin1.png
Binary file not shown.
Binary file removed src/images/canvas/coin2.png
Binary file not shown.
Binary file removed src/images/canvas/coin3.png
Binary file not shown.
Binary file removed src/images/canvas/coin4.png
Binary file not shown.
Binary file removed src/images/canvas/coin5.png
Binary file not shown.
Binary file removed src/images/canvas/coin6.png
Binary file not shown.
Binary file removed src/images/canvas/coin7.png
Binary file not shown.
Binary file added src/images/html/car1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/html/car2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/html/car3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions src/pages/html/InteractiveDesign/components/MouseHover3/Card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { useRef, useEffect, useCallback } from "react";
import styles from "./card.module.scss";

interface CardProps {
url: string;
}

const Card = (props: CardProps) => {
const { url } = props;
const containerRef = useRef<HTMLDivElement>(null);

const onMouseMove = useCallback((e: MouseEvent) => {
if (containerRef.current) {
const { clientX, clientY } = e;
const { x, y } = containerRef.current.getBoundingClientRect();
containerRef.current.setAttribute(
"style",
`--url: url("${url}"); --x: ${clientX - x}px; --y: ${clientY - y}px`
);
}
}, []);

useEffect(() => {
if (containerRef.current && url) {
containerRef.current.setAttribute("style", `--url: url("${url}")`);
}
window.addEventListener("mousemove", onMouseMove);

return () => {
window.removeEventListener("mousemove", onMouseMove);
};
}, []);

return (
<div className={styles.container} ref={containerRef}>
<div className={styles.content} />
</div>
);
};

export default Card;
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.container {
$borderRadius: 24px;
width: 300px;
height: 424px;
display: flex;
justify-content: center;
align-items: center;
border-radius: $borderRadius;
cursor: pointer;
overflow: hidden;
position: relative;

&::before {
content: "";
opacity: 0;
transition: opacity 0.6s;
position: absolute;
inset: 0;
border-radius: $borderRadius;
background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
mask: radial-gradient(
circle at var(--x) var(--y),
#000,
#000,
transparent,
transparent,
transparent
);
}

&:hover {
&::before {
opacity: 1;
}
}

.content {
border-radius: $borderRadius;
overflow: hidden;
position: absolute;
inset: 3px;

&::before,
&::after {
content: "";
position: absolute;
background: var(--url);
background-size: cover;
background-position: center;
border-radius: $borderRadius;
}

&::before {
inset: 0;
filter: blur(20px);
}

&::after {
inset: 40px;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.container {
width: 100%;
height: 560px;
display: flex;
justify-content: center;
align-items: center;

.content {
width: 70%;
max-width: 1300px;
min-width: 900px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
22 changes: 22 additions & 0 deletions src/pages/html/InteractiveDesign/components/MouseHover3/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useRef, useEffect, useCallback } from "react";
import Card from "./Card";
import car1 from "images/html/car1.png";
import car2 from "images/html/car2.png";
import car3 from "images/html/car3.png";
import styles from "./index.module.scss";

const cardList = [car1, car2, car3];

const MouseHover3 = () => {
return (
<div className={styles.container}>
<div className={styles.content}>
{cardList.map((url: string, index: number) => (
<Card url={url} key={index} />
))}
</div>
</div>
);
};

export default MouseHover3;
2 changes: 2 additions & 0 deletions src/pages/html/InteractiveDesign/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import CropImage from "./components/CropImage";
import DragShopping from "./components/DragShopping";
import MouseHover1 from "./components/MouseHover1";
import MouseHover2 from "./components/MouseHover2";
import MouseHover3 from "./components/MouseHover3";
import SlideButtonTab from "./components/SlideButtonTab";
import FlipBook from "./components/FlipBook";
import Switchs from "./components/Switchs";
Expand All @@ -32,6 +33,7 @@ const boxList = [
{ element: <DragShopping /> },
{ element: <MouseHover1 /> },
{ element: <MouseHover2 /> },
{ element: <MouseHover3 /> },
{ element: <SlideButtonTab /> },
{ element: <FlipBook /> },
{ element: <Switchs /> },
Expand Down

0 comments on commit f7151ce

Please sign in to comment.