View Before And After Images With Mouse And Touch Events – RevealJS

Category: Image , Javascript | October 15, 2019
Author:CreativeTechGuy
Views Total:238 views
Official Page:Go to website
Last Update:October 15, 2019
License:MIT

Preview:

View Before And After Images With Mouse And Touch Events – RevealJS

Description:

RevealJS is a dead simple, fully responsive, touch-enabled before/after image comparison slider component implemented in pure JavaScript and CSS.

How to use it:

1. Link to the stylesheet Reveal.css and JavaScript Reveal.js.

<link rel="stylesheet" href="./dist/Reveal.css">
<script src="./dist/Reveal.js"></script>

2. Insert before & after images into a DIV container with the CSS class of reveal. That’s it.

<div class="reveal">
  <img src="before.jpg" alt="before">
  <img src="after.jpg" alt="after">
</div>

3. Output the current comparison percent using the update event.

Reveal.onupdate = function(data) {
  // data.percent
};

Changelog:

10/15/2019

  • JS updated

You Might Be Interested In:


Leave a Reply