The Compare Widget

Create a before and after effect

You don’t need Temult Hype to use this widget

Download compare.zip (1.4mb)

The before and after effect below is a simple Hype animation that you can add to your Blocs web page. All you have to do is to change the pictures in the resources folder of the linked zip file. You must, however, keep the same file names foreground.jpg and background.jpg.

Under normal circumstances, you would add the widget to your page with the HTML widget by copying the head and body code from the compare.html file included in the zip and paste the respective bits of code to the body and head of your page. Unfortunately, there appears to be some conflict in Blocs that prevents this from working (something to do with duplicate scripts - if anyone solves this issue, please post to the forum).

In order to overcome the issue, just add your own two images to the compare.hypereseouces folder then upload the whole compare folder to your server. Once this is done, you can use the video bric to add the compare widget to your page in an iframe. Instead of linking to a youtube/vimeo video, simply change the link to http://yourdomain.com/compare/compare.html.  Leave everything else as it is. Obviously, change the yourdomain bit for your actual domain.

Drag the slider to see it in action

Fully Responsive

Place at any size

The widget itself is fully responsive (adjust your browser window to see it in action). This enables you to place the video bric anywhere on your page and at any size.

If you want to use multiple instances with different pictures, just copy the main compare folder and rename to compare2, compare3 etc. Customise the images in each instance and then add the respective versions(s) to your web page as detailed above.