Permalink
Browse files

v0.2 implemented a preloader (with lots of options), a cycle option a…

…nd an option that prevents animations from reversing when navigating backwards
  • Loading branch information...
1 parent ed02766 commit fa6d524cd7cc472285e7e80d9ab9d17ef19716b8 @IanLunn committed Feb 28, 2012
View
@@ -8,4 +8,5 @@ inc/*
images/*
css/*
_notes/*
-themes/demo-theme/*
+themes/demo-theme/*
+*/Raw Files
@@ -28,7 +28,7 @@ body{
min-width: 960px;
position: fixed;
width: 100%;
- z-index: 1000;
+ z-index: 99999999;
color: white;
font-size: 1.2em;
padding: 10px 0 5px 0;

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -55,8 +55,9 @@ table {
#header {
background: white;
- border-bottom: solid 3px #ccc;
+ height: 600px;
overflow: hidden;
+ position: relative;
width: 100%;
}
@@ -98,6 +99,157 @@ h3 {
bottom: 20px;
}
+#sequence-preloader {
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ z-index: 999999;
+}
+
+@keyframes "preload" {
+ 0% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+ 50% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+ opacity: 1;
+ }
+ 100% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+
+}
+
+@-moz-keyframes preload {
+ 0% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+ 50% {
+ filter: alpha(opacity=100);
+ opacity: 1;
+ }
+ 100% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+
+}
+
+@-webkit-keyframes "preload" {
+ 0% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+ 50% {
+ filter: alpha(opacity=100);
+ opacity: 1;
+ }
+ 100% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+}
+
+@-ms-keyframes "preload" {
+ 0% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+ 50% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+ opacity: 1;
+ }
+ 100% {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+}
+
+@-o-keyframes "preload" {
+ 0% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+ 50% {
+ filter: alpha(opacity=100);
+ opacity: 1;
+ }
+ 100% {
+ filter: alpha(opacity=0);
+ opacity: 0;
+ }
+}
+
+
+#sequence-preloader img {
+ background: #ff9933;
+
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ display: inline-block;
+ height: 12px;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ position: relative;
+ top: -50%;
+ width: 12px;
+
+ -webkit-animation: preload 1s infinite;
+ -moz-animation: preload 1s infinite;
+ -ms-animation: preload 1s infinite;
+ -o-animation: preload 1s infinite;
+ animation: preload 1s infinite;
+}
+
+.preloading {
+ height: 12px;
+ margin: 0 auto;
+ top: 50%;
+ position: relative;
+ width: 48px;
+}
+
+#sequence-preloader img:nth-child(2) {
+ -webkit-animation-delay: .15s;
+ -moz-animation-delay: .15s;
+ -ms-animation-delay: .15s;
+ -o-animation-delay: .15s;
+ animation-delay: .15s;
+}
+
+#sequence-preloader img:nth-child(3) {
+ -webkit-animation-delay: .3s;
+ -moz-animation-delay: .3s;
+ -ms-animation-delay: .3s;
+ -o-animation-delay: .3s;
+ animation-delay: .3s;
+}
+
+.preloading-complete {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transition-duration: 1s;
+ -moz-transition-duration: 1s;
+ -o-transition-duration: 1s;
+ -ms-transition-duration: 1s;
+ transition-duration: 1s;
+}
+
+
.iphone{
left: -450px;
opacity: 1;
@@ -259,7 +411,7 @@ h3 {
.ipad {
left: -450px;
position: absolute;
- top: 700px;
+ top: 800px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
@@ -9,7 +9,7 @@
<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.2/jquery.min.js"></script>
+ <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"));
@@ -21,13 +21,20 @@
var options = {
nextButton: false,
prevButton: false,
- autoPlayDelay: 3000,
- pauseOnHover: false,
- animateStartingFrameIn: true,
+ autoPlayDelay: 3000,
+ hidePreloaderDelay: 500,
+ hidePreloaderusingCSS: false,
+ pauseOnHover: true,
+ //pauseIcon: true,
+ animateStartingFrameIn: true,
+ autoPlayDirection: 1,
delayDuringOutInTransitions: 750,
keysNavigate: true,
touchEnabled: false,
- startingFrameID: 1,
+ startingFrameID: 1,
+ preloader: true,
+ prependPreloader: true,
+ hidePreloaderDelay: 500,
fallbackTheme: {
speed: 500
}
@@ -49,6 +56,7 @@
})();
</script>
+ <style></style>
</head>
<body>
<!--code for the demo overlay and details, not needed for the demo to work-->
@@ -64,7 +72,7 @@
<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:50px; height:21px;" allowTransparency="true"></iframe></li>
<li class="twitter"><g:plusone size="medium" annotation="none"></g:plusone></li>
- <li class="hire"><p><span>A product of </span><a href="http://www.ianlunn.co.uk/" title="Hire Ian Lunn Design"><img src="http://www.ianlunn.co.uk//demo-assets/hire-ian.png" alt="Hire Ian Lunn Design"></a></p></li>
+ <li class="hire"><p><span>A product of </span><a href="http://www.ianlunn.co.uk/" title="Hire Ian Lunn Design"><img src="http://www.ianlunn.co.uk/demo-assets/hire-ian.png" alt="Hire Ian Lunn Design"></a></p></li>
</ul>
</div>
<!--//code for the demo overlay and details, not needed for the demo to work-->
@@ -84,6 +84,10 @@ small{
width: 450px;
}
+#sequence-preloader{
+ background: white;
+}
+
.class,.sequence-class {
font-size: 0.8em;
}
@@ -84,6 +84,10 @@ body {
width: 960px;
}
+#sequence-preloader{
+ background: #d9d9d9;
+}
+
#nav {
bottom: 0;
display: none;
@@ -24,6 +24,9 @@
autoPlayDirection: -1,
nextButton: ".next",
prevButton: ".prev",
+ preloader: true,
+ keysNavigate: true,
+ prependPreloader: true,
keysNavigate: true,
prependNextButton: false,
prependPrevButton: false,
@@ -32,35 +35,28 @@
delayDuringOutInTransitions: 500,
touchEnabled: false,
startingFrameID: 1,
- cycle: true
- };
-
- var sequence = $("#sequence").sequence(options).data("sequence");
-
- $("#nav").show();
-
- $("#nav li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
-
- $(".next, .prev").click(function(){
- $("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
- $("#nav li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
- });
-
- $(window).bind("keydown", function(e){
- if(e.keyCode == 37 || e.keyCode == 39){
+ cycle: true,
+ afterPreload: function(){
+ $("#nav").fadeIn(100);
+ $("#nav li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
+ },
+ beforeNextFrameAnimatesIn: function(){
$("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
$("#nav li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
}
- });
+ };
+
+ var sequence = $("#sequence").sequence(options).data("sequence");
$("#nav li").click(function(){
if(!sequence.active){
$("#nav li").children("img").removeClass("active");
$(this).children("img").addClass("active");
- sequence.goTo($(this).index()+1);
+ sequence.nextFrameID = $(this).index()+1;
+ sequence.goTo(sequence.nextFrameID);
}
});
- })
+ });
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
Oops, something went wrong.

0 comments on commit fa6d524

Please sign in to comment.