Added 2 new themes

themes/basic-crossfade/css/sequencejs-theme.basic-crossfade.css

@@ -0,0 +1,170 @@
+/*
+Theme created for use with Sequence.js (http://www.sequencejs.com/)
+
+Theme: Basic Cross-fade
+Version: 1.0
+Theme Author: Ian Lunn @IanLunn
+Author URL: http://www.ianlunn.co.uk/
+Theme URL: http://www.sequencejs.com/themes/basic-crossfade/
+
+This is a FREE theme and is available under a MIT License:
+http://www.opensource.org/licenses/mit-license.php
+
+Sequence.js and its dependencies are (c) Ian Lunn Design 2013 unless otherwise stated.
+*/
+/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* !CSS RESET */
+/* prefix declarations */
+/* THEME STYLES */
+/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
+#sequence.sequence-fallback {
+  overflow: hidden;
+}
+
+#sequence {
+  /* the Sequence container */
+  position: absolute;
+  /* required - makes the position of animated elements relative to the Sequence element */
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+#sequence > .sequence-canvas {
+  /* required - make the Sequence canvas the same height and width as the container */
+  height: 100%;
+  width: 100%;
+}
+#sequence > .sequence-canvas > li {
+  /* each Sequence frame */
+  position: absolute;
+  /* required - allows Sequence to change the z-index of frames, so the active frame is always on top */
+  width: 100%;
+  /* required - makes the frame the same width as the container */
+  height: 100%;
+  /* required - makes the frame the same height as the container */
+  z-index: 1;
+  /* required - allows Sequence to change the z-index of frames, so the active frame is always on top */
+}
+#sequence > .sequence-canvas li > * {
+  /* each top level element to be animated */
+  position: absolute;
+  /* required - make each animated element within a Sequence frame position absolute so their left/right/top/bottom can be manipulated */
+}
+#sequence .logo {
+  position: absolute;
+  z-index: 10;
+  bottom: 20px;
+  right: 20px;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -ms-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+}
+#sequence .logo:hover {
+  bottom: 26px;
+}
+#sequence .slide {
+  height: 100%;
+  width: 100%;
+  color: white;
+  text-align: center;
+  font-family: "Ubuntu", serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 1px #333333;
+}
+#sequence .slide h2 {
+  font-size: 6em;
+  padding: .2em;
+}
+#sequence .slide h3 {
+  font-size: 1.6em;
+  line-height: 120%;
+  padding: 1em;
+}
+#sequence .slide1 {
+  background: #3D88EC;
+}
+#sequence .slide2 {
+  background: #009D60;
+}
+#sequence .slide3 {
+  background: #E0483E;
+}
+#sequence .slide {
+  opacity: 0;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -ms-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-property: "opacity";
+  -moz-transition-property: "opacity";
+  -ms-transition-property: "opacity";
+  -o-transition-property: "opacity";
+  transition-property: "opacity";
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+#sequence .animate-in .slide {
+  opacity: 1;
+}
+#sequence .animate-out .slide {
+  opacity: 0;
+}

themes/basic-crossfade/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+		<title>Basic Cross-fade Theme</title>
+		<link rel="stylesheet" media="screen" href="css/sequencejs-theme.basic-crossfade.css" />
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script>
+		 if (typeof jQuery == 'undefined'){
+		    document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%3E'));
+		 }
+		</script>
+		<script src="../../scripts/sequence.jquery.js"></script>
+		<script src="sequencejs-options.basic-crossfade.js"></script>
+	</head>
+	<body>
+		<div id="sequence">
+			<a class="logo" href="http://sequencejs.com/"><img alt="Sequence.js" src="../../images/sequence-logo.svg" /></a>
+			<ul class="sequence-canvas">
+				<li class="animate-in">
+					<div class="slide slide1">
+						<h2>Slide 1</h2>
+						<h3>Basic Cross-fade Theme Created Using Sequence.js</h3>
+					</div>
+				</li>
+				<li>
+					<div class="slide slide2">
+						<h2>Slide 2</h2>
+						<h3>Create Your Own Unique Theme Using Just CSS3</h3>
+					</div>
+				</li>
+				<li>
+					<div class="slide slide3">
+						<h2>Slide 3</h2>
+						<h3>Responsive, Cross Browser, Tons of Features -- Awesome!</h3>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</body>
+</html>

themes/basic-crossfade/scss/partials/mixins.scss

