gifcover.gif

Compare a picture before and after modifications. Play with the cursor to display modifications on one picture. Display information according picture's changes thanks to the markers. 

Steps

  1. First download the .zip HTML module right here: image comparison
  2. Add an HTML component
  3. Insert the module in the HTML component

    component.gif

  4. Add your pictures: the first is your "before" picture and the other is the "after" picture
  5. Customize your cursor
  6. Add markers to create animations and interactivities

    markers.gif

     

  7. Create your animations according to your markers

    Capture_d_e_cran_2018-05-07_a__17.08.57.png

     

Here is an example to show you what is possible: 

  • Display information according to your cursor and its position: 

example.gif

 

Possibilities are numerous. Play with the cursor and markers by adding sounds, others components, pop-up windows... Let your imagination speak once again!

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!