sequencejs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sequence.js - The responsive CSS animation framework</title> <meta name="description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications"/> <link rel="canonical" href="http://www.sequencejs.com/" /> <link rel="publisher" href="https://plus.google.com/+IanLunn/"/> <meta property="og:locale" content="en_GB" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Sequence.js - The responsive CSS animation framework" /> <meta property="og:description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications" /> <meta property="og:url" content="http://ianlunn.github.io/Sequence/" /> <meta property="og:site_name" content="Sequence.js - The responsive CSS animation framework" /> <meta property="og:image" content="http://www.sequencejs.com/images/sequence-logo.png" /> <meta name="twitter:card" content="summary"/> <meta name="twitter:description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications"/> <meta name="twitter:title" content="Sequence.js - The responsive CSS animation framework"/> <meta name="twitter:site" content="@IanLunn"/> <meta name="twitter:domain" content="http://www.sequencejs.com/"/> <meta name="twitter:image:src" content="http://www.sequencejs.com/images/sequence-logo.png"/> <meta name="twitter:creator" content="@IanLunn"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" media="all"> <link href='//fonts.googleapis.com/css?family=Ubuntu:500,400,300,700|Montserrat:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css'> <link href="css/demo-page.css" rel="stylesheet" media="all"> <link href="css/sequence-theme.intro.css" rel="stylesheet" media="all"> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="apple-touch-icon" href="images/touch-icon.png" />  </head> <body>  <div class="header"> <div class="container valign"> <div> <div class="logo"> <object class="header__logo" type="image/svg+xml" data="images/sequence-logo.svg" width="180" height="35"> <a href="http://www.sequencejs.com/"> <img src="images/sequence-logo.png" alt="Sequence.js" /> </a> </object> </div> <ul class="nav"> <li><a href="https://github.com/IanLunn/Sequence" title="Fork Sequence.js Project on GitHub"><i class="fa fa-github"></i> Fork on GitHub</a></li> <li><a href="http://www.sequencejs.com/" title="Sequence.js - The responsive CSS animation framework">Visit Full Site <i class="fa fa-arrow-circle-right"></i></a></li> </ul> </div> </div> </div> <div class="main container"> <div class="title"> <h1>The responsive CSS animation framework</h1> <h2>For creating sliders, presentations, banners, and other step-based applications</h2> </div> <div class="social aligncenter"> <div class="social-button"> <iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Sequence&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> </div> <div class="social-button"> <a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a> </div> <div class="social-button"> <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/IanLunn/Sequence"></a> </div> </div> <div id="sequence" class="seq"> <div class="seq-screen"> <ul class="seq-canvas"> <li class="seq-step1 seq-in" id="step1"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <i class="seq-step-icon">1</i> <code> <span><strong>.seq-in</strong> .content {</span> <span class="seq-code-1">transform: translateY(0);</span> <span class="seq-code-1">transition: .2s;</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <div class="seq-title"> <object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml"> <img src="images/bracket-open.png" alt="An opening code bracket" /> </object> <h2>Step 1</h2> <object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml"> <img src="images/bracket-close.png" alt="A closing code bracket" /> </object> </div> <h3>Easily add CSS transitions to step-based applications using "in" and "out" CSS classes</h3> <div class="seq-step"> <p>Step 1 is currently in its <code>in<sup class="seq-step-icon">1</sup></code> position. Watch what happens when you <a href="#" title="" class="seq-next">go to the next step →</a></p> </div> </div> </div> </li> <li class="seq-step2" id="step2"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <i class="seq-step-icon">2</i> <code> <span>.seq-out .content {</span> <span class="seq-code-1">transform: translateY(-100%);</span> <span class="seq-code-1">transition: .2s;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <i class="seq-step-icon">3</i> <code> <span>.content {</span> <span class="seq-code-1">transform: translateY(100%);</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <i class="seq-step-icon">4</i> <code> <span>.seq-in .content {</span> <span class="seq-code-1">transform: translateY(0);</span> <span class="seq-code-1">transition: .25s;</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <div class="seq-title"> <object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml"> <img src="images/bracket-open.png" alt="An opening code bracket" /> </object> <h2>Step 2</h2> <object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml"> <img src="images/bracket-close.png" alt="A closing code bracket" /> </object> </div> <h3>Sequence.js takes care of the functionality so you can concentrate on presenting your content in style</h3> <div class="seq-step"> <p>By going to the next step, you caused step 1 to transition from <code>in<sup class="seq-step-icon">1</sup></code> to <code>out<sup class="seq-step-icon">2</sup></code> and step 2 to transition from <code>start<sup class="seq-step-icon">3</sup></code> to <code>in<sup class="seq-step-icon">4</sup></code>. All with just several of lines of CSS.</p> <p class="seq-tip seq-bulb">When navigating backwards Sequence.js can automatically reverse these transitions.</p> </div> </div> </div> </li> <li class="seq-step3" id="step3"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <code> <span>.seq-in .rotate {</span> <span class="seq-code-1">animation-name: rotate;</span> <span class="seq-code-1">animation-duration: 1s;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>.seq-in .fade {</span> <span class="seq-code-1">animation-name: fade;</span> <span class="seq-code-1">animation-duration: 1s;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>.seq-in .threed {</span> <span class="seq-code-1">animation-name: threed;</span> <span class="seq-code-1">animation-duration: 1s;</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <div class="seq-title"> <object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml"> <img src="images/bracket-open.png" alt="An opening code bracket" /> </object> <h2>Step 3</h2> <object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml"> <img src="images/bracket-close.png" alt="A closing code bracket" /> </object> </div> <h3>Create unique animated applications using any CSS properties you wish</h3> <div class="seq-step"> <p class="seq-tip seq-bulb">Sequence.js doesn't limit you to specific HTML/CSS. Use the properties, attributes, workflow, conventions, and libraries you're familiar with.</p> </div> <ul class="seq-examples"> <li> <object class="seq-transform seq-example" data="images/square.svg" type="image/svg+xml"> <img src="images/square.png" alt="A blue square" width="42" height="42" /> </object> <p>Transform</p> </li> <li> <object class="seq-scale seq-example" data="images/square.svg" type="image/svg+xml"> <img src="images/square.png" alt="A blue square" width="42" height="42" /> </object> <p>Scale</p> </li> <li> <object class="seq-rotate seq-example" data="images/square.svg" type="image/svg+xml"> <img src="images/square.png" alt="A blue square" width="42" height="42" /> </object> <p>Rotate</p> </li> <li> <object class="seq-fade seq-example" data="images/square.svg" type="image/svg+xml"> <img src="images/square.png" alt="A blue square" width="42" height="42" /> </object> <p>Fade</p> </li> <li> <object class="seq-threed seq-example" data="images/square.svg" type="image/svg+xml"> <img src="images/square.png" alt="A blue square" width="42" height="42" /> </object> <p>3D</p> </li> <li> <div class="seq-doors seq-example" role="img" aria-label="Two small blue rectangles vertically split, moving toward and away from each other like sliding doors"></div> <p>& more</p> </li> </ul> </div> </div> </li> <li class="seq-step4" id="step4"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <code> <span>.seq-in .touch {</span> <span class="seq-code-1">animation-name: rotate;</span> <span class="seq-code-1">animation: .35s 1.8s;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>.seq-in .touch-title-1 {</span> <span class="seq-code-1">animation-name: fade-out;</span> <span class="seq-code-1">animation: .3s 1.5s;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>.seq-in .touch-title-2 p {</span> <span class="seq-code-1">animation-name: slide-in;</span> <span class="seq-code-1">animation: .3s 2.35s;</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-touch"> <p class="seq-touch-title seq-touch-title-1">Build for a multi-device, modern web...</p> <div class="seq-touch-title seq-touch-title-2"> <p>Fully responsive with touch support</p> </div> <img class="seq-phone" src="images/phone.png" srcset="images/phone.png 1x, images/phone@2x.png 2x" alt="A hand holding an illustrated generic mobile phone" /> <img class="seq-swipe" src="images/swipe.png" srcset="images/swipe.png 1x, images/swipe@2x.png 2x" alt="A closed hand with the index finger extended swiping over a mobile phone" /> </div> </div> </li> <li class="seq-step5" id="step5"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <i class="seq-step-icon">5</i> <code> <span>.seq-in .content {</span> <span class="seq-code-1">transform: <strong>translateZ(0)</strong>;</span> <span class="seq-code-1"><strong>will-change: transform</strong>;</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <i class="seq-step-icon">6</i> <code> <span><strong>.seq-next</strong> {</span> <span class="seq-code-1">/* Makes an element a functioning next button */</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <i class="seq-step-icon">7</i> <code> <span><strong>.seq-touch</strong> {</span> <span class="seq-code-1">/* Styles for touch devices */</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <h3>All of the features you need for animated applications</h3> <div class="seq-step"> <p><a href="http://www.sequencejs.com/documentation/" title="Read the Sequence.js documentation">Fully documented</a>, along with <a href="http://www.sequencejs.com/documentation/#options" title="Learn more about Sequence.js options">30+ options</a>, and an <a href="http://www.sequencejs.com/documentation/#api" title="Learn more about the Sequence.js API">easy-to-use API</a>.</p> <ul class="seq-features"> <li> <i class="fa fa-check"></i> Responsive Support </li> <li> <i class="fa fa-check"></i> Hardware Accelerated Animation<sup class="seq-step-icon">5</sup> </li> <li> <i class="fa fa-check"></i> Touch Support </li> <li> <i class="fa fa-check"></i> Easy-to-add UI<sup class="seq-step-icon">6</sup> </li> <li> <i class="fa fa-check"></i> Auto Play/Cycle </li> <li> <i class="fa fa-check"></i> State Classes for Easy Styling<sup class="seq-step-icon">7</sup> </li> <li> <i class="fa fa-check"></i> Preloader </li> <li> <i class="fa fa-check"></i> & More </li> </ul> </div> </div> </div> </li> <li class="seq-step6" id="step6"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <code> <span>.browser-icon {</span> <span class="seq-code-1">transform: scale(0);</span> <span class="seq-code-1">transition: .2s;</span> <span class="seq-code-1">transition-timing-function: cubic-bezier(.55,1.58,.63,.99);</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>.seq-in .browser-icon {</span> <span class="seq-code-1">transform: scale(1);</span> <span>}</span> </code> </div> <div class="seq-code-block" data-seq> <i class="seq-step-icon">8</i> <code> <span>.seq-fallback {</span> <span class="seq-code-1">/* Fallback specific styles */</span> <span>}</span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <h3>Supported in modern browsers</h3> <ul class="seq-examples seq-browsers"> <li> <img class="seq-browser-icon seq-browser-icon-1" src="images/browsers/firefox_64x64.png" srcset="images/browsers/firefox_64x64.png 1x, images/browsers/firefox_128x128.png 2x" alt="Mozilla Firefox browser logo" width="64" height="64" /> <p>Firefox</p> </li> <li> <img class="seq-browser-icon seq-browser-icon-2" src="images/browsers/opera_64x64.png" srcset="images/browsers/opera_64x64.png 1x, images/browsers/opera_128x128.png 2x" alt="Opera browser logo" width="64" height="64" /> <p>Opera</p> </li> <li> <img class="seq-browser-icon seq-browser-icon-3" src="images/browsers/safari_64x64.png" srcset="images/browsers/safari_64x64.png 1x, images/browsers/safari_128x128.png 2x" alt="Apple Safari browser logo" width="64" height="64" /> <p>Safari</p> </li> <li> <img class="seq-browser-icon seq-browser-icon-4" src="images/browsers/chrome_64x64.png" srcset="images/browsers/chrome_64x64.png 1x, images/browsers/chrome_128x128.png 2x" alt="Google Chrome browser logo" width="64" height="64" /> <p>Chrome</p> </li> <li> <img class="seq-browser-icon seq-browser-icon-5" src="images/browsers/edge_64x64.png" srcset="images/browsers/edge_64x64.png 1x, images/browsers/edge_128x128.png 2x" alt="Microsoft Edge browser logo" width="64" height="64" /> <p>Edge/<br class="seq-small-break" />IE10+</p> </li> </ul> <h3>With a fallback theme for legacy browsers</h3> <div class="seq-step"> <p class="seq-tip seq-bulb">A traditional side-to-side slider is automatically shown when a browser doesn't support CSS transitions and transforms. Use the <code>.seq-fallback</code> class to style Sequence.js in older browsers<sup class="seq-step-icon">8</sup>.</p> </div> <ul class="seq-examples seq-browsers"> <li> <img class="seq-browser-icon seq-browser-icon-6" src="images/browsers/ie9_64x64.png" srcset="images/browsers/ie9_64x64.png 1x, images/browsers/ie9_128x128.png 2x" alt="Microsoft Internet Explorer 9 browser logo" width="64" height="64" /> <p>IE9</p> </li> <li> <img class="seq-browser-icon seq-browser-icon-7" src="images/browsers/ie8_64x64.png" srcset="images/browsers/ie8_64x64.png 1x, images/browsers/ie8_128x128.png 2x" alt="Microsoft Internet Explorer 8 browser logo" width="64" height="64" /> <p>IE8</p> </li> </ul> </div> </div> </li> <li class="seq-step7" id="step7"> <div class="seq-code-pane seq-valign"> <button type="button" class="seq-view-code"> <i class="fa fa-angle-double-up"></i> Show Code </button> <div class="seq-code"> <div class="seq-code-block" data-seq> <code> <span>/* Install via NPM */</span> <span><strong>npm install sequencejs</strong></span> </code> </div> <div class="seq-code-block" data-seq> <code> <span>/* Install via Bower */</span> <span><strong>bower install sequencejs</strong></span> </code> </div> </div> </div> <div class="seq-content seq-valign" data-seq> <div class="seq-instruction"> <p class="seq-follow-on">This presentation was powered by...</p> <object class="seq-logo" type="image/svg+xml" data="images/sequence-logo.svg" width="240" height="48"> <img src="images/sequence-logo.png" alt="Sequence.js logo" width="240" height="46" /> </object> <p>Make your animated step-based application today...</p> <a href="http://www.sequencejs.com/themes/" title="View themes created with Sequence.js" class="seq-button seq-button-highlight">View Example Themes <i class="fa fa-tag"></i></a> <a href="http://www.sequencejs.com/download/" title="Download Sequence.js" class="seq-button seq-button-link">Download Now <i class="fa fa-arrow-circle-down"></i></a> </div> </div> </li> </ul> </div> <fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons"> <button type="button" class="seq-prev" aria-label="Previous"><i class="fa fa-chevron-circle-left"></i> Previous</button> <button type="button" class="seq-next" aria-label="Next">Next <i class="fa fa-chevron-circle-right"></i></button> </fieldset> </div> <ul role="navigation" aria-label="Pagination" aria-controls="sequence" class="seq-pagination"> <li class="seq-current"><a href="#step1" rel="step1" title="Go to slide 1: Intro"><i class="fa fa-bookmark"></i> <span>Intro</span></a></li> <li><a href="#step2" rel="step2" title="Go to slide 2: How It Works"><i class="fa fa-info-circle"></i> <span>How It Works</span></a></li> <li><a href="#step3" rel="step3" title="Go to slide 3: Animation"><i class="fa fa-bolt"></i> <span>Animation</span></a></li> <li><a href="#step4" rel="step4" title="Go to slide 4: Responsive/Touch"><i class="fa fa-expand"></i> <span>Responsive/Touch</span></a></li> <li><a href="#step5" rel="step5" title="Go to slide 5: Features"><i class="fa fa-cog"></i> <span>Features</span></a></li> <li><a href="#step6" rel="step6" title="Go to slide 6: Support"><i class="fa fa-tablet"></i> <span>Support</span></a></li> <li><a href="#step7" rel="step7" title="Go to slide 7: Download"><i class="fa fa-arrow-circle-down"></i> <span>Download</span></a></li> </ul> <div class="title"> <h1>Example Themes</h1> <p class="tagline">View some of the themes we've created and made available in the <a href="http://www.sequencejs.com/themes/" title="Sequence.js Theme Store">Theme Store</a></p> </div> <ul class="products group"> <li class="product"> <a href="http://www.sequencejs.com/themes/modern-slide-in/" title="Modern Slide In"> <img src="http://www.sequencejs.com/wp-content/uploads/modern-slide-in-wide-580x362.png" alt="Modern Slide In - Wide Example" height="362" width="580"> <h3>Modern Slide In</h3> </a> </li> <li class="product"> <a href="http://www.sequencejs.com/themes/two-up/" title="Two Up"> <img src="http://www.sequencejs.com/wp-content/uploads/two-up-wide-580x362.png" alt="Two Up - Wide Example" height="362" width="580"> <h3>Two Up</h3> </a> </li> <li class="product"> <a href="http://www.sequencejs.com/themes/photo-stack/" title="Photo Stack"> <img src="http://www.sequencejs.com/wp-content/uploads/photo-stack-wide-580x362.png" alt="Photo Stack - Wide Example" height="362" width="580"> <h3>Photo Stack</h3> </a> </li> <li class="product"> <a href="http://www.sequencejs.com/themes/photo-slide/" title="Photo Slide"> <img src="http://www.sequencejs.com/wp-content/uploads/photo-slide-wide-example-580x362.png" alt="Photo Slide - Wide Example" height="362" width="580"> <h3>Photo Slide</h3> </a> </li> </ul> <div class="button-set"> <a href="http://www.sequencejs.com/themes/" class="button button-highlight" title="Sequence.js Theme Store">Theme Store <i class="fa fa-tag"></i></a> </div> <div class="title"> <h1>Get Started</h1> <p class="tagline">Getting started is easy with our in-depth documentation and ready-made themes</p> </div> <div class="button-set"> <a href="http://www.sequencejs.com/documentation/" class="button button-highlight" title="Sequence.js Documentation">Documentation <i class="fa fa-book"></i></a> <a href="http://www.sequencejs.com/download/" class="button button-link" title="Download Sequence.js">Download <i class="fa fa-arrow-circle-down"></i></a> </div> <div class="code-block"> <p>Install via Bower:</p> <pre><code>bower install sequencejs</code></pre> <p>Install via NPM:</p> <pre><code>npm install sequencejs</code></pre> </div> </div> <a href="http://www.sequencejs.com/" class="full-button"> Visit Full Site <i class="fa fa-arrow-circle-right"></i> </a> <div class="footer"> <div class="container"> <div class="sponsor"> <a href="https://www.browserstack.com/" title="BrowserStack - Cross Browser Testing Tool" target="_blank"><img src="images/browserstack-logo.png" alt="BrowserStack Logo" srcset="images/browserstack-logo.png 1x, images/browserstack-logo@2x.png 2x" height="35" width="160"></a> <p>Cross browser testing environment provided by <a href="https://www.browserstack.com/" title="BrowserStack - Cross Browser Testing Tool" target="_blank">BrowserStack</a>.</p> </div> <div class="made-by group"> <ul> <li>  <a cass="icon__ild" href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer & Front End Developer" target="_blank" class="ild-ident"> <svg class="" onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 52 52"> <g class="circle-holder"> <path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"></path> </g> <path class="i" fill="#fff" d="M15 22h9v16h-9v-16z"></path> <path class="l" fill="#fff" d="M28 14h9v24h-9v-24z"></path> </svg> </a> </li> <li><a class="icon__twitter" href="https://twitter.com/IanLunn/" title="Ian Lunn on Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a class="icon__github" href="https://github.com/IanLunn/Sequence/" title="Sequence on GitHub" target="_blank"><i class="fa fa-github"></i></a></li> </ul> <p>Made by<br /><a href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer & Front End Developer" target="_blank">Ian Lunn - Web Designer & Front End Developer</a></p> <p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for Sequence.js news, web design & development<br /> links, tips, and opinions</p> <small>Copyright © 2015 <a href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer & Front End Developer" target="_blank">Ian Lunn Design Limited</a></small> </div> </div> </div> <script type="text/javascript"> /* <![CDATA[ */ (function() { var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto'; t.parentNode.insertBefore(s, t); })(); /* ]]> */</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</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-11991680-7', 'auto'); ga('send', 'pageview'); </script> <script src="scripts/imagesloaded.pkgd.min.js"></script> <script src="scripts/hammer.min.js"></script> <script src="scripts/sequence.min.js"></script> <script src="scripts/sequence-theme.intro.js"></script> </body> </html>