redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Переписаны компоенты главной страницы

Browse source
This commit is contained in:
Web-serfer 2026-04-16 01:15:06 +05:00
parent 2b087c02b7
commit 284e37fa94
7 changed files with 320 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/components/base/PageHero.astro
View file

@ -50,6 +50,19 @@ const {
const showImage = layout === 'with-image' && sideImage;
---
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
<script is:inline>
(function() {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const style = document.createElement('style');
style.textContent = '.animate-load{opacity:0;transform:translateY(30px)}' +
'.hero-image-wrapper.animate-load{opacity:0;transform:translateX(50px) scale(0.95)}' +
'.experience-badge.animate-load{opacity:0;transform:translateY(20px) scale(0.9)}';
document.head.appendChild(style);
})();
</script>
<section
class="hero-section"
style={`min-height: ${minHeight}; padding-top: ${headerOffset}; ${bgImage ? `background-image: url("${bgImage}")` : ''}`}
@ -142,7 +155,6 @@ const showImage = layout === 'with-image' && sideImage;
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
// Используем requestAnimationFrame для лучшей производительности
setTimeout(() => {
requestAnimationFrame(() => {
el.classList.add('is-visible');
@ -220,10 +232,10 @@ const showImage = layout === 'with-image' && sideImage;
max-width: 700px;
}
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ - ИСПРАВЛЕНО: opacity:1 по умолчанию --- */
.animate-load {
opacity: 0;
transform: translateY(30px);
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
@ -236,8 +248,8 @@ const showImage = layout === 'with-image' && sideImage;
/* Специальная анимация для изображения */
.hero-image-wrapper.animate-load {
opacity: 0;
transform: translateX(50px) scale(0.95);
opacity: 1;
transform: translateX(0) scale(1);
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@ -249,8 +261,8 @@ const showImage = layout === 'with-image' && sideImage;
/* Анимация для бейджа опыта */
.experience-badge.animate-load {
opacity: 0;
transform: translateY(20px) scale(0.9);
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@ -281,7 +293,7 @@ const showImage = layout === 'with-image' && sideImage;
flex-shrink: 0;
}
/* Мерцающая точка - ИСПРАВЛЕНО: заменил box-shadow на opacity/transform */
/* Мерцающая точка - оптимизированная анимация */
.status-dot {
width: 10px;
height: 10px;
@ -317,7 +329,6 @@ const showImage = layout === 'with-image' && sideImage;
stroke-width: 2 !important;
}
/* Оптимизированная анимация pulse - только opacity и transform */
@keyframes pulse-ring {
0% {
transform: scale(1);
@ -472,7 +483,7 @@ const showImage = layout === 'with-image' && sideImage;
}
.hero-image-wrapper.animate-load {
transform: translateY(40px) scale(0.95);
transform: translateY(0) scale(1);
}
.hero-image-wrapper.animate-load.is-visible {