← Previous Next →

Scrawl-canvas v8 - Snippets test 005

Create a responsive, interactive and accessible before/after slider infographic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, example.com sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget nunc lobortis mattis aliquam. Dapibus ultrices in iaculis nunc sed augue. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Lacus laoreet non curabitur gravida arcu ac tortor. Cursus in hac habitasse platea dictumst quisque sagittis. Arcu bibendum at varius vel pharetra vel turpis. Consectetur a erat nam at lectus urna duis convallis. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Viverra mauris in aliquam sem fringilla ut. Dui faucibus in ornare quam viverra orci. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Orci eu lobortis elementum nibh tellus molestie nunc non. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Urna nec tincidunt praesent semper feugiat nibh. Cras semper auctor neque vitae tempus quam pellentesque.

Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Turpis massa tincidunt dui ut ornare lectus sit amet est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Morbi tristique senectus et netus et malesuada. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Duis convallis convallis tellus id interdum velit laoreet id donec. Erat nam at lectus urna. Gravida cum sociis natoque penatibus et magnis. example.com Viverra maecenas accumsan lacus vel facilisis volutpat est.

Keyboard infographic shortcuts

Use tab: and shift + tab: to navigate into and away from the canvas element, to focus/blur it. When the canvas is focussed, we can:

Beirut explosion: satellite images before and after the blast

Satellite images show the scale of the damage caused by the 2020 explosions in the Lebanese capital, with buildings miles from the port lying in ruin. Points of interest include:

  1. A very large shed on the dockside surrounded by lorries and containers (center-left - before).
  2. A similar shed, completely destroyed (center-right - after).
  3. A boat (bottom centre) in the harbour, afloat (before) and rolled on its side (after).
  4. Some large transport containers (top-right), missing in the after image.
  5. A roundabout connecting the sheds to the transport network.
Beirut harbour before the explosion

Photograph taken:

Beirut harbour after the explosion

Photograph taken:

Photographs from: (Maxar Tech/AFP via Getty Images)

Original before|after image slider effect shown on Guardian Media article Beirut explosion: satellite images before and after the blast.

Tortor at auctor urna nunc id cursus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Aenean vel elit scelerisque mauris pellentesque. Dictum sit amet justo donec. Neque ornare aenean euismod elementum nisi quis eleifend quam. Nam aliquam sem et tortor consequat id. Egestas purus viverra accumsan in nisl. Leo in vitae turpis massa. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Ipsum faucibus vitae aliquet nec ullamcorper sit.

Ullamcorper sit amet risus nullam eget felis eget. Phasellus egestas tellus rutrum tellus pellentesque eu. Id consectetur purus ut faucibus pulvinar elementum integer. example.com Tempus iaculis urna id volutpat lacus laoreet. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Tempus egestas sed sed risus. Ac turpis egestas sed tempus. Ut aliquam purus sit amet luctus venenatis lectus. Bibendum est ultricies integer quis auctor. Morbi tristique senectus et netus. Facilisi etiam dignissim diam quis enim lobortis. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Id donec ultrices tincidunt arcu non sodales. Libero enim sed faucibus turpis in eu mi bibendum. Laoreet suspendisse interdum consectetur libero id faucibus. Ut pharetra sit amet aliquam id diam maecenas ultricies.

Arcu non odio euismod lacinia. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Tristique et egestas quis ipsum suspendisse ultrices gravida. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Tellus in hac habitasse platea. Lorem dolor sed viverra ipsum nunc. Sed elementum tempus egestas sed sed. Nunc id cursus metus aliquam eleifend. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Amet porttitor eget dolor morbi. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Etiam erat velit scelerisque in. Massa id neque aliquam vestibulum morbi.example.com

Test purpose

Touch test: should work as expected

Annotated code:

A note on the HTML code required by the snippet

The "before-after-slider-infographic" snippet coded up for this demo requires that any element presented to it for creating a slider infographic has the following structure:


<!-- The container needs an id attribute, which will be used as the snippet's namespace prefix -->
<div id="beirut-explosion-infographic" class="interactive-slider-container">

  <!-- Two <figure> elements, each with a "data-frame" attribute (set to "left" and "right") -->
  <figure data-frame="left">

    <!-- A <figcaption> element - text will be displayed in the infographic -->
    <figcaption>Beirut harbour before the explosion</figcaption>

    <!-- An <img> element - which can be responsive -->
    <img 
      id="beirut-infographic-before-image"
      alt="" 
      src="path/to/image/file" />

    <!-- A <time> element, whose content will be displayed on the infographic -->
    <p>Photograph taken: <time datetime="2020-07-31">31 July</time></p>
  </figure>
  
  <figure data-frame="right">
    <figcaption>Beirut harbour after the explosion</figcaption>
    <img 
      id="beirut-infographic-after-image"
      alt="" 
      src="path/to/image/file" />
    <p>Photograph taken: <time datetime="2020-08-05">5 August</time></p>
  </figure>
</div>