mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-02-11 08:08:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update animation and opacity properties for floating icons in web

Browse Source
This commit is contained in:
Mathias Wagner
2026-01-18 17:36:27 +01:00
parent e0cba6e71c
commit ac3299b696
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/pages/Home/Home.jsx
View File

@@ -15,7 +15,8 @@ const GITHUB_LINK = "https://github.com/gnmyt/myspeed";
const COLORS = ["#22c55e", "#f59e0b", "#ef4444"];
const chooseRandomColor = () => COLORS[Math.floor(Math.random() * COLORS.length)];
const randomPosition = () => Math.random() * 80 + 10; // 10-90%
const randomPosition = () => Math.random() * 70 + 15;
const randomOpacity = () => 0.06 + Math.random() * 0.08;
export const Home = () => {
const navigate = useNavigate();
@@ -50,7 +51,7 @@ export const Home = () => {
<div className="home-page">
<section className="hero">
<div className="floating-icons">
{Array(12).fill(0).map((_, index) => (
{Array(7).fill(0).map((_, index) => (
<FontAwesomeIcon
key={index}
icon={index % 2 === 0 ? faArrowDown : faArrowUp}
@@ -59,8 +60,9 @@ export const Home = () => {
color: chooseRandomColor(),
left: `${randomPosition()}%`,
top: `${randomPosition()}%`,
animationDelay: `${index * 0.4}s`,
animationDuration: `${3 + Math.random() * 2}s`
opacity: randomOpacity(),
animationDelay: `${index * 1.2 + Math.random() * 2}s`,
animationDuration: `${12 + Math.random() * 8}s`
}}
/>
))}

23
web/src/pages/Home/styles.sass
View File

@@ -55,18 +55,23 @@
.floating-icon
position: absolute
font-size: 1.5rem
opacity: 0.1
animation: drift ease-in-out infinite
animation: drift linear infinite
@keyframes drift
0%, 100%
0%
transform: translate(0, 0) rotate(0deg)
15%
transform: translate(6px, -8px) rotate(2deg)
35%
transform: translate(-4px, 5px) rotate(-1deg)
55%
transform: translate(3px, -3px) rotate(1deg)
70%
transform: translate(-7px, 6px) rotate(-2deg)
85%
transform: translate(2px, -4px) rotate(0.5deg)
100%
transform: translate(0, 0) rotate(0deg)
25%
transform: translate(10px, -15px) rotate(5deg)
50%
transform: translate(-5px, 10px) rotate(-5deg)
75%
transform: translate(-15px, -10px) rotate(3deg)
.interface-preview
position: sticky