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-17 18:04:41 +05:00
parent a269d3459e
commit 5567b2993b
2 changed files with 10 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,7 @@ const {
modalTarget,
bgImage = "",
minHeight = "100vh",
headerOffset = "10px",
headerOffset = "80px",
layout = "default",
sideImage = "",
sideImageAlt = "",
@ -50,17 +50,7 @@ const {
const showImage = layout === 'with-image' && sideImage;
---
<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"
@ -83,7 +73,7 @@ const showImage = layout === 'with-image' && sideImage;
<div class="site-container hero-grid">
<div class="hero-content">
<div class="badge animate-load" data-delay="100">
<div class="badge">
{icon ? (
<span class="badge-icon">
<Icon name={icon} />
@ -95,15 +85,15 @@ const showImage = layout === 'with-image' && sideImage;
</div>
<h1 class="hero-title">
<span class="text-white animate-load" data-delay="300">{titleWhite}</span>
<span class="text-white">{titleWhite}</span>
<br />
<span class="text-gold animate-load" data-delay="500">{titleGold}</span>
<span class="text-gold">{titleGold}</span>
</h1>
<p class="hero-description animate-load" data-delay="700">{description}</p>
<p class="hero-description">{description}</p>
{btnText && (
<div class="hero-actions animate-load" data-delay="900">
<div class="hero-actions">
{modalTarget ? (
<Button variant="gold" size="lg" data-modal-target={modalTarget}>
{btnText}
@ -123,7 +113,7 @@ const showImage = layout === 'with-image' && sideImage;
</div>
{showImage && (
<div class="hero-image-wrapper animate-load" data-delay="400">
<div class="hero-image-wrapper">
<div class="image-composition">
<img
src={sideImage}
@ -136,7 +126,7 @@ const showImage = layout === 'with-image' && sideImage;
decoding="async"
/>
{experienceBadge && (
<div class="experience-badge animate-load" data-delay="1100">
<div class="experience-badge">
<span class="exp-number">{experienceBadge.number}</span>
<span class="exp-text">{experienceBadge.text}</span>
</div>
@ -147,27 +137,7 @@ const showImage = layout === 'with-image' && sideImage;
</div>
</section>
<script>
const initAnimations = () => {
const animatedElements = document.querySelectorAll('.animate-load');
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
setTimeout(() => {
requestAnimationFrame(() => {
el.classList.add('is-visible');
});
}, delay);
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAnimations);
} else {
initAnimations();
}
</script>
<style>
.hero-section {
@ -182,6 +152,7 @@ const showImage = layout === 'with-image' && sideImage;
margin: 0 !important;
box-sizing: border-box;
overflow: hidden;
transition: padding-top 0.3s ease;
}
@ -231,46 +202,6 @@ const showImage = layout === 'with-image' && sideImage;
max-width: 700px;
}
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ - ИСПРАВЛЕНО: opacity:1 по умолчанию --- */
.animate-load {
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;
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Специальная анимация для изображения */
.hero-image-wrapper.animate-load {
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);
}
.hero-image-wrapper.animate-load.is-visible {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Анимация для бейджа опыта */
.experience-badge.animate-load {
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);
}
.experience-badge.animate-load.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* --- BADGE --- */
.badge {
display: inline-flex;
@ -480,14 +411,6 @@ const showImage = layout === 'with-image' && sideImage;
left: 0;
bottom: -20px;
}
.hero-image-wrapper.animate-load {
transform: translateY(0) scale(1);
}
.hero-image-wrapper.animate-load.is-visible {
transform: translateY(0) scale(1);
}
}
@media (max-width: 767px) {
@ -583,24 +506,4 @@ const showImage = layout === 'with-image' && sideImage;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(234, 194, 110, 0.2);
}
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load,
.hero-image-wrapper.animate-load,
.experience-badge.animate-load {
opacity: 1;
transform: none;
transition: none;
}
.image-composition::before {
animation: none;
opacity: 1;
}
.status-dot::before {
animation: none;
}
}
</style>

2
frontend/src/layouts/Layout.astro
View file

@ -54,7 +54,7 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
}
.breadcrumbs-wrapper {
padding-top: 4.75rem;
padding-top: 0;
background: #f8fafc;
border-bottom: 1px solid rgba(30, 48, 80, 0.05);
}