Scroll Item Visibility Update
echo '';
foreach ($settings['scroll_list'] as $index => $item) {
echo '';
break;
}
echo '';
echo '';
// Add a static title above the dynamic items
// echo 'Unsere besten Böckmann-Anhänger im Überblick:';
foreach ($settings['scroll_list'] as $index => $item) {
$opacity='0';
if($index==0)
$opacity='1';
echo '';
echo '' . ($item['timeline_title']) . '';
echo '' . wp_kses_post($item['timeline_desc']) . '';
echo '' . esc_html($item['button_text']) . '';
echo '';
}
echo '';
echo '';
change post-scroll-item on scrolling under post-blog-scroll on also on visible area of post-blog-scroll
broowser scroll
### Steps:
1. **Detect scrolling within `.post-blog-scroll`.**
2. **Update `.post-scroll-item` visibility** when it enters the visible area.
### Updated Code:
#### Add this JavaScript:
document.addEventListener("DOMContentLoaded", function () {
let container = document.querySelector(".post-blog-scroll");
let items = document.querySelectorAll(".post-scroll-item");
function updateVisibleItems() {
let containerRect = container.getBoundingClientRect();
items.forEach((item) => {
let itemRect = item.getBoundingClientRect();
if (
itemRect.top >= containerRect.top &&
itemRect.bottom <= containerRect.bottom
) {
item.style.opacity = "1";
} else {
item.style.opacity = "0";
}
});
}
container.addEventListener("scroll", updateVisibleItems);
window.addEventListener("scroll", updateVisibleItems);
updateVisibleItems(); // Run initially
});### Explanation:
– The script detects scrolling **inside** `.post-blog-scroll` and updates the `.post-scroll-item` elements accordingly.
– If an item is **inside the visible area**, its opacity is set to `1`, otherwise `0`.
### Ensure CSS:
Add smooth transitions for a better effect:
.post-scroll-item {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}This will create a smooth fade-in effect as the user scrolls through `.post-blog-scroll`. 🚀 Let me know if you need modifications!
—
### **Updated JavaScript:**
document.addEventListener("DOMContentLoaded", function () {
let container = document.querySelector(".post-blog-scroll");
let items = document.querySelectorAll(".post-scroll-item");
let scrollImage = document.querySelector(".post-scroll-image img");
function updateVisibleItems() {
let containerRect = container.getBoundingClientRect();
let activeItem = null;
items.forEach((item) => {
let itemRect = item.getBoundingClientRect();
if (
itemRect.top >= containerRect.top &&
itemRect.bottom <= containerRect.bottom
) {
item.style.opacity = "1";
activeItem = item;
} else {
item.style.opacity = "0";
}
});
// Update image if a new item is active
if (activeItem) {
let newImageSrc = activeItem.getAttribute("data-img");
if (scrollImage.src !== newImageSrc) {
scrollImage.src = newImageSrc;
}
}
}
container.addEventListener("scroll", updateVisibleItems);
window.addEventListener("scroll", updateVisibleItems);
updateVisibleItems(); // Run initially
});—
### **Explanation:**
1. The script listens for the **scroll event** inside `.post-blog-scroll`.
2. It detects which `.post-scroll-item` is **currently visible**.
3. It **updates the opacity** of the visible `.post-scroll-item` (sets `opacity: 1`).
4. It **changes the image** inside `.post-scroll-image` to match the `data-img` attribute of the visible `.post-scroll-item`.
—
### **Smooth Image Transition (CSS)**
To avoid abrupt image changes, you can add a **fade effect**:
.post-scroll-image img {
transition: opacity 0.5s ease-in-out;
}—
### **Final Effect**
✅ As you **scroll**, the **content fades in** and the **image updates** dynamically.
Let me know if you need any adjustments! 🚀