@@ -0,0 +1,8 @@
+/* prefix declarations */
+@mixin prefixed($property, $value) {
+    -webkit-#{$property}: $value;
+       -moz-#{$property}: $value;
+        -ms-#{$property}: $value;
+         -o-#{$property}: $value;
+            #{$property}: $value;
+}

themes/basic-crossfade/scss/partials/reset.scss

@@ -0,0 +1,45 @@
+/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/* !CSS RESET */

themes/basic-crossfade/scss/sequencejs-theme.basic-crossfade.scss

@@ -0,0 +1,123 @@
+/*
+Theme created for use with Sequence.js (http://www.sequencejs.com/)
+
+Theme: Basic Cross-fade
+Version: 1.0
+Theme Author: Ian Lunn @IanLunn
+Author URL: http://www.ianlunn.co.uk/
+Theme URL: http://www.sequencejs.com/themes/basic-crossfade/
+
+This is a FREE theme and is available under a MIT License:
+http://www.opensource.org/licenses/mit-license.php
+
+Sequence.js and its dependencies are (c) Ian Lunn Design 2013 unless otherwise stated.
+*/
+
+//Selector Variables
+$sequenceContainer: "#sequence"; //the container for Sequence
+$sequenceCanvas: ".sequence-canvas"; //the element that contains Sequence's frames
+$animateIn: ".animate-in"; //the animate-in class (can be changed in future versions of Sequence)
+$animateOut: ".animate-out"; //the animate-out class (can be changed in future versions of Sequence)
+$nextButton: ".sequence-next"; //next frame button
+$prevButton: ".sequence-prev"; //previous frame button
+$pauseButton: ".sequence-pause"; //pause button
+$pagination: ".sequence-pagination"; //the element used for pagination
+$whenPaused: ".sequence-paused"; //pause indicator
+$sequencePreloader: ".sequence-preloader"; //the preloader element
+
+@import "partials/reset"; //import Eric Meyer's CSS Reset. Remove this if you have a reset in your main stylesheet
+@import "partials/mixins"; //vendor prefixing mixins
+
+/* THEME STYLES */
+
+/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
+#{$sequenceContainer}.sequence-fallback {
+    overflow: hidden;
+}
+
+#{$sequenceContainer} { /* the Sequence container */
+	position: absolute; /* required - makes the position of animated elements relative to the Sequence element */
+	overflow: hidden;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+
+	> #{$sequenceCanvas} { /* required - make the Sequence canvas the same height and width as the container */
+		height: 100%; 
+		width: 100%;
+	}
+
+	> #{$sequenceCanvas} > li { /* each Sequence frame */
+		position: absolute; /* required - allows Sequence to change the z-index of frames, so the active frame is always on top */
+		width: 100%; /* required - makes the frame the same width as the container */
+		height: 100%; /* required - makes the frame the same height as the container */
+		z-index: 1; /* required - allows Sequence to change the z-index of frames, so the active frame is always on top */
+	}
+
+	> #{$sequenceCanvas} li > * { /* each top level element to be animated */
+		position: absolute; /* required - make each animated element within a Sequence frame position absolute so their left/right/top/bottom can be manipulated */
+	}
+
+	.logo {
+		position: absolute;
+		z-index: 10;
+		bottom: 20px;
+		right: 20px;
+		@include prefixed(transition-duration, .5s);
+	}
+
+	.logo:hover {
+		bottom: 26px;
+	}
+
+	.slide {
+		height: 100%;
+		width: 100%;
+
+		color: white;
+		text-align: center;
+		font-family: "Ubuntu", serif;
+		font-weight: bold;
+		text-transform: uppercase;
+		text-shadow: 1px 1px 1px #333;
+
+		h2 {
+			font-size: 6em;
+			padding: .2em;
+		}
+
+		h3 {
+			font-size: 1.6em;
+			line-height: 120%;
+			padding: 1em;
+		}
+	}
+
+	.slide1 {
+		background: #3D88EC;
+	}
+
+	.slide2 {
+		background: #009D60;
+	}
+
+	.slide3 {
+		background: #E0483E;
+	}
+
+	.slide {
+		opacity: 0;
+		@include prefixed(transition-duration, .5s);
+		@include prefixed(transition-property, "opacity");
+		@include prefixed(transition-timing-function, linear);
+	}
+
+	#{$animateIn} .slide {
+		opacity: 1;
+	}
+
+	#{$animateOut} .slide {
+		opacity: 0;
+	}
+}