- This topic is empty.
-
AuthorPosts
-
August 24, 2018 at 8:00 am #275660grimskiParticipant
I tried to titled this “Carousel hover effect where the active items background-image fills the entire carousel” …it didn’t sound too snappy! So I just went with ‘cool’ ;)
I stumbled across this carousel and I thought it was very interesting.
Example: https://www.ktm.com/gb/
See how when one of the carousel items is interacted with the background changes to fill the entire width of the carousel?
Has anyone seen this before, it doesn’t look like it’s a plugin and it’s not an example I’ve seen before.
August 25, 2018 at 12:10 am #275673AtelierbramParticipantNice. Someone had a good time tweaking that slider, adding those hover effects with extra markup.
September 5, 2018 at 12:58 am #275964grimskiParticipantI started to try and create a basic version, not sure if I should create a new thread in the JS form though to develop that.
Anyways, here’s what I have: https://codepen.io/moy/pen/QVvMxo
I think it’d be good if the images faded in when they’re displayed on hover, maybe once they’ve loaded as they could be quite large (viewport width) but I’m not sure if that’s possible if I’m just changing the
img src
?The image could be a CSS background image if that helped, I think that’s how the original example (https://www.ktm.com/gb) handle it in their carousel.
Also just noticed an odd visual glitch when hovering off the carousel completely where the text flickers. Looks like it’s to do with the opacity of the images within each panel (item) fading back in – any ideas?
September 5, 2018 at 5:03 am #275965ShikkedielParticipantHere’s some fiddling based on your code, you can preload the images to make sure they’re ready to be shown when hovered:
$('[data-src]').each(function() { var img = new Image(); img.src = $(this).data('src'); }); $('.carousel__item').mouseenter(function() { var value = $(this).attr('data-src'); $('.carousel__bg img').fadeTo(0,0).attr('src', value).fadeTo(500,1); }) .mouseleave(function() { $('.carousel__bg img').finish(); });
Edit – not sure (yet) where the text flicker comes from…
September 5, 2018 at 6:37 am #275966AtelierbramParticipantAn alternative version with different markup. Not sure it’s any better, but just some things to consider.
September 5, 2018 at 7:14 am #275968grimskiParticipantThose both work great!
How are the images preloaded? My only concern would be if that impacted the rest of the page load if there was (for example) 6 items which have 6 large background images. You wouldn’t want these hidden images to be loaded before the other items on the page? Especially on 3/4G connections I guess.
If an image wasn’t loaded in before it’s relevant item was hovered over I’d be happy adding a class to the container and displaying a loading spinner or something.
And I suppose if I wanted to ensure all the panel images had faded out first I could always add a
.delay
to the.fadeIn
function?The text flicker seems to be to do with this line of CSS:
.carousel:hover .carousel__image { opacity: 0;}
Taking it out stops the flicker but it’s a bit odd how just changing the opacity of the images causes that, as it’s not moving anywhere to causes a layout change?
September 5, 2018 at 7:32 am #275969ShikkedielParticipantThe first bit caches the images (you don’t have to actually insert them into the DOM apparently) but it isn’t very efficient. One would have to check if they aren’t cached already and do some sort network speed test to optimise it. Other than that, I kinda like Bram’s approach better than my own.
September 5, 2018 at 8:28 am #275970grimskiParticipantYeah I think they both work great, to be honest I don’t know much about preloading images and obviously it’s better and smoother if it displays them without a longer gap. I guess I was just thinking if the images weren’t loaded in under an item was hovered over a spinner would be a good way to indicate something was happening if it took slightly longer to display.
If all the
data-src
images are loaded on page load, I guess I’ll just need to check they’re loaded after the rest of the content is first.The flicker was just the lack of a
z-index
on the absolute positioned content div by the looks of it – doh!September 5, 2018 at 10:38 am #275978ShikkedielParticipantIt seems that using
new Image()
doesn’t override previous caching so it would just be a matter of whether you want to preload or not (I think you prefer not to, I’m just rectifying my previous claim). A spinner should be fine to, doing a network speed test would be quite circumventive and unreliable. I’ll see if I can come up with an idea involving the spinner.September 5, 2018 at 11:50 am #275982grimskiParticipantHey, literally just having a play around now as well. I’m open to preloading but just thinking on mobile someone could download a lot of images they don’t need.
I think a slight delay wouldn’t be an issue. Maybe once all the images have been hovered over it’d be quicker/cached but that’s the next step I think and can wait.
I was thinking/playing around with adding a class of ‘loading’ onto the container as soon as an item is hovered over and then removing it once the image i ready to load in …the 2nd bit is proving a problem haha but I’m looking into it. Going through the https://www.ktm.com/gb/ script and trying to see how they do it but looks like that uses a lot of node.js.
September 5, 2018 at 1:00 pm #275989ShikkedielParticipantSome more fiddling (spinner, no preloading)…
September 6, 2018 at 3:19 pm #276040grimskiParticipantThis looks great! I suppose the good with about no preloading (maybe) is it src could like to video and pull that in when needed on hover which could be pretty cool!
Just out of interesting, when we say ‘no preloading’ does that just mean the images don’t preload on page load. But once they’ve been hovered over there’s a good chance the browser will cache them and load them in quicker the 2nd time?
September 7, 2018 at 9:54 am #276355ShikkedielParticipantRegarding the latter bit… indeed, they should be cached when hovered – until expiration.
I’m only wondering why it doesn’t always register as cached (using the
complete
attribute) when it clearly should be, making the spinner sometimes appear briefly when it shouldn’t be necessary.September 8, 2018 at 4:18 am #276373ShikkedielParticipantHere’s a minor variation that will let the spinner only appear once per page load at most:
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.