D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
maptastik
Full window
Github gist
500-502 E 3rd Street Before and After
<!DOCTYPE html> <html> <head> <title>500-502 E 3rd Street Collapse - Juxtaposition</title> </head> <body> <!-- Begin JuxtaposeJS div --> <div class="juxtapose" data-startingposition="50" data-showlabels="true" data-showcredits="true" data-animate="true"> <!-- Left image --> <img src="https://lh3.googleusercontent.com/Qo4SULZu7y5Xp-XR4tmFin2rn7HUlHxnL87MskQEHQ=s800" data-label="May 2013" data-credit="Google"> <!-- Right image --> <img src="https://lh3.googleusercontent.com/aNPYUA5Fb0tZ1IbxmVl_VUBbeGV-kEs6sdpfp4i8Sg=s800" data-label="August 9, 2015" data-credit="<a href='https://www.facebook.com/davidopva/posts/10153539793306449' target='_blank'>Dave O'Neill - Facebook"</a>> </div> <!-- JuxtaposeJS css --> <link rel="stylesheet" href="//cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css"> <!-- Custom css --> <!-- <link rel="stylesheet" href="style.css"> --> <!-- JuxtaposeJS script --> <script type="text/javascript" src="//cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js"></script> <style> .juxtapose { max-height: 535px; max-width: 876px; display: block; margin-left: auto; margin-right: auto; } </style> </body> </html>
https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js