update demos

fab34 · Jun 19, 2016 · c70831e · c70831e
1 parent 55f973a
commit c70831e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 214 deletions.
diff --git a/demo/async.html b/demo/async.html
@@ -8,35 +8,27 @@
     <link rel="stylesheet" href="../dist/aos.css" />
   </head>
   <body>
-    <div id="aos-demo" class="aos-all">
-      <div class="aos-item" aos="fade-up">
-        <div class="aos-item__inner colored-1"><h3>Lorem ipsum</h3></div>
-      </div>
-      <div class="aos-item" aos="fade-down">
-        <div class="aos-item__inner colored-2"><h3>dolor sit amet</h3></div>
-      </div>
-      <div class="aos-item" aos="zoom-out-down">
-        <div class="aos-item__inner colored-3"><h3>onsectetur adipisicing</h3></div>
-      </div>
-    </div>
+    <div id="aos-demo" class="aos-all"></div>
 
     <script src="../dist/aos.js"></script>
     <script>
       AOS.init({
         easing: 'ease-in-out-sine'
       });
 
-      setInterval(addItem, 1000);
+      setInterval(addItem, 300);
 
-      var itemsCounter = 4;
+      var itemsCounter = 1;
       var container = document.getElementById('aos-demo');
 
       function addItem () {
+        if (itemsCounter > 42) return;
         var item = document.createElement('div');
         item.classList.add('aos-item');
         item.setAttribute('data-aos', 'fade-up');
-        item.innerHTML = '<div class="aos-item__inner colored-' + itemsCounter + '"><h3>Lorem ipsum</h3></div>';
+        item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
         container.appendChild(item);
+        itemsCounter++;
       }
     </script>
   </body>

diff --git a/demo/css/styles.css b/demo/css/styles.css
@@ -1,164 +1,39 @@
-body
-{
-    font-family: Helvetica,Tahoma;
-}*,
+body {
+  font-family: Helvetica,Tahoma;
+}
+
+*,
 *:before,
-*:after
-{
-    box-sizing: border-box;
-}.colored-0
-{
-    background: #1da4e2;
-}.colored-1
-{
-    background: #1ca1dd;
-}.colored-2
-{
-    background: #1c9dd9;
-}.colored-3
-{
-    background: #1b9ad4;
-}.colored-4
-{
-    background: #1b97d0;
-}.colored-5
-{
-    background: #1a94cb;
-}.colored-6
-{
-    background: #1a90c7;
-}.colored-7
-{
-    background: #198dc2;
-}.colored-8
-{
-    background: #188abe;
-}.colored-9
-{
-    background: #1886b9;
-}.colored-10
-{
-    background: #1783b5;
-}.colored-11
-{
-    background: #1780b0;
-}.colored-12
-{
-    background: #167dac;
-}.colored-13
-{
-    background: #1579a7;
-}.colored-14
-{
-    background: #1576a3;
-}.colored-15
-{
-    background: #14739e;
-}.colored-16
-{
-    background: #14709a;
-}.colored-17
-{
-    background: #136c95;
-}.colored-18
-{
-    background: #136991;
-}.colored-19
-{
-    background: #12668c;
-}.colored-20
-{
-    background: #116288;
-}.colored-21
-{
-    background: #115f83;
-}.colored-22
-{
-    background: #105c7f;
-}.colored-23
-{
-    background: #10597a;
-}.colored-24
-{
-    background: #0f5576;
-}.colored-25
-{
-    background: #0f5271;
-}.colored-26
-{
-    background: #0e4f6c;
-}.colored-27
-{
-    background: #0d4b68;
-}.colored-28
-{
-    background: #0d4863;
-}.colored-29
-{
-    background: #0c455f;
-}.colored-30
-{
-    background: #0c425a;
-}.colored-31
-{
-    background: #0b3e56;
-}.colored-32
-{
-    background: #0a3b51;
-}.colored-33
-{
-    background: #0a384d;
-}.colored-34
-{
-    background: #093448;
-}.colored-35
-{
-    background: #093144;
-}.colored-36
-{
-    background: #082e3f;
-}.colored-37
-{
-    background: #082b3b;
-}.colored-38
-{
-    background: #072736;
-}.colored-39
-{
-    background: #062432;
-}.colored-40
-{
-    background: #06212d;
-}.colored-41
-{
-    background: #051e29;
-}.colored-42
-{
-    background: #051a24;
-}.aos-all
-{
-    width: 1000px;
-    max-width: 98%;
-    margin: 10vh auto 0 auto;
-}.aos-item
-{
-    display: inline-block;
-    float: left;
-    width: 33.3333%;
-    height: 300px;
-    padding: 20px;
-}.aos-item__inner
-{
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 30px;
+*:after {
+  box-sizing: border-box;
+}
+
+.aos-all {
+  width: 1000px;
+  max-width: 98%;
+  margin: 10vh auto 0 auto;
+}
+
+.aos-item {
+  display: inline-block;
+  float: left;
+  width: 33.3333%;
+  height: 300px;
+  padding: 20px;
+}
 
-    color: #fff;
+.aos-item__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #1da4e2;
+  line-height: 260px;
+  text-align: center;
+  color: #fff;
 }
 
 @media screen and (max-width: 800px) {
-    .aos-item {
-        width: 50%;
-    }
+  .aos-item {
+    width: 50%;
+  }
 }