Image Scroll Transition
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'); // 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(“);
}
}
});
});
}
});
apply transition on image when show along with active items
### Updated JavaScript:
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'); // Reset all items to 0 opacity
jQuery(item).css('opacity', '1'); // Set active item to 1
// Change image with fade effect
const imgSrc = jQuery(item).data('img');
if (imgSrc) {
imageContainer.fadeOut(300, function () {
imageContainer.html(`<img src="${imgSrc}" alt="Scroll Image" />`).fadeIn(300);
});
}
}
});
});
}
});### CSS for Smooth Image Transition:
.post-scroll-image img {
width: 100%; /* Adjust as needed */
height: auto;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 0;
transform: scale(0.95);
}
.post-scroll-image img.show {
opacity: 1;
transform: scale(1);
}### Explanation:
1. **Fade Effect on Image Change**:
– `fadeOut(300, function () { … })` ensures the previous image fades out before the new one appears.
– `fadeIn(300)` makes the new image appear smoothly.
2. **CSS Transitions**:
– The `.post-scroll-image img` selector ensures images transition smoothly when they appear.
– The `.show` class is added dynamically to apply opacity and scale effects.
This will ensure the image transitions smoothly when changing, along with the active item effect. 🚀 Let me know if you need any refinements!
—
### ✅ **Solution 1: Using Flexbox (Recommended)**
This approach keeps the content centered dynamically, regardless of its height.
#### **Updated CSS:**
.post-scroll-content {
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
height: 100vh; /* Full height of viewport or container */
position: relative;
}
.post-scroll-item {
width: 100%; /* Adjust as needed */
text-align: center; /* Center text inside */
opacity: 0; /* Default hidden */
transition: opacity 0.5s ease-in-out;
}
.post-scroll-item.active {
opacity: 1; /* Only active item is visible */
}—
### ✅ **Solution 2: Using Absolute Positioning**
If you prefer to use `position: absolute`, make sure `.post-scroll-content` has a **relative position**.
#### **Updated CSS:**
.post-scroll-content {
position: relative;
height: 100vh; /* Full height */
}
.post-scroll-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center both horizontally & vertically */
width: 100%; /* Adjust width if needed */
text-align: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.post-scroll-item.active {
opacity: 1;
}—
### ✅ **Updated JavaScript for Active State**
Modify your existing JavaScript to **add an `.active` class** dynamically.
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');
contentContainer.addEventListener('scroll', function () {
const scrollTop = contentContainer.scrollTop;
items.forEach((item) => {
const itemTop = item.offsetTop - contentContainer.offsetTop;
const itemBottom = itemTop + item.offsetHeight;
if (
scrollTop >= itemTop - contentContainer.clientHeight / 2 &&
scrollTop < itemBottom
) {
jQuery(items).removeClass('active'); // Remove active from all
jQuery(item).addClass('active'); // Add active class to visible item
// Change image with fade effect
const imgSrc = jQuery(item).data('img');
if (imgSrc) {
imageContainer.fadeOut(300, function () {
imageContainer.html(`<img src="${imgSrc}" alt="Scroll Image" />`).fadeIn(300);
});
}
}
});
});
}
});—
### 🎯 **Which Method Should You Use?**
– **Use Flexbox** if your content size may change dynamically.
– **Use Absolute Positioning** if the structure is fixed and you want precise control.
Either way, your `.post-scroll-item` content will now be centered inside `.post-scroll-content`. 🚀 Let me know if you need further tweaks!