Scroll Image Update Logic
const scrollContainer = document.querySelector('.post-blog-scroll');
if (scrollContainer) {
const items = scrollContainer.querySelectorAll('.post-scroll-item');
// const images = scrollContainer.querySelectorAll('.post-scroll-image img');
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
// Update image on scroll
contentContainer.addEventListener('scroll', function () {
const scrollTop = contentContainer.scrollTop;
items.forEach((item, index) => {
const itemTop = item.offsetTop – contentContainer.offsetTop;
const itemBottom = itemTop + item.offsetHeight;
if (
scrollTop >= itemTop – contentContainer.clientHeight / 2 &&
scrollTop < itemBottom
) {
jQuery('.post-scroll-image').html(“)
// images.forEach((img, imgIndex) => {
// img.style.display = imgIndex === index ? 'block' : 'none';
// });
}
});
});
// Initialize first image as active
if (images.length > 0) {
images[0].style.display = 'block';
}
}
});
set item opacity 1 when scroll and also change image from data-img jquery
1. Sets the active item's opacity to `1` when it is in the viewport.
2. Changes the image dynamically using the `data-img` attribute.
### Updated Code:
document.addEventListener('DOMContentLoaded', function () {
const scrollContainer = document.querySelector('.post-blog-scroll');
if (scrollContainer) {
const items = scrollContainer.querySelectorAll('.post-scroll-item');
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
const imageContainer = jQuery('.post-scroll-image');
// Update item opacity and image on scroll
contentContainer.addEventListener('scroll', function () {
const scrollTop = contentContainer.scrollTop;
items.forEach((item, index) => {
const itemTop = item.offsetTop - contentContainer.offsetTop;
const itemBottom = itemTop + item.offsetHeight;
if (
scrollTop >= itemTop - contentContainer.clientHeight / 2 &&
scrollTop < itemBottom
) {
// Set active opacity
jQuery(items).css('opacity', '0.5'); // Reset all items to 0.5 opacity
jQuery(item).css('opacity', '1'); // Set active item to 1
// Change image
const imgSrc = jQuery(item).data('img');
if (imgSrc) {
imageContainer.html(`<img src="${imgSrc}" alt="Scroll Image" />`);
}
}
});
});
// Initialize first item as active
if (items.length > 0) {
jQuery(items).css('opacity', '0.5');
jQuery(items[0]).css('opacity', '1');
const firstImg = jQuery(items[0]).data('img');
if (firstImg) {
imageContainer.html(`<img src="${firstImg}" alt="Scroll Image" />`);
}
}
}
});### How It Works:
– **Opacity Change:** As you scroll, the currently active item gets `opacity: 1`, while others are set to `0.5`.
– **Image Change:** When an item becomes active, the script grabs its `data-img` attribute and updates `.post-scroll-image`.
– **Initialization:** On load, the first item is set to active and its image is displayed.
Make sure your HTML structure has `data-img` attributes in `.post-scroll-item` elements, like this:
<div class="post-scroll-item" data-img="image1.jpg">Content 1</div>
<div class="post-scroll-item" data-img="image2.jpg">Content 2</div>Let me know if you need modifications! 🚀