CSS-Tricks
The default "fade" option its more like a "flash"
Hi all. Anithing Slider it is a great plugin. Congratulations.
I'm not a programmer, but a designer, so I need the image atached to explain myself.
I think the timing for considering the fade option as fade, its wrong.
Perhaphs this can be called a flash (as in a flash of light) transition, becouse for a brief moment the background color is seen. And the timing for a fade transition must be modified.
I hope this helps to improve the already great plugin.
Hello @Rafaelini!
You do have a good point. But, I think the first issue is that the y-axis should be opacity, not transparency. Given that, the main problem occurs with methods 2 & 3 in that when img 2's opacity is at 100%, img 1 will not be seen fading as it will be "behind" img 2. So maybe I just need rename the current fade to "crossfade" and add a new "fadeIn" option? because in methods 2 and 3 above, the "fadeOut" will never been seen. Would that work?
I really am open to input, and would love to hear any feedback and/or criticisms.
Great. Issue 1, yes opacity. I'm thinking as a designer XD, not css code.
I have prepared a functional example here, (not spam): http://otake.com.mx/Foros/AS-Revision/Ideas-AS-01.html to show some issues.
When you have an opaque image (jpg) it dosen't matter the fade out of the second image, so your aseveration than a fade in is enough is correct. But as the power of anithing slider is that you can nest anithing, you have a lot of cases when you have transparency. A simple text with headings has, a png file has, etc. so you need the fade out of the second li element as well.
I have an idea!
How about making a variable to sync the fade in and fade out! This will be awsome and flexible.
You can have now a full fade-in-fade-out transition in any background color or image. (flash if white), an a correct fade option. Maybe eaven you can have a value, lets say 2, to have a dramatic blank pause. Who knows.
This sync variable is proportional to the duration of the effect, not an absolute value. the transition can be lets say 1 sec or 5 secs, but the sincronisation of the fade-in-fade-out is calculated uppon this secs.
Kind regards. Rafael
Well, I put together this "proof of concept", so it is possible. What do you think?
http://codepen.io/Mottie/pen/fHwGE
I'm playing with the values and looks great.
I changed the colors, from the primary colors you assigned to adjacent values in the color wheel. The last change, cyan to red pass thru a grey. But this is normal.
So this variable is ok.
I know this is just a test, but the timing reacts wierd. I'm making some tests and I'll post the results.
P.S. Download this aplication http://www.color-picker.de/en. (for windows) It mesures the colors on the screen. It is difficult to see when a color starts changing with the naked eye. This shows the values moving with the transition.
For user-frendly values, it would work better to change the sync value scale from 0-1 to 0-2.
(I'm using The name of the variables in Anithing Slider js) In Case 2 the total duration it is verey clear. delay+animationTime
If you change the scale to 2, the Case 3 its verey clear too.
Its a litle harder to understand (for users) the Case 1.
- The visible transition in opaque slides is as marked in animationTime variable. But it is "consuming" the time of the delay value, verey specific from the previus delay time. (magenta zone)
- In transparent slides, the visible fade out consumes time of the next delay value.
- But none of this transitions add any second to the total duration of the slideshow. So again, the 0-2 scale looks more natural.
Well, actually if you look at it from the perspective of when "img 2" starts its animation compared to "img 1":
- Case 1: delay = -1aT
- Case 2: delay = 0
- Case 3: delay = 1aT
And this makes more sense to me.
I thought that posibility. Perhaphs it is the best solution keeping in mind the other transitions. Ok.