Forum Discussion
Before-After Image slider Freebie
Hi all,
I was looking for a way to create before-after interaction.
First I tried using sliders but it didn't come out as I expected.
So, I decided to use a web object. You can download the story and try it. Just change the photos and add it as a web object.
See it action https://storage.googleapis.com/rscreativework/ELH100/story.html
I am glad you find it useful. These days I am working a lot on using web objects in Storyline.
I hope to share more examples, they are mostly experiments but it is fun to push the limits.
The web object in Storyline is more versatile than the Embed block in Rise. Because of this, I will frequently use the Rise Storyline block with a Web Object slide to get the desired result. Here are 2 examples:
Chat box: https://360.articulate.com/review/content/c11d1b65-071d-4d11-9c67-d8105fe253db/review
Data Visualization: https://360.articulate.com/review/content/2ac2b70f-9bdc-46c4-a7f8-99fe12aaa8d4/review
Thats cool!
This is awesome as usual, Ridvan. Thanks for sharing.
Like magic! Thanks for sharing!
Nice work. 👍🏻
Yeah, sliders skip variables when moved fast and it all goes down the drain, so I know the pain. :)
This looks great! Thanks for sharing, Ridvan!
Is there an optimal image size? I'm so close to making this work, but my images are a bit off.
Hi Alyssa, I haven't tried this myself, but it looks like the images that Ridvan used were 915 x 569 pixels.
Thanks Ginger! It's perfect, and I even managed to change the color of the slider.
I'm actually curious, if anyone is familiar with coding, if it's possible to add a handle or icon to the slider? (example in attached image)
