diff --git a/submissions/examples/floating-animation-515/README.md b/submissions/examples/floating-animation-515/README.md new file mode 100644 index 00000000..e86efe5b --- /dev/null +++ b/submissions/examples/floating-animation-515/README.md @@ -0,0 +1,17 @@ +# Floating Animation + +## 1. What does this do? + +Creates a smooth floating effect by moving an element vertically in a continuous loop while dynamically adjusting its shadow to enhance the perception of depth. + +## 2. How is it used? + +```html +
+ Floating Content +
+``` + +## 3. Why is it useful? + +Floating animations are commonly used to add subtle motion and visual interest to interfaces. This effect can be applied to hero illustrations, feature cards, call-to-action sections, icons, and decorative UI elements. It aligns with EaseMotion CSS's animation-first philosophy by providing a lightweight, reusable micro-interaction that improves visual engagement without requiring custom keyframes. diff --git a/submissions/examples/floating-animation-515/demo.html b/submissions/examples/floating-animation-515/demo.html new file mode 100644 index 00000000..44e8ce13 --- /dev/null +++ b/submissions/examples/floating-animation-515/demo.html @@ -0,0 +1,42 @@ + + + + + + Floating Animation Demo + + + + +

Floating Animation Demo

+ +
+ +
+
10%
+

Small Float

+

+ Subtle movement for decorative elements and icons. +

+
+ +
+
25%
+

Default Float

+

+ Balanced motion for cards, sections and components. +

+
+ +
+
50%
+

Large Float

+

+ Strong floating motion for hero sections and CTA elements. +

+
+ +
+ + + diff --git a/submissions/examples/floating-animation-515/style.css b/submissions/examples/floating-animation-515/style.css new file mode 100644 index 00000000..b758b01b --- /dev/null +++ b/submissions/examples/floating-animation-515/style.css @@ -0,0 +1,242 @@ +:root { + --float-distance: 25px; + --float-duration: 3s; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 60px 30px; + + font-family: Inter, Arial, sans-serif; + + background: + radial-gradient(circle at top left, #60a5fa 0%, transparent 35%), + radial-gradient(circle at top right, #8b5cf6 0%, transparent 35%), + radial-gradient(circle at bottom center, #06b6d4 0%, transparent 30%), + linear-gradient(135deg, #0f172a, #1e293b); + + overflow-x: hidden; +} + +h1 { + color: white; + font-size: 3rem; + margin-bottom: 80px; + text-align: center; + + text-shadow: + 0 0 20px rgba(255,255,255,0.2); +} + +.demo-container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + + gap: 80px; +} + +/* Card */ + +.card { + width: 320px; + height: 380px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 20px; + + text-align: center; + padding: 30px; + + border-radius: 30px; + + background: + linear-gradient( + 145deg, + rgba(255,255,255,0.18), + rgba(255,255,255,0.08) + ); + + border: 1px solid rgba(255,255,255,0.15); + + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + + color: white; + + position: relative; + overflow: hidden; + + transition: + transform 0.4s ease, + box-shadow 0.4s ease; +} + +.card::before { + content: ""; + + position: absolute; + inset: 0; + + background: + radial-gradient( + circle at top left, + rgba(255,255,255,0.20), + transparent 45% + ); + + pointer-events: none; +} + +/* Percentage */ + +.percentage { + font-size: 4.5rem; + font-weight: 900; + + background: + linear-gradient( + 135deg, + #60a5fa, + #a855f7 + ); + + -webkit-background-clip: text; + background-clip: text; + + color: transparent; + line-height: 1; +} + +.card h2 { + font-size: 1.7rem; + font-weight: 700; +} + +.card p { + line-height: 1.6; + opacity: 0.9; + max-width: 220px; +} + +/* Floating Animation */ + +@keyframes floating { + 0%, + 100% { + transform: translateY(0); + + box-shadow: + 0 20px 40px rgba(0,0,0,0.25); + } + + 50% { + transform: translateY( + calc(-1 * var(--float-distance)) + ); + + box-shadow: + 0 calc(30px + var(--float-distance)) + calc(60px + var(--float-distance)) + rgba(0,0,0,0.45); + } +} + +.floating-element { + animation: + floating + var(--float-duration) + ease-in-out + infinite; + + will-change: + transform, + box-shadow; +} + +/* Hover Enhancement */ + +.floating-element:hover { + animation-play-state: paused; + + transform: + translateY(calc(-1 * var(--float-distance))) + scale(1.03); + + box-shadow: + 0 calc(35px + var(--float-distance)) + calc(70px + var(--float-distance)) + rgba(0,0,0,0.55); +} + +/* Variants */ + +.float-small { + --float-distance: 10px; + --float-duration: 4.5s; +} + +.float-large { + --float-distance: 50px; + --float-duration: 2.2s; +} + +/* Staggered Motion */ + +.card:nth-child(1) { + animation-delay: 0s; +} + +.card:nth-child(2) { + animation-delay: 0.8s; +} + +.card:nth-child(3) { + animation-delay: 1.6s; +} + +/* Accessibility */ + +@media (prefers-reduced-motion: reduce) { + .floating-element { + animation: none; + } + + .floating-element:hover { + transform: scale(1.03); + } +} + +/* Mobile */ + +@media (max-width: 1024px) { + .demo-container { + gap: 40px; + } + + .card { + width: 280px; + height: 340px; + } + + .percentage { + font-size: 3.5rem; + } +}