: Javascript slider with fade I've been scouring the web for a slider that offers a particular effect, but I can't find one. I'm hoping that someone here will be able to help out... Specifically,
I've been scouring the web for a slider that offers a particular effect, but I can't find one. I'm hoping that someone here will be able to help out...
Specifically, I need a slider that will slide left and right through a series of HTML DIVs. However, I also need the old slide to fade out as it slides.
This is because I don't what to have a visible frame around the the slider, so I don't want the old slide to be cropped against an invisible edge.
It's hard to explain in words, so here's a graphic. In each case the green slide is entering the view, the red one is existing.
Is possible, I'd like the slide to use CSS3 transitions where available for the smoothest possible effect.
Has only ever come across such a beast?
More posts by @Ravi8258870
4 Comments
Sorted by latest first Latest Oldest Best
Look into the JQuery Anything Slider (or maybe it's 'AnythingSlider'). You can download on Github. I found it through looking into the repository of CSS-Tricks and they have blogged about it so there's quite a few options/examples/themes and it's well documented. I think it might provide what you are looking for.
Your first option (you've labelled them both 'option 2' but I can see what you meant) looks easier. Just alter the opacity of the divs.
Here's some HTML had a div with 50% opacity.
Included is a button which changes the opacity
<html>
<head>
<title>Fading Fun</title>
</head>
<body bgcolor="blue">
<p>
<div id="div_1" style="opacity:0.5;filter:alpha(opacity=50);">
Purple <img src="red.png" >
</div>
</p>
<input type="button" value="click me!" onclick="document.getElementById('div_1').style.opacity='1'">
</body>
</html>
I just found this page which talks about the alpha mask feature that Webkit supports. It's a custom vendor extension, so it's only supported by Webkit browsers (Chrome, Safari, etc.). However, IE also has a custom extension AlphaMask that does the same thing. And apparently you can do similar via SVG on Firefox.
It's not pretty, as it harkens back to the days of the browser wars between NN and IE when standards were basically chucked out the window and everyone just coded their own proprietary features, but it is possible to do what you're asking using CSS and a little help from SVG. I would do some testing on mobile browsers just to be safe though.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.