D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
abernier
Full window
Github gist
TransitionAB
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> <style> body {width:500px; margin:0 auto; /*background:url(https://dl.dropbox.com/s/sw0qqg0j0qq8xng/grid.png?dl=1);*/} .foo {display:inline-block; width:100px; height:100px; line-height:100px; border:1px solid; border-radius:9em; background:yellow; border:1px solid; text-align:center; -webkit-transform:rotateX(180deg) scale(.5) translate(20px, 30%);-moz-transform:rotateX(180deg) scale(.5) translate(20px, 30%);-ms-transform:rotateX(180deg) scale(.5) translate(20px, 30%);transform:rotateX(180deg) scale(.5) translate(20px, 30%); cursor:pointer;} .foo1 {position:fixed; top:50%;} .foo2 {border-radius:0; background-color:red; width:50px;height:50px; line-height:50px; border-width:5px; -webkit-transform:rotate(10deg) scale(3) translate(20px, -80%);-moz-transform:rotate(10deg) scale(3) translate(20px, -80%);-ms-transform:rotate(10deg) scale(3) translate(20px, -80%);transform:rotate(10deg) scale(3) translate(20px, -80%);} p.actions button {width:50%; line-height:1.5; font-size:200%;} p.actions.stuck {position:fixed;left:50%;width:500px;margin-left:-250px;top:0; z-index:9999;} </style> </head> <body> <h1>TransitionAB</h1> <p>Unobstrusive transition between 2 DOM elements.</p> <p><em>Never touch your original elements!</em></p> <ul> <li>hardware accelerated</li> <li>automatic transitions between all animatable CSS properties</li> </ul> <pre><code> var $A = $('.foo1'); var $B = $('.foo2'); var t = new TransitionAB($A, $B, {duration: 1000}); </code></pre> <p class="actions"> <button id="A2B">t.A2B()</button><button id="B2A">t.B2A()</button> </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla condimentum massa, sed fringilla quam imperdiet non. Aliquam rhoncus, lacus ac posuere ullamcorper, risus nibh tempus turpis, ornare posuere ante sem sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisl et ante tincidunt ultrices. Quisque metus arcu, cursus in metus et, laoreet rutrum purus. Mauris bibendum odio a purus ullamcorper lobortis. <span class="foo foo1">A</span>Fusce pharetra blandit ante vel tincidunt. Proin sapien enim, fringilla ut purus eget, dignissim sodales justo. Sed aliquam feugiat pulvinar. Aenean et velit eget felis auctor semper nec eu nisi. In rutrum nisi adipiscing dolor egestas, eget tempor enim commodo.</p> <p>Praesent vel malesuada enim. Fusce sed orci a neque sodales adipiscing id quis eros. Morbi convallis dui eget adipiscing volutpat. In in arcu tristique, faucibus arcu id, ultrices lectus. Mauris ac dictum nunc, sed interdum felis. Vivamus eget semper est. Suspendisse tortor sapien, egestas vel commodo placerat, faucibus vitae risus. Suspendisse potenti. Aliquam at mattis leo. Aliquam sed dolor vitae augue interdum viverra.</p> <p>Curabitur condimentum enim id lacinia posuere. In vulputate placerat nunc. Integer hendrerit sed metus ac vehicula. Aliquam turpis nulla, aliquet sit amet placerat quis, scelerisque sit amet diam. Sed tincidunt ipsum odio, vitae egestas libero imperdiet quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam condimentum consequat orci, vel pulvinar purus bibendum nec. Sed feugiat posuere neque volutpat interdum. In at fermentum lacus. Sed pretium porttitor orci quis fringilla. Etiam condimentum ullamcorper nisi, ac rhoncus est volutpat eu. Phasellus et leo at quam viverra lobortis ac ut leo. Proin sit amet condimentum dolor.</p> <p>Vivamus id ipsum eget risus sollicitudin accumsan. Pellentesque porttitor erat et porttitor elementum. Vestibulum gravida euismod metus, non elementum metus sollicitudin ac. Nam dapibus in est quis viverra. Proin quam erat, suscipit at condimentum rhoncus, blandit condimentum risus. Ut eget scelerisque nisi. Sed sit amet euismod dolor, ut faucibus sem. Morbi sed egestas dui. Sed elementum est quis est tempus suscipit. Aliquam erat volutpat. Proin vitae massa tortor. Sed dictum erat ipsum, quis consectetur purus lacinia sed.</p> <p>Etiam nisl neque, luctus id libero id, accumsan vulputate arcu. <span class="foo foo2" style="margin-left:-100px;margin-top:50px;">B</span>Mauris semper augue at vulputate varius. Vestibulum id lorem porta, ullamcorper metus sed, auctor turpis. Cras feugiat blandit libero vel rutrum. Fusce mattis leo quis malesuada facilisis. Donec ornare dapibus orci. In sed sem et nulla interdum tincidunt non vel quam. Phasellus ullamcorper a tortor interdum tincidunt. Nullam odio felis, semper at leo a, vehicula ultrices arcu. Suspendisse viverra dolor sed nunc consectetur, ac sollicitudin justo sodales. Praesent luctus mi sed ipsum elementum, eget tincidunt justo aliquet. Aliquam laoreet purus vel odio rutrum fermentum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla condimentum massa, sed fringilla quam imperdiet non. Aliquam rhoncus, lacus ac posuere ullamcorper, risus nibh tempus turpis, ornare posuere ante sem sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisl et ante tincidunt ultrices. Quisque metus arcu, cursus in metus et, laoreet rutrum purus. Mauris bibendum odio a purus ullamcorper lobortis. Fusce pharetra blandit ante vel tincidunt. Proin sapien enim, fringilla ut purus eget, dignissim sodales justo. Sed aliquam feugiat pulvinar. Aenean et velit eget felis auctor semper nec eu nisi. In rutrum nisi adipiscing dolor egestas, eget tempor enim commodo.</p> <p>Praesent vel malesuada enim. Fusce sed orci a neque sodales adipiscing id quis eros. Morbi convallis dui eget adipiscing volutpat. In in arcu tristique, faucibus arcu id, ultrices lectus. Mauris ac dictum nunc, sed interdum felis. Vivamus eget semper est. Suspendisse tortor sapien, egestas vel commodo placerat, faucibus vitae risus. Suspendisse potenti. Aliquam at mattis leo. Aliquam sed dolor vitae augue interdum viverra.</p> <p>Curabitur condimentum enim id lacinia posuere. In vulputate placerat nunc. Integer hendrerit sed metus ac vehicula. Aliquam turpis nulla, aliquet sit amet placerat quis, scelerisque sit amet diam. Sed tincidunt ipsum odio, vitae egestas libero imperdiet quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam condimentum consequat orci, vel pulvinar purus bibendum nec. Sed feugiat posuere neque volutpat interdum. In at fermentum lacus. Sed pretium porttitor orci quis fringilla. Etiam condimentum ullamcorper nisi, ac rhoncus est volutpat eu. Phasellus et leo at quam viverra lobortis ac ut leo. Proin sit amet condimentum dolor.</p> <p>Vivamus id ipsum eget risus sollicitudin accumsan. Pellentesque porttitor erat et porttitor elementum. Vestibulum gravida euismod metus, non elementum metus sollicitudin ac. Nam dapibus in est quis viverra. Proin quam erat, suscipit at condimentum rhoncus, blandit condimentum risus. Ut eget scelerisque nisi. Sed sit amet euismod dolor, ut faucibus sem. Morbi sed egestas dui. Sed elementum est quis est tempus suscipit. Aliquam erat volutpat. Proin vitae massa tortor. Sed dictum erat ipsum, quis consectetur purus lacinia sed.</p> <p>Etiam nisl neque, luctus id libero id, accumsan vulputate arcu. Mauris semper augue at vulputate varius. Vestibulum id lorem porta, ullamcorper metus sed, auctor turpis. Cras feugiat blandit libero vel rutrum. Fusce mattis leo quis malesuada facilisis. Donec ornare dapibus orci. In sed sem et nulla interdum tincidunt non vel quam. Phasellus ullamcorper a tortor interdum tincidunt. Nullam odio felis, semper at leo a, vehicula ultrices arcu. Suspendisse viverra dolor sed nunc consectetur, ac sollicitudin justo sodales. Praesent luctus mi sed ipsum elementum, eget tincidunt justo aliquet. Aliquam laoreet purus vel odio rutrum fermentum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla condimentum massa, sed fringilla quam imperdiet non. Aliquam rhoncus, lacus ac posuere ullamcorper, risus nibh tempus turpis, ornare posuere ante sem sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisl et ante tincidunt ultrices. Quisque metus arcu, cursus in metus et, laoreet rutrum purus. Mauris bibendum odio a purus ullamcorper lobortis. Fusce pharetra blandit ante vel tincidunt. Proin sapien enim, fringilla ut purus eget, dignissim sodales justo. Sed aliquam feugiat pulvinar. Aenean et velit eget felis auctor semper nec eu nisi. In rutrum nisi adipiscing dolor egestas, eget tempor enim commodo.</p> <p>Praesent vel malesuada enim. Fusce sed orci a neque sodales adipiscing id quis eros. Morbi convallis dui eget adipiscing volutpat. In in arcu tristique, faucibus arcu id, ultrices lectus. Mauris ac dictum nunc, sed interdum felis. Vivamus eget semper est. Suspendisse tortor sapien, egestas vel commodo placerat, faucibus vitae risus. Suspendisse potenti. Aliquam at mattis leo. Aliquam sed dolor vitae augue interdum viverra.</p> <p>Curabitur condimentum enim id lacinia posuere. In vulputate placerat nunc. Integer hendrerit sed metus ac vehicula. Aliquam turpis nulla, aliquet sit amet placerat quis, scelerisque sit amet diam. Sed tincidunt ipsum odio, vitae egestas libero imperdiet quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam condimentum consequat orci, vel pulvinar purus bibendum nec. Sed feugiat posuere neque volutpat interdum. In at fermentum lacus. Sed pretium porttitor orci quis fringilla. Etiam condimentum ullamcorper nisi, ac rhoncus est volutpat eu. Phasellus et leo at quam viverra lobortis ac ut leo. Proin sit amet condimentum dolor.</p> <p>Vivamus id ipsum eget risus sollicitudin accumsan. Pellentesque porttitor erat et porttitor elementum. Vestibulum gravida euismod metus, non elementum metus sollicitudin ac. Nam dapibus in est quis viverra. Proin quam erat, suscipit at condimentum rhoncus, blandit condimentum risus. Ut eget scelerisque nisi. Sed sit amet euismod dolor, ut faucibus sem. Morbi sed egestas dui. Sed elementum est quis est tempus suscipit. Aliquam erat volutpat. Proin vitae massa tortor. Sed dictum erat ipsum, quis consectetur purus lacinia sed.</p> <p>Etiam nisl neque, luctus id libero id, accumsan vulputate arcu. Mauris semper augue at vulputate varius. Vestibulum id lorem porta, ullamcorper metus sed, auctor turpis. Cras feugiat blandit libero vel rutrum. Fusce mattis leo quis malesuada facilisis. Donec ornare dapibus orci. In sed sem et nulla interdum tincidunt non vel quam. Phasellus ullamcorper a tortor interdum tincidunt. Nullam odio felis, semper at leo a, vehicula ultrices arcu. Suspendisse viverra dolor sed nunc consectetur, ac sollicitudin justo sodales. Praesent luctus mi sed ipsum elementum, eget tincidunt justo aliquet. Aliquam laoreet purus vel odio rutrum fermentum.</p> <script src="jquery-2.0.3.js"></script> <script src="transitionab.js"></script> <script> var $A = $('.foo1'); var $B = $('.foo2'); var t = new TransitionAB($A, $B, {duration: 1000}); $('#A2B').click(t.A2B); $('#B2A').click(t.B2A); </script> <script src="waypoints.js"></script> <script src="waypoints-sticky.js"></script> <script> $('.actions').waypoint('sticky'); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-13126287-1', 'abernier.name'); ga('send', 'pageview'); </script> </body> </html>