Added more examples.

christinecha · Sep 25, 2016 · 210bec7 · 210bec7
1 parent 05c2270
commit 210bec7
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 5 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,7 @@
 /examples/
 /src/
+/assets/
+webpack.config.js
 index.html
 index.js
 index.css
-webpack.config.js
diff --git a/examples/one.html b/examples/one.html
@@ -2,22 +2,37 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>Choreographer-JS | Example One</title>
   </head>
+
   <body>
     <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
       #box {
+        margin: 0 0;
         width: 100%;
         height: 500vh;
         background: black;
         opacity: 0.2;
       }
     </style>
 
-
+    <p>Animating based on scroll location.</p>
     <div id="box"></div>
 
-    <script src="/dist/choreographer.min.js"></script>
+    <script src="../dist/choreographer.min.js"></script>
     <script>
       let choreographer = new Choreographer({
         animations: [

diff --git a/examples/three.html b/examples/three.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Choreographer-JS | Example Three</title>
+  </head>
+
+  <body>
+    <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
+      #box {
+        margin: 0 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: black;
+        opacity: 0.2;
+
+        transition: background-color 0.4s ease-in-out;
+      }
+    </style>
+
+    <p>Multiple animations based on mouse movement.</p>
+    <div id="box"></div>
+
+    <script src="../dist/choreographer.min.js"></script>
+    <script>
+      let choreographer = new Choreographer({
+        animations: [
+          { range: [-1, window.innerWidth], selector: '#box', type: 'scale', style: 'height', from: 100, to: 50, unit: 'vh' },
+          { range: [-1, window.innerWidth / 2], selector: '#box', type: 'scale', style: 'opacity', from: 0.2, to: 1 },
+          { range: [window.innerWidth / 2, window.innerWidth], selector: '#box', type: 'change', style: 'backgroundColor', to: '#00c9ff' },
+        ]
+      })
+
+      window.addEventListener('mousemove', (e) => {
+        choreographer.runAnimationsAt(e.clientX)
+      })
+    </script>
+  </body>
+</html>
diff --git a/examples/two.html b/examples/two.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Choreographer-JS | Example Two</title>
+  </head>
+
+  <body>
+    <style>
+      p {
+        position: fixed;
+        top: 100px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-family: 'Arial', sans-serif;
+        color: white;
+        text-align: center;
+        width: 100%;
+        z-index: 1;
+      }
+
+      #box {
+        margin: 0 0;
+        width: 100vw;
+        height: 100vh;
+        background: black;
+        opacity: 0.2;
+      }
+    </style>
+
+    <p>Animating based on mouse movement.</p>
+    <div id="box"></div>
+
+    <script src="../dist/choreographer.min.js"></script>
+    <script>
+      let choreographer = new Choreographer({
+        animations: [
+          {
+            range: [-1, window.innerWidth],
+            selector: '#box',
+            type: 'scale',
+            style: 'opacity',
+            from: 0.2,
+            to: 1
+          }
+        ]
+      })
+
+      window.addEventListener('mousemove', (e) => {
+        choreographer.runAnimationsAt(e.clientX)
+      })
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "choreographer-js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A simple library to take care of complicated animations.",
   "main": "dist/index.js",
   "scripts": {