Hi, is it possible to change the background-color of the text of a slide while I move the mouse to the second one?
What I try to do is to use “linear-gradient”, below is the code I try to use:
$(‘.swiper-slide’).on(‘mouseenter’, function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var perc = relX / $(this).width() * 100;
$(‘#title’).css(‘background’, ‘linear-gradient(to right, #005487 ‘+perc+’%, #ffffff ‘+perc+’%)’);
});
unfortunately I can’t change the color when I try to go back to the first slide, can anyone help me?
The problem is from how the mouseenter event interacts with the Swiper component, and to solve the problem you need to attach a mousemove event to the Swiper container rather than individual slides and then determine the slide under the mouse to calculate the gradient effect.
Here’s how you can do it:
$('.swiper-container').on('mousemove', function(e) {
// Calculate the relative mouse position within the container
var relX = e.pageX - $(this).offset().left;
var perc = relX / $(this).width() * 100;
// Determine which slide the mouse is over
var slideWidth = $('.swiper-slide').width();
var slideIndex = Math.floor(relX / slideWidth);
var currentSlide = $(this).find('.swiper-slide').eq(slideIndex);
if(currentSlide.hasClass('swiper-slide-active')) {
$('#title').css('background', 'linear-gradient(to right, #005487 '+perc+'%, #ffffff '+perc+'%)');
} else {
$('#title').css('background', '');
}
});
$('.swiper-container').on('mouseleave', function() {
$('#title').css('background', '');
});
The code binds the mousemove event to the .swiper-container , calculates the percentage of the mouse’s position relative to the container width, and determines which slide the mouse is currently hovering over. If the mouse is hovering over the active slide, it applies the gradient effect. If the mouse leaves the container, it resets the background of #title .
Hi, thanks for your help, unfortunately it’s not what I need, my fault for explaining myself badly, I’ll try to be clearer: I would need a JS code that when dragging the slide from the white background it passes over the blue background you change the portion of text with another color, which is why I had hypothesized the use of linear-gradient, but I have difficulty calculating the percentage of text to change based on the position on the container.
I think we’ll need to see a working copy as I copied the code you posted and I don’t see the blue background so its hard to see what effect you are trying to achieve. A lot of the html doesn’t make sense in a responsive environment either so there seems to be something missing or you have copied some live html rather than source.
However it sounds to me as though you are trying to change the color of some ‘partial text’ as it travels over a coloured background and that would be difficult to achieve other than using mix-blend mode as in this recent demo of mine.
The background-clip: text property is not fully supported in all browsers. You may need to consider a fallback for browsers that do not support these properties. However the browser support for them, This code will change the background of the text to your linear gradient when you hover over a .swiper-slide element, and then change it back when you stop hovering.
With mix blend mode you can have the color change but unfortunately you cannot specify the colors so all you get is the difference.This turns the white text black but keeps the blue text on the right
Assuming that was the effect you were going for anyway I can’t see any other way to change it and I don’t see that adding a background when you move it is going to do anything as the text is already cut off on the static view.
I can’t see any other way to change it and I don’t see that adding a background when you move it is going to do anything as the text is already cut off on the static view.