Hi.
My client asked me to make a CMS slider with similar effect to this website https://simplychocolate.dk/ when you scroll down text and images change. Without CMS this effect can be easily done via webflow interactions. But I have no idea how to make it for dynamic content. So i decieded to use Jquery for this.
The idea is to make a trigger that will add classes to dynamic elements (images, texts) once it scrolled in view. I created 2 separate collection lists for the same collection. One (static) for trigger and another one (sticky) for actual content. When trigger scrolled in view jquery should capture an index of this trigger and then find texts and images with the same index and add active classes to them. After the trigger is scrolled out of view classes should be removed and content disappear.
But I cannot get this to work. It activates content only when first trigger is scrolled in view and dissapears when out of view. When next trigger scrolls in nothing happens. Here is the code. I think I’m doing something wrong with index but cannot get it since I am new to javascript. Will be great if someone can take a look on the code and tell what’s wrong.
$(window).scroll(function() {
//math to check if element is in view
var top_of_element = $('#trig').offset().top;
var bottom_of_element = $('#trig').offset().top + $('#trig').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
//capture index from collection item
let myIndex = $(this).closest('.slide-trigger-item').index();
//checking if trigger element is in view
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
//adding classes if trigger is in view
$('.project-thumb1').eq(myIndex).addClass('current');
$('.slider-heading').eq(myIndex).addClass('current');
//removing classes if trigger is out of view
} else {
$('.project-thumb1').removeClass('current')
$('.slider-heading').removeClass('current');
}
});
So I got a progress on this and actually it works now!
Link to the website and read only attached. You can scroll down the page to see the slider with 3 CMS items.
But I still got the problem with the code. Right now it’s too long and not adaptive. I need manually add lines of code if I want to display more CMS items in slider.
Question to anyone who is good at Jquery: how can I make it more efficient and optimized? How can I make it automatically detect div with unique class in view, and add classes to items from CMS with same index, so I don’t need to create separate lines of code for each CMS items?
Check code comments to understand better what each line does.
// adding unique class names to each trigger div based on it's index
$('.slide-trigger-item').each(function(index){
$(this).addClass('add-' + index);
});
// variables to detect if first trigger div is in view
$(window).scroll(function() {
var top_of_element = $('.add-0').offset().top;
var bottom_of_element = $('.add-0').offset().top + $('.add-0').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
// store index of the first trigger div in variable
let myIndex0 = $('.add-0').closest('.slide-trigger-item').index();
// detecting if trigger div is in view
if ((bottom_of_screen > bottom_of_element) && (top_of_screen < bottom_of_element)) {
// adding styled classes to CMS items with same index as trigger div
$(".project-thumb1").eq(myIndex0).addClass("current");
$('.slider-heading').eq(myIndex0).addClass('current');
$('.slide-subheading').eq(myIndex0).addClass('current');
$('.slider-paragraph').eq(myIndex0).addClass('current');
$('.slider-year').eq(myIndex0).addClass('current');
// removing styled classes when trigger div goes out of view
} else {
$('.project-thumb1').eq(myIndex0).removeClass('current')
$('.slider-heading').eq(myIndex0).removeClass('current');
$('.slide-subheading').eq(myIndex0).removeClass('current');
$('.slider-paragraph').eq(myIndex0).removeClass('current');
$('.slider-year').eq(myIndex0).removeClass('current');
}
});
// doing the same actions for each CMS item. How can I make this code less repetative?
$(window).scroll(function() {
var top_of_element = $('.add-1').offset().top;
var bottom_of_element = $('.add-1').offset().top + $('.add-1').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
let myIndex1 = $('.add-1').closest('.slide-trigger-item').index();
if ((bottom_of_screen > bottom_of_element) && (top_of_screen < bottom_of_element)) {
$(".project-thumb1").eq(myIndex1).addClass("current");
$('.slider-heading').eq(myIndex1).addClass('current');
$('.slide-subheading').eq(myIndex1).addClass('current');
$('.slider-paragraph').eq(myIndex1).addClass('current');
$('.slider-year').eq(myIndex1).addClass('current');
} else {
$('.project-thumb1').eq(myIndex1).removeClass('current')
$('.slider-heading').eq(myIndex1).removeClass('current');
$('.slide-subheading').eq(myIndex1).removeClass('current');
$('.slider-paragraph').eq(myIndex1).removeClass('current');
$('.slider-year').eq(myIndex1).removeClass('current');
}
});
$(window).scroll(function() {
var top_of_element = $('.add-2').offset().top;
var bottom_of_element = $('.add-2').offset().top + $('.add-2').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
let myIndex2 = $('.add-2').closest('.slide-trigger-item').index();
if ((bottom_of_screen > bottom_of_element) && (top_of_screen < bottom_of_element)) {
$(".project-thumb1").eq(myIndex2).addClass("current");
$('.slider-heading').eq(myIndex2).addClass('current');
$('.slide-subheading').eq(myIndex2).addClass('current');
$('.slider-paragraph').eq(myIndex2).addClass('current');
$('.slider-year').eq(myIndex2).addClass('current');
} else {
$('.project-thumb1').eq(myIndex2).removeClass('current')
$('.slider-heading').eq(myIndex2).removeClass('current');
$('.slide-subheading').eq(myIndex2).removeClass('current');
$('.slider-paragraph').eq(myIndex2).removeClass('current');
$('.slider-year').eq(myIndex2).removeClass('current');
}
});