Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (164 sloc) 8.306 kB
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Sequence Theme Demo - Apple Style</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../demo-assets/css/demo-styles.css" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="../../demo-assets/css/demo-styles-ie.css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs-theme.apple-style.css" />
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Magra:400,700'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='../../scripts/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="../../scripts/sequence.jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$status = $(".status");
var options = {
autoPlayDelay: 4000,
hidePreloaderDelay: 500,
nextButton: ".next",
prevButton: ".prev",
pauseButton: ".pause",
hidePreloaderusingCSS: false,
animateStartingFrameIn: true,
transitionThreshold: 500,
pauseOnHover: false,
customKeyEvents: {
80: "pause"
},
afterNextFrameAnimatesIn: function(){
if(sequence.settings.autoPlay){
$status.addClass("active").css("opacity", 1);
}
$(".prev, .next").css("cursor", "pointer").animate({"opacity": 1}, 500);
},
beforeCurrentFrameAnimatesOut: function(){
$status.animate({"opacity": 0}, 500, function(){
$status.removeClass("active");
});
$(".prev, .next").css("cursor", "auto").animate({"opacity": .7}, 500);
},
paused: function(){
$status.animate({"opacity": 0}, 500, function(){
$status.removeClass("active").addClass("paused");
});
},
unpaused: function(){
$status.removeClass("active paused");
}
};
var sequence = $("#sequence").sequence(options).data("sequence");
})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11991680-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style></style>
</head>
<body>
<div id="header">
<ul class="controls">
<li class="status"></li>
<li class="prev"></li>
<li class="pause"></li>
<li class="next"></li>
</ul>
<div id="sequence">
<ul>
<li>
<div class="intro animate-in">
<h2>Built using Sequence.js</h2>
<h3>The jQuery Slider Plugin with Infinite Style</h3>
</div>
<img class="iphone animate-in" src="images/iphone.png" alt="iPhone4" />
<img class="iphone-shadow animate-in" src="images/iphone-shadow.png" alt="" />
</li>
<li>
<img class="ipad" src="images/ipad.png" alt="iPad" />
<div class="slide2">
<h2>Creative Control</h2>
<p>Create unique sliders using CSS3 transitions</p>
</div>
<img class="ipad-shadow" src="images/ipad-shadow.png" alt="" />
</li>
<li>
<div class="slide3">
<h2>Cutting Edge</h2>
<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
</div>
<img class="iphone2" src="images/iphone.png" alt="iPhone4" />
<img class="iphone2-shadow" src="images/iphone-shadow.png" alt="" />
<img class="iphone3" src="images/iphone.png" alt="iPhone4" />
<img class="iphone3-shadow" src="images/iphone-shadow.png" alt="" />
<img class="iphone4" src="images/iphone.png" alt="iPhone4" />
<img class="iphone4-shadow" src="images/iphone-shadow.png" alt="" />
</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<img src="images/sequence-logo.png" alt="Sequence" />
<p>Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required!</p>
<ul id="product-links">
<li><a href="https://github.com/IanLunn/Sequence" title="Sequence">Download Sequence &gt;</a></li>
<li><a href="http://www.sequencejs.com/" title="More themes">More unique themes &gt;</a></li>
</ul>
</div>
<div id="aside">
<h3>Sequence Features</h3>
<ul id="features">
<li>Unique transition styles created using CSS3</li>
<li>Supports all modern browsers</li>
<li>Gracefully degrades in older browsers</li>
<li>Supports touch devices and swiping</li>
<li>Supports responsive layouts</li>
<li>20+ options (and more to come!)</li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<small><a href="http://www.sequencejs.com/" title="SequenceJS.com">SequenceJS.com</a>, the sequence.js script and its dependencies are &copy; 2012 <a href="http://www.ianlunn.co.uk/" title="Ian Lunn Design">Ian Lunn Design</a> unless otherwise specified.</small>
</div>
</div>
<!--code for the demo overlay and details, not needed for the demo to work-->
<iframe id="twttrHubFrame" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" name="twttrHubFrame" style="position: absolute; top: -9999em; width: 10px; height: 10px; " src="http://platform.twitter.com/widgets/hub.1326407570.html"></iframe>
<div id="demo-details" class="bottom">
<div id="demo-links" class="float-left">
<ul class="theme-title">
<li><h1><a class="no-underline" href="http://www.sequencejs.com/" title="Sequence Homepage">A <img class="logo-small" src="../../demo-assets/images/sequence-logo-small.png" alt="Sequence" /> Theme</a>: Modern Slide In</h1></li>
</ul>
</div>
<ul id="share">
<li class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="IanLunn" data-related="IanLunn" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<li class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.sequencejs.com%2Fthemes%2Fapple-style%2F&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:21px;" allowTransparency="true"></iframe></li>
<li class="twitter"><g:plusone size="medium" annotation="none"></g:plusone></li>
<li class="hire"><a href="http://www.ianlunn.co.uk/" title="Ian Lunn Design"><img src="http://www.ianlunn.co.uk//demo-assets/hire-ian.png" alt="Ian Lunn Design"></a></li>
<li class="twitter"><div class="twitter-follow-button"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false">Follow @IanLunn</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></li>
</ul>
</div>
<!--//code for the demo overlay and details, not needed for the demo to work-->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.