Skip to content

Новая анимация карусели #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EvilBeaver merged 1 commit into from
Jan 8, 2026
+51 −44
Merged

Новая анимация карусели #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 51 additions & 44 deletions frontend/.vitepress/theme/components/LogoCarousel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,26 @@
<h2 class="logo-carousel-title">Нам доверяют</h2>
<div class="logo-carousel-wrapper">
<div class="logo-carousel">
<div class="logo-track-container">
<div class="logo-track">
<a
v-for="(logo, index) in logos"
:key="'a-' + index"
:href="logo.url"
target="_blank"
rel="noopener noreferrer"
class="logo-item"
>
<img :src="isDark && logo.srcDark ? logo.srcDark : logo.src" :alt="logo.name" loading="lazy" />
<span class="logo-name">{{ logo.name }}</span>
</a>
</div>
<div class="logo-track">
<a
v-for="(logo, index) in logos"
:key="'b-' + index"
:href="logo.url"
target="_blank"
rel="noopener noreferrer"
class="logo-item"
>
<img :src="isDark && logo.srcDark ? logo.srcDark : logo.src" :alt="logo.name" loading="lazy" />
<span class="logo-name">{{ logo.name }}</span>
</a>
</div>
<div class="logo-track" ref="trackRef" :style="{ transform: `translateX(${offset}px)` }">
<a
v-for="(logo, index) in allLogos"
:key="index"
:href="logo.url"
target="_blank"
rel="noopener noreferrer"
class="logo-item"
>
<img :src="isDark && logo.srcDark ? logo.srcDark : logo.src" :alt="logo.name" loading="lazy" />
<span class="logo-name">{{ logo.name }}</span>
</a>
</div>
</div>
</div>
</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useData } from 'vitepress';

const { isDark } = useData();
Expand All @@ -51,8 +37,42 @@ const baseLogos = [
// { src: '/logos/example.png', srcDark: '/logos/example-dark.png', name: 'Example', url: 'https://example.com/' },
];

// Repeat to fill the screen width
const logos = [...baseLogos, ...baseLogos, ...baseLogos];
// Repeat enough times to fill and loop seamlessly
const allLogos = [...baseLogos, ...baseLogos, ...baseLogos, ...baseLogos, ...baseLogos, ...baseLogos];

const offset = ref(0);
const trackRef = ref(null);
let animationId = null;
let lastTime = 0;
const speed = 50; // pixels per second

const animate = (currentTime) => {
if (!lastTime) lastTime = currentTime;
const delta = currentTime - lastTime;
lastTime = currentTime;

offset.value -= (speed * delta) / 1000;

// Reset when half of the track has scrolled
if (trackRef.value) {
const trackWidth = trackRef.value.scrollWidth / 2;
if (Math.abs(offset.value) >= trackWidth) {
offset.value = 0;
}
}

animationId = requestAnimationFrame(animate);
};
Comment on lines +49 to +65
Copy link

@coderabbitai coderabbitai bot Jan 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add accessibility support for reduced motion preference.

The animation logic is well-implemented with proper delta time calculations and seamless looping. However, it doesn't respect the user's prefers-reduced-motion setting, which is an accessibility concern.

🔎 Suggested fix to respect prefers-reduced-motion

Add a check for the reduced motion preference:

+const prefersReducedMotion = ref(false);
+
 const animate = (currentTime) => {
+  if (prefersReducedMotion.value) {
+    animationId = requestAnimationFrame(animate);
+    return;
+  }
+  
   if (!lastTime) lastTime = currentTime;
   const delta = currentTime - lastTime;
   lastTime = currentTime;
   
   offset.value -= (speed * delta) / 1000;
   
   // Reset when half of the track has scrolled
   if (trackRef.value) {
     const trackWidth = trackRef.value.scrollWidth / 2;
     if (Math.abs(offset.value) >= trackWidth) {
       offset.value = 0;
     }
   }
   
   animationId = requestAnimationFrame(animate);
 };
 
 onMounted(() => {
+  const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+  prefersReducedMotion.value = mediaQuery.matches;
+  mediaQuery.addEventListener('change', (e) => {
+    prefersReducedMotion.value = e.matches;
+  });
+  
   animationId = requestAnimationFrame(animate);
 });

Additionally, consider adding pause-on-hover for better UX, allowing users to interact with logos more easily:

💡 Optional: Add pause-on-hover functionality 
+const isPaused = ref(false);
+
 const animate = (currentTime) => {
+  if (isPaused.value || prefersReducedMotion.value) {
     animationId = requestAnimationFrame(animate);
     return;
   }
   
   if (!lastTime) lastTime = currentTime;
   // ... rest of animation logic
 };

Then in the template:

-<div class="logo-carousel">
+<div class="logo-carousel" @mouseenter="isPaused = true" @mouseleave="isPaused = false">

Committable suggestion skipped: line range outside the PR's diff.


onMounted(() => {
animationId = requestAnimationFrame(animate);
});

onUnmounted(() => {
if (animationId) {
cancelAnimationFrame(animationId);
}
});
</script>

<style>
Expand Down Expand Up @@ -86,22 +106,10 @@ const logos = [...baseLogos, ...baseLogos, ...baseLogos];
padding: 0;
}

.logo-track-container {
display: flex;
width: fit-content;
will-change: transform;
animation: scroll-logos 20s linear infinite !important;
}

.logo-track-container:hover {
animation-play-state: paused;
}

.logo-track {
display: flex;
gap: 4rem;
padding-right: 4rem;
pointer-events: none;
will-change: transform;
}

.logo-item {
Expand All @@ -110,7 +118,6 @@ const logos = [...baseLogos, ...baseLogos, ...baseLogos];
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
pointer-events: auto;
text-decoration: none;
}

Expand Down Expand Up @@ -152,7 +159,7 @@ const logos = [...baseLogos, ...baseLogos, ...baseLogos];

@media (max-width: 768px) {
.logo-track {
gap: 2rem;
gap: 3rem;
}

.logo-item img {
Expand Down