D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
danharr
Full window
Github gist
Before vs After Slider
<!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>twentytwenty plugin demo</title> <link href="foundation.css" rel="stylesheet" type="text/css" /> <link href="twentytwenty.css" rel="stylesheet" type="text/css" /> <style type="text/css"> h3 { font-family: ChevinLight; font-size: 60px; } .twentytwenty-container img { height:500px; width:800px; } .icons { width:70px; float:left; } .ff { height :100px;} </style> </head> <body> <!--[if IE 6]> <div id="nytg-error"> <p>This interactive graphic requires a browser with SVG support, such as <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.apple.com/safari/download/">Safari</a> or the latest <a href="https://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9</a>. </p> <img src="https://koding.com/hello/img/oldbrowser.gif" width="670" alt="Error"> <div id="nytg-chartFrame" style="display:none;"> <![endif]--> <!--[if IE 7]> <div id="nytg-error"> <p>This interactive graphic requires a browser with SVG support, such as <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.apple.com/safari/download/">Safari</a> or the latest <a href="https://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9</a>. </p> <img src="https://koding.com/hello/img/oldbrowser.gif" width="670" alt="Error"> <div id="nytg-chartFrame" style="display:none;"> <![endif]--> <!--[if IE 8]> <div id="nytg-error"> <p>This interactive graphic requires a browser with SVG support, such as <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.apple.com/safari/download/">Safari</a> or the latest <a href="https://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9</a>. </p> <img src="https://koding.com/hello/img/oldbrowser.gif" width="670" alt="Error"> <div id="nytg-chartFrame" style="display:none;"> <![endif]--> <div class="row" style="margin-top: 2em;"> <div class="large-8 columns"> <h3>Social <img class="icons" src="https://www.tips-for-excel.com/dataviz/blue.goose_.icon_.jpg"></h3> <p >Limit the time spent eating alone at desks</p> </div> <div class="large-12 columns"> <div class="twentytwenty-container"> <img src="https://www.bbc.co.uk/news/special/2015/newsspec_10857/bbc_news_logo.png" /> <img src="https://www.bbc.co.uk/news/special/2015/newsspec_10857/bbc_news_logo.png" /> </div> </div> </div> <div class="row" style="margin-top: 2em;"> <p >Gather together for Coffee Breaks</p> <div class="large-12 columns"> <div class="twentytwenty-container"> <img src="https://www.tips-for-excel.com/dataviz/20141203_143804.jpg" /> <img src="https://www.tips-for-excel.com/dataviz/20141203_152601.jpg" /> </div> </div> </div> <div class="row" style="margin-top: 2em;"> <div class="large-8 columns"> <h3>Community <img class="icons" src="https://www.tips-for-excel.com/dataviz/icon.png"></h3> <p >Research ideas as a team rather than in silos</p> </div> <div class="large-16 columns"> <div class="twentytwenty-container"> <img src="https://www.tips-for-excel.com/dataviz/research2.png" /> <img src="https://www.tips-for-excel.com/dataviz/research1.png" /> </div> </div> </div> <div class="row" style="margin-top: 2em;"> <div class="large-8 columns"> <p >Celebrate each other's achievements</p> </div> <div class="large-16 columns"> <div class="twentytwenty-container"> <img src="https://www.tips-for-excel.com/dataviz/20141203_144429.jpg" /> <img src="https://www.tips-for-excel.com/dataviz/comp.jpg" /> </div> </div> </div> <div class="row" style="margin-top: 2em;"> <div class="large-12 columns"> <p >People are aware of other people's work but not in any great detail</p> </div> <div class="large-16 columns"> <div class="twentytwenty-container"> <img src="https://www.tips-for-excel.com/dataviz/a1.png" /> <img src="https://www.tips-for-excel.com/dataviz/b1.png" /> </div> </div> </div> <div class="row" style="margin-top: 2em;"> <div class="large-12 columns"> <p >We don’t know what others are doing, hence don’t always recognise the connections, interdependencies between each others’ work </p> </div> <div class="large-16 columns"> <div class="twentytwenty-container"> <img src="https://www.tips-for-excel.com/dataviz/link2.png" /> <img src="https://www.tips-for-excel.com/dataviz/link1.png" /> </div> </div> </div> <div class="ff"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="jquery.event.move.js"></script> <script src="jquery.twentytwenty.js"></script> <script> $(window).load(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.08}); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js