Permalink
Browse files

added animated ant workers, probs with redrawing

  • Loading branch information...
1 parent faaa928 commit 39d3e5664c5ff24ad5d36f31c4fecc9468d03a7d @michelleboisson committed Apr 26, 2012
Showing with 4,541 additions and 12 deletions.
  1. +4,463 −0 Resources/ant-worker.ai
  2. BIN images/ant-walking.png
  3. +1 −0 index.html
  4. +30 −11 scripts.js
  5. +43 −1 style.css
  6. +4 −0 test.html
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -8,6 +8,7 @@
<body id="comic">
<div id="panelContainer">
+
<div id="parachute"></div>
<div id="emoanthair"></div>
<div id="dadhair"></div>
View
@@ -51,7 +51,8 @@ var Scenes = {"comic": [
scrollarea: 0,
parachute: "images/parachute2.png",
emohair:"images/emohair2.png",
- dadhair:"images/dadhair2.png"
+ dadhair:"images/dadhair2.png",
+ ants: true
},
{
@@ -63,7 +64,8 @@ var Scenes = {"comic": [
scrollarea: 0,
parachute: "images/parachute2.png",
emohair:"images/emohair3.png",
- dadhair:"images/dadhair2.png"
+ dadhair:"images/dadhair2.png",
+ ants: true
},
{
name: "shhh",
@@ -96,7 +98,8 @@ var Scenes = {"comic": [
scrollarea: 0,
parachute: "",
emohair:"images/emohair6.png",
- dadhair:"images/dadhair4.png"
+ dadhair:"images/dadhair4.png",
+ ants: true
},
{
name: "look",
@@ -119,7 +122,8 @@ var Scenes = {"comic": [
scrollarea: 0,
parachute: "images/parachute2.png",
emohair:"images/emohair3.png",
- dadhair:"images/dadhair2.png"
+ dadhair:"images/dadhair2.png",
+ ants: true
},
{
name: "queen",
@@ -141,7 +145,8 @@ var Scenes = {"comic": [
scrollarea: 300,
parachute: "images/parachute2.png",
emohair:"images/emohair2.png",
- dadhair:"images/dadhair2.png"
+ dadhair:"images/dadhair2.png",
+ ants: true
},
@@ -153,19 +158,20 @@ $(document).ready(function(){
document.getElementById("panelContainer").style.height=windowHeight+"px";
for(var i=0; i< Scenes.comic.length; i++) {
+ //saving the total height of the comic
if(Scenes.comic[i].dialogue.length>0){
totalScrollArea+=Scenes.comic[i].dialogue.length*10;
}
else{
totalScrollArea+=Scenes.comic[i].scrollarea;
- }
- Scenes.comic[i].scrollarea=totalScrollArea-windowHeight+60;
+ }
+ //set each panels's scrollarea
+ Scenes.comic[i].scrollarea=totalScrollArea-windowHeight+60;
}
document.getElementById("comic").style.height = totalScrollArea+"px";
document.getElementById("panelContainer").style.backgroundImage="url("+Scenes.comic[0].background+")";
Scenes.comic[8].dialogue=". . .";
-
});
var scrollTimer = -1;
@@ -175,6 +181,7 @@ $(window).bind('scroll', function(){
//controls the scene changes based on user scoll
changeScene();
+
});
@@ -187,8 +194,7 @@ var scrolling = -1;
clearTimeout(scrolling);
clearTimeout(scrollTimer);
}
- console.log(scrollTimer);
- scrollTimer = window.setTimeout("scrollFinished()", 500);
+ scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
@@ -202,12 +208,13 @@ var scrolling = -1;
console.log("started timer... stopped scrolling...")
scrolling=setTimeout(function(){
- console.log("--------------------------------------------------It's been 10s, You stopped scrolling! Got bored?");
+ //console.log("--------------------------------------------------It's been 10s, You stopped scrolling! Got bored?");
//jump to beginning of commic
currentScroll = $("#comic").scrollTop(0);
$("#panelContainer").css("background-image", "url("+Scenes.comic[0].background+")");
+ $(".ant").remove();
oldPosition=(Scenes.comic[0].scrollarea);
currentScene=0;
@@ -221,6 +228,18 @@ function changeScene(){
if(currentScroll>Scenes.comic[i-1].scrollarea && currentScroll<=Scenes.comic[i].scrollarea)
{
$("#panelContainer").css("background-image", "url("+Scenes.comic[i-1].background+")");
+
+ //if this scene has ants
+ if ( Scenes.comic[i-1].ants == true){
+ console.log("scene with ants");
+ //for (a=0; a<Math.ceil(Math.random() * 7) + 5; a++){
+ var newanthtml = "<div class=ant></div>";
+ $("#panelContainer").append(newanthtml);
+ //}
+ }else {
+ $(".ant").remove();
+ }
+
oldPosition=(Scenes.comic[i-1].scrollarea);
currentScene=i-1;
}
View
@@ -86,4 +86,46 @@ border-radius: 10px;
#dialogue p{
margin:10px;
font-family: 'UnmaskedBB';
-}
+}
+
+
+@-webkit-keyframes walking {
+ 0%
+ {
+ background-position: -0px 0;
+ }
+
+ 49.99%
+ {
+ background-position: 0px 0px;
+ }
+ 51%
+ {
+ background-position: 0px -57px;
+ }
+ 99.999%
+ {
+ background-position: -0px -57px;
+ }
+ 100%
+ {
+ background-position: -0px 0;
+ }
+}
+
+.ant{
+background: url(images/ant-walking.png) no-repeat;
+background-position: 0 0;
+position:fixed;
+top:20px;
+width:97px;
+height:52px;
+
+-webkit-animation-name: walking;
+-webkit-animation-duration: .3s;
+-webkit-animation-iteration-count: infinite;
+-webkit-animation-timing-function: ease;
+}
+
+
+
View
@@ -1,4 +1,6 @@
<html>
+
+ <head><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body onscroll="bodyScroll();">
<script language="javascript">
@@ -20,6 +22,8 @@
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
+<span class="ant first"></span>
+
</div>
</body>

0 comments on commit 39d3e56

Please sign in to comment.