Some UI changes
This commit is contained in:
parent
5de603ca93
commit
a82f93c556
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"ConnectionStrings": {
|
||||
"ConnectionString": "Data Source=195.26.231.218;Initial Catalog=FruitBank_DEV;Integrated Security=False;Persist Security Info=False;User ID=sa;Password=v6f_?xNfg9N1;Trust Server Certificate=True",
|
||||
"ConnectionString": "Data Source=195.26.231.218;Initial Catalog=FruitBank_PROD;Integrated Security=False;Persist Security Info=False;User ID=sa;Password=v6f_?xNfg9N1;Trust Server Certificate=True",
|
||||
"DataProvider": "sqlserver",
|
||||
"SQLCommandTimeout": null,
|
||||
"WithNoLock": false
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
--accent-lime: #8cb63c;
|
||||
--text-primary: #2c2c2c;
|
||||
--text-muted: #6b7c6e;
|
||||
--warm-bg: #faebd7;
|
||||
--theme-border-radius: 8px;
|
||||
--itembox-picture-radius: 8px;
|
||||
--show-product-box-buttons: block; /* block or none */
|
||||
|
|
@ -2241,7 +2242,7 @@ label, label + * {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
.item-box .product-box-add-to-cart-button::before {
|
||||
content: "\f1b9";
|
||||
content: "\f07a";
|
||||
font-family: FontAwesome;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
|
|
@ -2974,7 +2975,7 @@ label, label + * {
|
|||
}
|
||||
.overview .add-to-cart-button::before,
|
||||
.variant-overview .add-to-cart-button::before {
|
||||
content: "\f1b9";
|
||||
content: "\f07a";
|
||||
font-family: FontAwesome;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
|
|
@ -7673,6 +7674,384 @@ html.lenis, html.lenis body {
|
|||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
HOMEPAGE PRODUCTS SECTION (warm bg)
|
||||
============================================= */
|
||||
|
||||
.homepage-products-section {
|
||||
background: var(--warm-bg);
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
/* Product cards need white bg to match photo backgrounds */
|
||||
.homepage-products-section .item-box {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
IMMERSIVE FEATURES — "MIÉRT A FRUITBANK"
|
||||
============================================= */
|
||||
|
||||
.fb-features {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
/* Section header */
|
||||
.fb-features-header {
|
||||
text-align: center;
|
||||
padding: 100px 20px 60px;
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.fb-features-header h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(32px, 5vw, 56px);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.fb-features-header h2 em {
|
||||
color: var(--active-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.fb-features-header p {
|
||||
font-size: clamp(16px, 2vw, 20px);
|
||||
color: rgba(255,255,255,0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Individual feature row */
|
||||
.fb-feature {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: 70vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fb-feature[data-align="right"] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.fb-feature[data-align="right"] > * {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* Image side */
|
||||
.fb-feature-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fb-feature-img img {
|
||||
width: 100%;
|
||||
height: 120%; /* extra height for parallax travel */
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: filter 0.5s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.fb-feature:hover .fb-feature-img img {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
/* Content side */
|
||||
.fb-feature-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 60px clamp(40px, 6vw, 100px);
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.fb-feature-num {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(48px, 6vw, 80px);
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.06);
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fb-feature-content h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(24px, 3vw, 36px);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fb-feature-content h3::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--active-color);
|
||||
margin-top: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fb-feature-content p {
|
||||
font-size: clamp(15px, 1.5vw, 18px);
|
||||
color: rgba(255,255,255,0.65);
|
||||
line-height: 1.8;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
/* Alternating subtle bg tones */
|
||||
.fb-feature:nth-child(odd) .fb-feature-content {
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.fb-feature:nth-child(even) .fb-feature-content {
|
||||
background: #162b1c;
|
||||
}
|
||||
|
||||
/* Mobile: stack vertically */
|
||||
@media (max-width: 768px) {
|
||||
.fb-feature {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.fb-feature[data-align="right"] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.fb-feature-img {
|
||||
height: 50vw;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.fb-feature-img img {
|
||||
height: 100%; /* no parallax overshoot on mobile */
|
||||
}
|
||||
|
||||
.fb-feature-content {
|
||||
padding: 40px 24px 50px;
|
||||
}
|
||||
|
||||
.fb-feature-num {
|
||||
font-size: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.fb-features-header {
|
||||
padding: 60px 20px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.fb-feature {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.fb-feature-content {
|
||||
padding: 40px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
PRODUCT CARD MODERNIZATION
|
||||
============================================= */
|
||||
|
||||
.html-home-page .item-box {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 1px solid rgba(0,0,0,0.04);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Picture area */
|
||||
.html-home-page .item-box .picture {
|
||||
margin: 0;
|
||||
border-radius: 16px 16px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .picture a img {
|
||||
border-radius: 0;
|
||||
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.html-home-page .item-box:hover .picture a img {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* Details area */
|
||||
.html-home-page .item-box .details {
|
||||
padding: 16px 18px 8px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .product-title {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
min-height: 42px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .product-title a:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .actual-price {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .old-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Buttons area */
|
||||
.html-home-page .item-box .buttons {
|
||||
padding: 0 18px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box button {
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: none;
|
||||
height: 42px;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .product-box-add-to-cart-button {
|
||||
background: var(--theme-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .product-box-add-to-cart-button:hover {
|
||||
background: var(--dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(45,122,58,0.3);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .add-to-compare-list-button {
|
||||
background: var(--light-bg);
|
||||
color: var(--dark);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .add-to-compare-list-button:hover {
|
||||
background: #e8ece5;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
/* Wishlist heart */
|
||||
.html-home-page .item-box .add-to-wishlist-button {
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255,255,255,0.9) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.25s ease;
|
||||
z-index: 2;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .add-to-wishlist-button:hover {
|
||||
background: #fff !important;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.html-home-page .item-box .add-to-wishlist-button::before {
|
||||
color: var(--accent-warm);
|
||||
}
|
||||
|
||||
/* Product grid section title */
|
||||
.html-home-page .product-grid .title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 700;
|
||||
border-bottom: none;
|
||||
padding-bottom: 8px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
color: var(--dark);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.html-home-page .product-grid .title::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: var(--active-color);
|
||||
margin: 14px auto 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
SCROLL REVEAL ANIMATIONS
|
||||
============================================= */
|
||||
|
||||
/* Initial hidden states — GSAP will animate these */
|
||||
.sr-fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
|
||||
.sr-fade-left {
|
||||
opacity: 0;
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
|
||||
.sr-fade-right {
|
||||
opacity: 0;
|
||||
transform: translateX(80px);
|
||||
}
|
||||
|
||||
.sr-scale-in {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.sr-stagger-item {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
/* Prevent horizontal scrollbar from slide-in animations */
|
||||
.html-home-page .master-wrapper-content {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
MOBILE — VAULT + FORKLIFT
|
||||
============================================= */
|
||||
|
|
@ -7717,4 +8096,30 @@ html.lenis, html.lenis body {
|
|||
.forklift-body {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
/* Product cards mobile */
|
||||
.html-home-page .item-box {
|
||||
border-radius: 12px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .details {
|
||||
padding: 12px 14px 6px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .buttons {
|
||||
padding: 0 14px;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box button {
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.html-home-page .item-box .product-box-add-to-cart-button,
|
||||
.html-home-page .item-box .add-to-compare-list-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,15 +32,74 @@
|
|||
========================================== -->
|
||||
<div class="vault-scroll-container" id="vaultScrollContainer"></div>
|
||||
|
||||
<!-- Transition: vault → product content -->
|
||||
<div class="vault-to-content-transition"></div>
|
||||
|
||||
|
||||
<!-- ==========================================
|
||||
STANDARD HOMEPAGE CONTENT (solid bg)
|
||||
========================================== -->
|
||||
<div style="background: #fff; position: relative; z-index: 5;">
|
||||
<div style="background: #fff; position: relative; z-index: 5; padding-top: 70px;">
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageTop })
|
||||
@await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "HomepageText" })
|
||||
@* Topic block replaced by immersive feature section below *@
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
MIÉRT A FRUITBANK — IMMERSIVE FEATURES
|
||||
========================================== -->
|
||||
<section class="fb-features" id="fbFeatures">
|
||||
<div class="fb-features-header">
|
||||
<h2>Miért a <em>FruitBank</em>?</h2>
|
||||
<p>Nagykereskedelmi megoldás, ami másképp működik.</p>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="left">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/freshness.jpg" alt="Farmról frissen" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">01</span>
|
||||
<h3>Farmról frissen, minden nap</h3>
|
||||
<p>A megbízható termelőktől történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban és kiváló ízminőségben érkeznek Önhöz.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="right">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/delivery.jpg" alt="Másnapi kiszállítás" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">02</span>
|
||||
<h3>Másnapi nagykereskedelmi kiszállítás</h3>
|
||||
<p>A hőmérséklet-szabályozott logisztika biztosítja, hogy rendelése minden alkalommal frissen és pontosan érkezzen meg.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="left">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/variety.jpg" alt="Páratlan választék" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">03</span>
|
||||
<h3>Páratlan választék</h3>
|
||||
<p>A mindennapi alapanyagoktól az egzotikus különlegességekig – egész évben több mint 500 féle gyümölcs és zöldség kínálatában.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="right">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/sustainable.jpg" alt="Fenntartható forrásból" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">04</span>
|
||||
<h3>Fenntartható forrásból</h3>
|
||||
<p>Olyan termelőkkel dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
STANDARD HOMEPAGE CONTENT continues
|
||||
========================================== -->
|
||||
<div class="homepage-products-section">
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageBeforeCategories })
|
||||
@await Component.InvokeAsync(typeof(HomepageCategoriesViewComponent))
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageBeforeProducts })
|
||||
|
|
@ -514,6 +573,152 @@
|
|||
// Start loops
|
||||
requestAnimationFrame(mainLoop);
|
||||
requestAnimationFrame(forkliftLoop);
|
||||
|
||||
// =============================================
|
||||
// SCROLL REVEAL ANIMATIONS
|
||||
// Uses GSAP ScrollTrigger (already loaded)
|
||||
// =============================================
|
||||
(function initScrollReveal() {
|
||||
// --- Section titles ---
|
||||
document.querySelectorAll('.product-grid .title, .home-page-product-grid .title').forEach(function(el) {
|
||||
el.classList.add('sr-fade-up');
|
||||
});
|
||||
|
||||
// --- Immersive features header ---
|
||||
var fbHeader = document.querySelector('.fb-features-header');
|
||||
if (fbHeader) fbHeader.classList.add('sr-fade-up');
|
||||
|
||||
// --- Immersive feature rows: image parallax + content reveal ---
|
||||
document.querySelectorAll('.fb-feature').forEach(function(feature) {
|
||||
var img = feature.querySelector('.fb-feature-img img');
|
||||
var content = feature.querySelector('.fb-feature-content');
|
||||
var align = feature.getAttribute('data-align');
|
||||
|
||||
// Parallax on image
|
||||
if (img) {
|
||||
gsap.fromTo(img,
|
||||
{ yPercent: -10 },
|
||||
{
|
||||
yPercent: 10,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: feature,
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
scrub: 1
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Content slide in from the side
|
||||
if (content) {
|
||||
var xFrom = align === 'right' ? 60 : -60;
|
||||
gsap.from(content, {
|
||||
x: xFrom,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: feature,
|
||||
start: 'top 75%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// --- Product cards (staggered separately, not sr-fade-up) ---
|
||||
document.querySelectorAll('.product-grid .item-box').forEach(function(el) {
|
||||
el.classList.add('sr-stagger-item');
|
||||
});
|
||||
|
||||
// --- Footer (staggered separately) ---
|
||||
document.querySelectorAll('.footer-block').forEach(function(el) {
|
||||
el.classList.add('sr-stagger-item');
|
||||
});
|
||||
|
||||
// ---- Animate all sr-fade-up elements ----
|
||||
gsap.utils.toArray('.sr-fade-up').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: 'top 88%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Animate sr-fade-left elements ----
|
||||
gsap.utils.toArray('.sr-fade-left').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.9,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: 'top 88%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Animate sr-fade-right elements ----
|
||||
gsap.utils.toArray('.sr-fade-right').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.9,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: 'top 88%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Stagger product cards within each grid ----
|
||||
document.querySelectorAll('.product-grid').forEach(function(grid) {
|
||||
var cards = grid.querySelectorAll('.item-box.sr-stagger-item');
|
||||
if (cards.length === 0) return;
|
||||
gsap.to(cards, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.7,
|
||||
ease: 'power3.out',
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: grid,
|
||||
start: 'top 85%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Stagger footer blocks ----
|
||||
var footerBlocks = document.querySelectorAll('.footer-block.sr-stagger-item');
|
||||
if (footerBlocks.length > 0) {
|
||||
gsap.to(footerBlocks, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.6,
|
||||
ease: 'power2.out',
|
||||
stagger: 0.12,
|
||||
scrollTrigger: {
|
||||
trigger: footerBlocks[0],
|
||||
start: 'top 90%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue