leto/shkola
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лагерь: CSS

Browse Source
This commit is contained in:
Dekart Deploy Bot 2026-05-11 17:07:00 +03:00
parent 9be23eb67b
commit 8304bbfacf
3 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
wp-content/themes/dekart/assets/css/camp.css
View File

@ -513,16 +513,42 @@ html {
box-shadow: 0 14px 32px rgba(255,107,0,0.18); box-shadow: 0 14px 32px rgba(255,107,0,0.18);
} }
/* scroll animation */ /* ═══ SECTION REVEAL — fade + translateY + scale ═══ */
.fade-up { .section-reveal {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px) scale(0.97);
transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition: opacity 650ms cubic-bezier(0.25, 0.1, 0.25, 1),
transform 650ms cubic-bezier(0.25, 0.1, 0.25, 1);
} }
.section-reveal.revealed {
.fade-up.visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0) scale(1);
}
@media (max-width: 768px) {
.section-reveal {
transform: translateY(20px);
transition-duration: 400ms;
}
.section-reveal.revealed {
transform: translateY(0);
}
}
@media (min-width: 769px) {
.section-reveal > * {
opacity: 0;
transform: translateY(12px) scale(0.97);
transition: opacity 650ms cubic-bezier(0.25, 0.1, 0.25, 1),
transform 650ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.section-reveal.revealed > * {
opacity: 1;
transform: translateY(0) scale(1);
}
.section-reveal.revealed > *:nth-child(2) { transition-delay: 80ms; }
.section-reveal.revealed > *:nth-child(3) { transition-delay: 160ms; }
.section-reveal.revealed > *:nth-child(4) { transition-delay: 240ms; }
.section-reveal.revealed > *:nth-child(5) { transition-delay: 320ms; }
.section-reveal.revealed > *:nth-child(n+6) { transition-delay: 360ms; }
} }
/* suggestions */ /* suggestions */
@ -2117,8 +2143,14 @@ html {
.section-bg[data-bg="mint"]::before { background: var(--bg-mint); } .section-bg[data-bg="mint"]::before { background: var(--bg-mint); }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.fade-up { opacity: 1; transform: none; transition: none; } .section-reveal,
.fade-up.visible { opacity: 1; transform: none; } .section-reveal.revealed,
.section-reveal.revealed > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
.suggestions__item { animation: none; } .suggestions__item { animation: none; }
.banner_label { animation: none; } .banner_label { animation: none; }
.scroll-icon-wrapper { display: none; } .scroll-icon-wrapper { display: none; }

39
wp-content/themes/dekart/assets/js/camp.js
View File

@ -72,40 +72,17 @@ document.addEventListener("click", function (event) {
(function() { (function() {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const els = document.querySelectorAll('.section-reveal');
const animatedSections = [
'.hero-media-search__container',
'.about-us__wrapper',
'.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
'.programs h2', '\.programs__grid > article',
'.mentors h2', '.mentors-wrapper > div',
'.routine h2', '.routine__item',
'.foto h2', '.camp-foto-wrapper',
'.camp-reviews-wrapper',
'.camp-faq h2', '.faq-wrapper',
'.camp-contact h2', '.contact-wrapper',
].join(',');
const els = document.querySelectorAll(animatedSections);
if (!els.length) return; if (!els.length) return;
const o = new IntersectionObserver((entries) => {
const observer = new IntersectionObserver((entries) => { entries.forEach(e => {
entries.forEach(entry => { if (e.isIntersecting) {
if (entry.isIntersecting) { e.target.classList.add('revealed');
entry.target.classList.add('visible'); o.unobserve(e.target);
observer.unobserve(entry.target);
} }
}); });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); }, { threshold: 0.15, rootMargin: '-80px 0px -80px 0px' });
els.forEach(el => o.observe(el));
els.forEach(el => {
el.classList.add('fade-up');
observer.observe(el);
});
document.querySelectorAll('.programs__grid > article, .mentors-wrapper > div').forEach((card, i) => {
card.style.transitionDelay = (i * 0.08) + 's';
});
})(); })();
document.querySelectorAll('.box__accordion_label').forEach(function(label) { document.querySelectorAll('.box__accordion_label').forEach(function(label) {

22
wp-content/themes/dekart/page-camp.php
View File

@ -147,7 +147,7 @@ $metrics = [
</div> </div>
</div> </div>
</section> </section>
<section class="section-bg about-us" data-bg="white"> <section class="section-reveal section-bg about-us" data-bg="white">
<div class="container"> <div class="container">
<div class="about-us__wrapper"> <div class="about-us__wrapper">
<div class="about-us__image-col"> <div class="about-us__image-col">
@ -194,7 +194,7 @@ $metrics = [
</div> </div>
</div> </div>
</section> </section>
<section class="section-bg suggestions" data-bg="mint"> <section class="section-reveal section-bg suggestions" data-bg="mint">
<div class="container"> <div class="container">
<h2 class="camp_title">Почему мамы выбирают Dekart: дети бегут сюда сами</h2> <h2 class="camp_title">Почему мамы выбирают Dekart: дети бегут сюда сами</h2>
<p class="suggestions__subtitle">Никаких уговоров по утрам. Никаких «забери меня». Только горящие глаза и «а можно ещё?»</p> <p class="suggestions__subtitle">Никаких уговоров по утрам. Никаких «забери меня». Только горящие глаза и «а можно ещё?»</p>
@ -215,7 +215,7 @@ $metrics = [
} ?> </div> } ?> </div>
</div> </div>
</section> </section>
<section class="section-bg infograph" data-bg="white"> <section class="section-reveal section-bg infograph" data-bg="white">
<div class="container"> <div class="container">
<h2 class="camp_title">Цифры, которые говорят сами за себя</h2> <h2 class="camp_title">Цифры, которые говорят сами за себя</h2>
<p class="infograph__lead">Мы создаём среду, где каждый ребёнок раскрывает свой потенциал</p> <p class="infograph__lead">Мы создаём среду, где каждый ребёнок раскрывает свой потенциал</p>
@ -257,7 +257,7 @@ $metrics = [
</div> </div>
</section> </section>
<section class="section-bg programs" data-bg="mint" itemscope itemtype="https://schema.org/ItemList"> <section class="section-reveal section-bg programs" data-bg="mint" itemscope itemtype="https://schema.org/ItemList">
<div class="container"> <div class="container">
<h2 class="camp_title" itemprop="name">Летние программы</h2> <h2 class="camp_title" itemprop="name">Летние программы</h2>
<div class="programs__grid"> <div class="programs__grid">
@ -295,7 +295,7 @@ $metrics = [
<?php getBanner('', $post_id); ?> <?php getBanner('', $post_id); ?>
<section class="section-bg bring-child" data-bg="white" itemscope itemtype="https://schema.org/Product"> <section class="section-reveal section-bg bring-child" data-bg="white" itemscope itemtype="https://schema.org/Product">
<meta itemprop="name" content="Городской лагерь Декарт"> <meta itemprop="name" content="Городской лагерь Декарт">
<meta itemprop="description" content="Стоимость пребывания в городском лагере Декарт"> <meta itemprop="description" content="Стоимость пребывания в городском лагере Декарт">
<?php <?php
@ -368,7 +368,7 @@ $metrics = [
</div> </div>
</section> </section>
<section class="section-bg mentors" data-bg="mint"> <section class="section-reveal section-bg mentors" data-bg="mint">
<h2 class="camp_title">Наши наставники и ведущие мастер-классов</h2> <h2 class="camp_title">Наши наставники и ведущие мастер-классов</h2>
<div class="mentors-wrapper"> <div class="mentors-wrapper">
<?php <?php
@ -414,7 +414,7 @@ $metrics = [
</section> </section>
<section class="section-bg routine" data-bg="white"> <section class="section-reveal section-bg routine" data-bg="white">
<h2 class="camp_title">Распорядок дня в клубе</h2> <h2 class="camp_title">Распорядок дня в клубе</h2>
<div class="routine-wrapper"> <div class="routine-wrapper">
<?php <?php
@ -439,7 +439,7 @@ $metrics = [
</div> </div>
</section> </section>
<section class="section-bg foto" data-bg="mint"> <section class="section-reveal section-bg foto" data-bg="mint">
<h2 class="camp_title">Наши фотографии</h2> <h2 class="camp_title">Наши фотографии</h2>
<div class="camp-foto-wrapper"> <div class="camp-foto-wrapper">
<?php <?php
@ -474,7 +474,7 @@ $metrics = [
</div> </div>
</section> </section>
<section class="section-bg camp-reviews" data-bg="white"> <section class="section-reveal section-bg camp-reviews" data-bg="white">
<h2 class="camp_title">Что говорят о нас родители</h2> <h2 class="camp_title">Что говорят о нас родители</h2>
<?php <?php
@ -564,7 +564,7 @@ $metrics = [
<?php getBanner("2", $post_id); ?> <?php getBanner("2", $post_id); ?>
<section class="section-bg camp-faq" data-bg="mint"> <section class="section-reveal section-bg camp-faq" data-bg="mint">
<h2 class="camp_title">Часто задаваемые вопросы</h2> <h2 class="camp_title">Часто задаваемые вопросы</h2>
<div class="faq-wrapper" itemscope itemtype="https://schema.org/FAQPage"> <div class="faq-wrapper" itemscope itemtype="https://schema.org/FAQPage">
@ -609,7 +609,7 @@ $metrics = [
</div> </div>
</section> </section>
<section class="section-bg camp-contact" data-bg="white"> <section class="section-reveal section-bg camp-contact" data-bg="white">
<?php <?php
$contact_tel = carbon_get_post_meta($post_id, 'contact_tel' ); $contact_tel = carbon_get_post_meta($post_id, 'contact_tel' );
$contact_address = carbon_get_post_meta($post_id, 'contact_address' ); $contact_address = carbon_get_post_meta($post_id, 'contact_address' );