Создать эффект прокрутки на изображениях ⇐ CSS

[Anonymous]

Я создаю веб -сайт для своего бизнеса, используя Shopify, ничего не очень модно. Я добавил затухание, чтобы прокрутить пользователя для липкого названия. Все это в порядке.
Однако я сейчас застрял в этом эффекте: изображения немного движутся при прокрутке вниз. В качестве примера, когда вы прокручиваете путь вниз по странице и снова поднимаетесь, изображения кажутся сложенными (в подобном манере, а не друг на друга).
При проверке страницы высокого уровня я заметил, что элементы сетки имеют функцию перевода. Моя страница на данный момент хороша, но выглядит слишком «плоская».{% style %}
.scroll-media-section {
position: relative;
background-color: {{ section.settings.background_color }};
min-height: 100vh;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}

.scroll-media-container {
position: relative;
background-color: {{ section.settings.background_color }};
padding: 0px 0px;
width: 100%;
box-sizing: border-box;
will-change: transform;
transition-timing-function:ease-out;
transition-duration:0.5s;
}

.scroll-media-sticky-title {
position: sticky;
top: 50%;
transform: translateY(-50px);
z-index: 10;
text-align: center;
pointer-events: none;
margin: 0;
opacity: 0;
transition: opacity 0.6s ease;
}

.scroll-media-sticky-title.visible {
opacity: 1;
}

.scroll-media-title-text {
font-size: {{ section.settings.title_size }}px;
color: {{ section.settings.title_color }};
margin: 0;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
}

.scroll-media-title-image {
max-width: {{ section.settings.logo_max_width }}px;
height: auto;
}

.scroll-media-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
grid-auto-rows: min-content;
column-gap:8px;
width: 100%;
box-sizing: border-box;
}

@media (max-width: 749px) {
.scroll-media-grid {
grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
column-gap:8px;
}
}

.scroll-media-item {
width: 100%;
opacity: 0;
{%comment %}transform: translateY(50px);{% endcomment %}
transition: opacity 0.8s ease, transform 0.8s ease;
grid-row: auto;
}

.scroll-media-item.visible {
opacity: 1;
{%comment %}transform: translateY(var(--y-offset-desktop, 0px));{% endcomment %}
}

@media (max-width: 749px) {
.scroll-media-item {
grid-column: var(--mobile-column-start) / span var(--mobile-column-span) !important;
}

.scroll-media-item.visible {
{%comment %} transform: translateY(var(--y-offset-mobile, 0px));{% endcomment %}
}
}

.scroll-media-item.visible {
opacity: 1;
{%comment %}transform: translateY(0);{% endcomment %}
}

.scroll-media-content {
width: 100%;
border-radius: {{ section.settings.media_border_radius }}px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.scroll-media-content img,
.scroll-media-content video {
width: 100%;
height: auto;
display: block;
}

.scroll-media-placeholder {
background: #000;
aspect-ratio: 1080/1350;
display: inline-block;
justify-content: center;
align-items: center;
border-radius: {{ section.settings.media_border_radius }}px;
position: relative;
}

.scroll-media-placeholder svg {
width: 60%;
height: 60%;
opacity: 0.3;
}

.scroll-media-empty-state {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.9);
padding: 6px 12px;
font-size: 12px;
color: #333;
border-radius: 4px;
}

html{
scroll-behavior: smooth;
}
{% endstyle %}





{% if section.settings.title_type == 'text' and section.settings.title_text != blank %}
{{ section.settings.title_text }}
{% elsif section.settings.title_type == 'image' and section.settings.title_image %}

alt="{{ section.settings.title_image.alt | escape }}"
class="scroll-media-title-image"
loading="lazy"
width="{{ section.settings.title_image.width }}"
height="{{ section.settings.title_image.height }}"
>
{% endif %}

{% for block in section.blocks %}
{% assign type = block.settings.media_type %}
{% assign image = block.settings.media_image %}
{% assign video = block.settings.media_video %}
{% assign top_margin = block.settings.top_margin %}
{% assign bottom_margin = block.settings.bottom_margin %}
{% assign column_start_desktop = block.settings.column_start_desktop %}
{% assign column_span_desktop = block.settings.column_span_desktop %}
{% assign column_start_mobile = block.settings.column_start_mobile %}
{% assign column_span_mobile = block.settings.column_span_mobile %}
{% assign y_offset = block.settings.y_offset %}
{% if type != 'none' %}


{% if type == 'image' and image %}

alt="{{ image.alt | escape }}"
loading="lazy"
width="{{ image.width }}"
height="{{ image.height }}"
>
{% elsif type == 'video' and video %}



{% else %}

{{ 'image' | placeholder_svg_tag }}
Add media

{% endif %}


{% endif %}
{% endfor %}





(function() {
class ScrollMediaSection extends HTMLElement {
constructor() {
super();
this.items = [];
this.stickyTitle = null;
this.observer = null;
this.scrollObserver = null;
this.container = null;
}

connectedCallback() {
this.items = this.querySelectorAll('[data-scroll-item]');
this.stickyTitle = this.querySelector('.scroll-media-sticky-title');
this.container = this.querySelector('.scroll-media-container');
this.setupIntersectionObserver();
this.setupScrollObserver();
}

disconnectedCallback() {
if (this.observer) {
this.observer.disconnect();
}
if (this.scrollObserver) {
window.removeEventListener('scroll', this.scrollObserver);
}
}

setupIntersectionObserver() {
const options = {
root: null,
rootMargin: '-10% 0px -10% 0px',
threshold: 0.1
};

this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, options);

this.items.forEach((item) => {
this.observer.observe(item);
});
}

setupScrollObserver() {
if (!this.stickyTitle || !this.container) return;

this.scrollObserver = () => {
const containerRect = this.container.getBoundingClientRect();
const containerTop = containerRect.top;
const containerHeight = containerRect.height;
const scrollPercent = Math.max(0, -containerTop / containerHeight);

if (scrollPercent >= 0.001) {
this.stickyTitle.classList.add('visible');
} else {
this.stickyTitle.classList.remove('visible');
}
};

window.addEventListener('scroll', this.scrollObserver);
}
}

customElements.define('scroll-media-section', ScrollMediaSection);
})();




Подробнее здесь: https://stackoverflow.com/questions/797 ... -on-images