seq-theme-intro
Version:
The Sequence.js introduction theme used to briefly describe how Sequence.js works
535 lines (435 loc) • 22.5 kB
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>Intro - Sequence.js Theme</title>
<link href="css/sequence-theme.intro.css" rel="stylesheet" media="all">
<style>
body {
margin: 0;
padding: 0;
}
</style>
<!--[if lt IE 9]>
<script src="scripts/respond.min.js"></script>
<![endif]-->
</head>
<body>
<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://sequencejs.com/documentation/" title="Read the Sequence.js documentation">Fully documented</a>, along with <a href="http://sequencejs.com/documentation/#options" title="Learn more about Sequence.js options">30+ options</a>, and an <a href="http://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://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://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>
<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>