【Web Hacks】使用JuxtaposeJS，在作品集網站中放入前後對比圖

Using JuxtaposeJS to embed “before/after” images in your portfolio website to tell a story (step-by-step).

I found it fun to place some “before and after” comparison images to showcase my design works in my portfolio website. Here is how I do it.

‘Model’ to ‘Completion’ comparison.

A house over a century comparison. (1923 vs 2023)

Firstly, visit JuxtaposeJS, and hit “Make a Juxtapose” button.

For interactive slider

1. paste your before and after images by giving URLs or upload through Dropbox. In my case, I use Flickr to host my images.
2. Tune variables as you prefer.
3. Click “Publish”, then copy the generated code in “Embed” section.
4. Embed the code to your webpage. Here is my example.

Upload images and try different options.

Copy the code. Paste to your webpage editor.

For GIF

1. Just drop and upload your before and after images from anywhere.
2. Click “Generate GIF” button. Download the file.

Upload images and generate GIF file.

Enjoy sliding!