BNOTIONS · sconnors · Dec 2, 2014 · Dec 16, 2014 · Dec 17, 2014 · Dec 22, 2014
diff --git a/demo/.DS_Store b/demo/.DS_Store
diff --git a/demo/fish/.DS_Store b/demo/fish/.DS_Store
diff --git a/demo/fish/action.js b/demo/fish/action.js
@@ -0,0 +1,86 @@
+$(function(){
+
+    var simple_1 = new Stint({
+        element: '.fish--1',
+        property: 'left',
+        prop_start: -125,
+        prop_end: 1200,
+        unit: 'px',
+        speed: .15,
+        timeline_start: 65
+    });
+
+
+    var simple_2 = new Stint({
+        element: '.fish--2',
+        property: 'left',
+        prop_start: 900,
+        prop_end: 0,
+        unit: 'px',
+        speed: .05
+    });
+
+
+    var simple_3 = new Stint({
+        element: '.fish--3',
+        property: 'left',
+        prop_start: 175,
+        prop_end: 600,
+        unit: 'px',
+        speed: .25
+    });
+
+
+    var simple_4 = new Stint({
+        element: '.fish--4',
+        property: 'left',
+        prop_start: 800,
+        prop_end: -75,
+        unit: 'px',
+        speed: .25
+    });
+
+
+    var simple_5 = new Stint({
+        element: '.fish--5',
+        property: 'left',
+        prop_start: 400,
+        prop_end: 1000,
+        unit: 'px',
+        speed: .075
+    });
+
+
+    var simple_6 = new Stint({
+        element: '.fish--6',
+        property: 'left',
+        prop_start: 900,
+        prop_end: 100,
+        unit: 'px',
+        speed: .2,
+        timeline: 75
+    });
+
+
+    var simple_7 = new Stint({
+        element: '.fish--7',
+        property: 'left',
+        prop_start: 100,
+        prop_end: 700,
+        unit: 'px',
+        speed: .15,
+        timeline: 70
+    });
+
+
+    var simple_8 = new Stint({
+        element: '.fish--8',
+        property: 'top',
+        prop_start: 1100,
+        prop_end: 0,
+        unit: 'px',
+        speed: .1,
+        timeline: 95
+    });
+
+});        
diff --git a/demo/fish/index.html b/demo/fish/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+
+  <title>scenery.js Demostration - fish</title>
+
+  <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+    <div class="container--fish">
+
+        <div class="fish">
+
+            <div class="content">
+
+                <div class="water">
+                    <div class="water--front"></div>
+                    <div class="water--mid"></div>
+                    <div class="water--back"></div>
+                </div>
+
+                <div class="fish--1"></div>
+                <div class="fish--2"></div>
+                <div class="fish--3"></div>
+                <div class="fish--4"></div>
+                <div class="fish--5"></div>
+                <div class="fish--6"></div>
+                <div class="fish--7"></div>
+                <div class="fish--8"></div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <script src="../libs/jquery-1.10.2.js"></script>
+    <script src="../libs/underscore-1.5.1.js"></script>
+    <script src="../../scenery.js"></script>
+
+    <script src="action.js"></script>
+
+  </body> 
+</html>       
+
+
+
+
diff --git a/demo/fish/style.css b/demo/fish/style.css
@@ -0,0 +1,132 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #0c59b5; }
+
+.container--fish {
+  height: 100em;
+  width: 100%;
+  background: #0c59b5; }
+
+.water, .water--front, .water--mid, .water--back {
+  position: absolute;
+  background: #0c59b5 url(../images/bg_underwater1060.png) no-repeat;
+  height: 600px;
+  width: 100%; }
+
+.water--front {
+  background-position: center top; }
+
+.water--mid {
+  -webkit-animation: water_fade 4s linear infinite;
+  -moz-animation: water_fade 4s linear infinite;
+  animation: water_fade 4s linear infinite;
+  background-position: 30% top; }
+
+.water--back {
+  -webkit-animation: water_fade 7s linear infinite;
+  -moz-animation: water_fade 7s linear infinite;
+  animation: water_fade 7s linear infinite;
+  background-position: 80% top; }
+
+.fish--1, .fish--2, .fish--3, .fish--4, .fish--5, .fish--6, .fish--7, .fish--8 {
+  position: absolute;
+  height: 100px;
+  width: 175px;
+  top: 0;
+  left: 0;
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+  background-position: center center;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  background-size: contain; }
+
+.fish--1 {
+  background-image: url('../images/fish-1.png');
+  top: 600px;
+  left: -125px; }
+
+.fish--2 {
+  top: 400px;
+  left: 900px;
+  background-image: url('../images/fish-2.png'); }
+
+.fish--3 {
+  top: 100px;
+  left: 175px;
+  background-image: url('../images/fish-3.png'); }
+
+.fish--4 {
+  top: 250px;
+  left: 800px;
+  background-image: url('../images/fish-4.png'); }
+
+.fish--5 {
+  top: 1000px;
+  left: 400px;
+  background-image: url('../images/fish-5.png'); }
+
+.fish--6 {
+  top: 900px;
+  left: 900px;
+  background-image: url('../images/fish-6.png'); }
+
+.fish--7 {
+  top: 800px;
+  left: 100px;
+  background-image: url('../images/fish-7.png'); }
+
+.fish--8 {
+  top: 1100px;
+  left: 300px;
+  background-image: url('../images/fish-8.png');
+  font-family: sans-serif;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg); }
+  .fish--8:after {
+    content: 'X';
+    position: absolute;
+    height: 24px;
+    width: 24px;
+    top: 24px;
+    left: 29px;
+    color: #000;
+    font-size: 1.25em;
+    text-transform: uppercase;
+    font-weight: bold; }
+
+/* animations */
+@-webkit-keyframes water_fade {
+  0% {
+    opacity: 0; }
+
+  50% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@-moz-keyframes water_fade {
+  0% {
+    opacity: 0; }
+
+  50% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@keyframes water_fade {
+  0% {
+    opacity: 0; }
+
+  50% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
diff --git a/demo/images/bg_underwater.png b/demo/images/bg_underwater.png
diff --git a/demo/images/bg_underwater1060.png b/demo/images/bg_underwater1060.png
diff --git a/demo/images/fish-1.png b/demo/images/fish-1.png
diff --git a/demo/images/fish-2.png b/demo/images/fish-2.png
diff --git a/demo/images/fish-3.png b/demo/images/fish-3.png
diff --git a/demo/images/fish-4.png b/demo/images/fish-4.png
diff --git a/demo/images/fish-5.png b/demo/images/fish-5.png
diff --git a/demo/images/fish-6.png b/demo/images/fish-6.png
diff --git a/demo/images/fish-7.png b/demo/images/fish-7.png
diff --git a/demo/images/fish-8.png b/demo/images/fish-8.png
diff --git a/demo/images/planet-1.png b/demo/images/planet-1.png
diff --git a/demo/images/planet-2.png b/demo/images/planet-2.png
diff --git a/demo/images/planet-3.png b/demo/images/planet-3.png
diff --git a/demo/images/planet-4.png b/demo/images/planet-4.png
diff --git a/demo/images/planet-49.png b/demo/images/planet-49.png
diff --git a/demo/images/planet-5.png b/demo/images/planet-5.png
diff --git a/demo/images/planet-6.png b/demo/images/planet-6.png
diff --git a/demo/images/planet-7.png b/demo/images/planet-7.png
diff --git a/demo/images/planet-8.png b/demo/images/planet-8.png
diff --git a/demo/images/sun-happy.png b/demo/images/sun-happy.png
diff --git a/demo/images/sun.png b/demo/images/sun.png
diff --git a/demo/space/.DS_Store b/demo/space/.DS_Store