jslideshow.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <title>jslideshow | Casey DeLorme's Portfolio / caseydelorme.com</title>
  9. <link rel="icon" type="image/x-icon" href="https://d2xxklvztqk0jd.cloudfront.net/favicon.ico" />
  10. <link rel="stylesheet" type="text/css" href="/css/main.css#c5e63ca">
  11. </head>
  12. <body>
  13. <header class="group">
  14. <h1><a href='/'>Casey DeLorme</a></h1>
  15. <nav>
  16. <ul>
  17. <li><a href="/projects">Projects</a></li>
  18. <li><a href="/resume.html">Resume</a></li>
  19. </ul>
  20. </nav>
  21. </header>
  22. <div class="content group">
  23. <h3><a href="https://github.com/cdelorme/jslideshow">jslideshow</a></h3>
  24. <p>I&rsquo;ve always been fascinated with image transitions and slideshows using the web browser. Some time ago I wrote a <a href="https://github.com/cdelorme/jquery_slideshow_plugin">slideshow using jquery</a>.</p>
  25. <p>After reading an <a href="http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome">excellent article</a> on real-time rendering, I decided to try rewriting this in vanilla (eg. raw, with zero dependencies) javascript to leverage this approach.</p>
  26. <p>It turned out to be pretty clean, and the demo includes logic to load the javascript directly from github.</p>
  27. <p><strong><em>written on 2017-04-13</em></strong></p>
  28. </div>
  29. <footer class="group">
  30. <a href='https://www.facebook.com/CaseyRDeLorme' class='link facebook'></a>
  31. <a href='https://www.linkedin.com/in/cdelorme' class='link linkedin'></a>
  32. <a href='https://www.youtube.com/user/LordOfElm' class='link youtube'></a>
  33. <a href='https://github.com/cdelorme' class='link github'></a>
  34. <a href='skype:casey.delorme?chat' class='link skype'></a>
  35. <div class="scripts">
  36. <script type="text/javascript" src="/js/main.js#c5e63ca" async></script>
  37. </div>
  38. </footer>
  39. </body>
  40. </html>