Forum Discussion
Freebie: `Before & After` Image Slider
I thought someone might be interested in this slider interaction.
The source file can be downloaded here.
Here is a brief blog post about the setup.
Okay, I confess that I must be realllllly challenged. I cannot replicate this at all. I downloaded the various versions, but I just have no concept of how to change things to make it work with my images. Is there an actual tutorial?
He blogged about it, but basically...
- You need a background image that will be either your before or after. It doesn't matter which.
- You need an image for the opposite state that you will slice vertically into a bunch of smaller pieces. I believe Michael used 50(ish). This is your masking image that you will change as a slider is moved, hiding or revealing slices based on which direction the slider is moving.
- You will need a number of states for the masking image. Start with one that contains all of the slices assembled as a whole picture. This will help maintain alignment and make creating additional states easier. Don't put this as your "normal" state, be sure it is something else.
- Duplicate the state, rename it, and delete the right most slice of the image in the new state.
- Duplicate the state you just created, and delete the right most slice.
- Repeat until you reach the last state that should have 1 slice remaining.
- Delete everything out of the Normal state. The Normal State is now a layer that is empty that will show the whole base image.
- Insert a slider.
Make the total steps in the slider equal to the number of states for your masking image. - Add conditional triggers:
Change state of (image) to (masking image state corresponding to slider's position) when the slider moves IF (Name of Slider's variable) is equal to (position corresponding to the desired state).
Sorry for the delayed response but I hope you (and others) find this useful.
