animations, links and parallax

steeminator3000 · Sep 19, 2019 · 30b1f5b · 30b1f5b
1 parent 4f88c03
commit 30b1f5b
Show file tree

Hide file tree

Showing 25 changed files with 677 additions and 44 deletions.
diff --git a/css/dtube.css b/css/dtube.css
@@ -16,6 +16,19 @@ a {
   color: white;
 }
 
+.illus6count{
+  transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+  position: absolute;
+  top: 184px;
+  left: 75px;
+  font-size: 32px;
+  font-weight: 900;
+  background: -webkit-linear-gradient(#eee, #a2a2a2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 28px;
+  text-shadow: 0px 0px 83px black;
+}
 
 .nav-link:hover{
   color: red!important;
@@ -621,6 +634,9 @@ section{
 
 
 @media screen and (min-width: 992px) {
+
+
+
   .timeline {
     left:30%;
   }
@@ -681,7 +697,33 @@ section{
   }
 }
 
+@media screen and (min-width: 992px) and (max-width: 1200px) {
+
+
+  .illus6count{
+    transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+    position: absolute;
+    top: 154px;
+    left: 63px;
+    font-size: 23px;
+    letter-spacing: 26px;
+  }
+
+}
+
 @media screen and (min-width: 641px) and (max-width:  991px) {
+
+
+  .illus6count{
+    transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+    position: absolute;
+    top: 224px;
+    left: 90px;
+    font-size: 38px;
+    letter-spacing: 34px;
+  }
+
+
   .timeline {
     left:15%;
   }
@@ -726,8 +768,47 @@ section{
 }
 
 
+@media screen and (min-width: 200px) and (max-width: 500px) {
+.illus6count{
+  transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+  position: absolute;
+  top: 169px;
+  left: 69px;
+  font-size: 28px;
+  letter-spacing: 26px;
+}
+
+
+}
+@media screen and (min-width: 501px) and (max-width: 640px) {
+.illus6count{
+  transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+  position: absolute;
+  top: 210px;
+  left: 82px;
+  font-size: 38px;
+  letter-spacing: 32px;
+}
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1679px) {
+  .illus6count{
+    transform: translate(0%,0%) skew(50deg) rotate(-19deg);
+    position: absolute;
+    top: 162px;
+    left: 64px;
+    font-size: 25px;
+    letter-spacing: 27px;
+  }
+  }
+
+
+
 @media screen and (min-width: 200px) and (max-width: 640px) {
 
+
+
+
   .illus8{
     height: 200px;
   }

diff --git a/img/Export/Illus_18_base.png b/img/Export/Illus_18_base.png
diff --git a/img/Export/Illus_18_top.png b/img/Export/Illus_18_top.png
diff --git a/img/Export/Illus_19_base.png b/img/Export/Illus_19_base.png
diff --git a/img/Export/Illus_19_top.png b/img/Export/Illus_19_top.png
diff --git a/img/Export/Illus_19_top1.png b/img/Export/Illus_19_top1.png
diff --git a/img/Export/Illus_1_base.png b/img/Export/Illus_1_base.png
diff --git a/img/Export/Illus_1_shadow.png b/img/Export/Illus_1_shadow.png
diff --git a/img/Export/Illus_1_top.png b/img/Export/Illus_1_top.png
diff --git a/img/Export/Illus_6_base.png b/img/Export/Illus_6_base.png
diff --git a/img/Export/Illus_6_top.png b/img/Export/Illus_6_top.png
diff --git a/img/Export/Illus_7_base.png b/img/Export/Illus_7_base.png
diff --git a/img/Export/Illus_7_bottom.png b/img/Export/Illus_7_bottom.png
diff --git a/img/Export/Illus_7_top.png b/img/Export/Illus_7_top.png
diff --git a/img/Export/Illus_7_top1.png b/img/Export/Illus_7_top1.png
diff --git a/img/Export/Illus_7_top2.png b/img/Export/Illus_7_top2.png
diff --git a/img/Export/logo-omicrono.png b/img/Export/logo-omicrono.png
diff --git a/img/Export/logo-yahoo.png b/img/Export/logo-yahoo.png
diff --git a/img/Export/logo_bloomberg.png b/img/Export/logo_bloomberg.png
diff --git a/img/Export/logo_fossbytes.png b/img/Export/logo_fossbytes.png
diff --git a/img/Export/logo_polygon.png b/img/Export/logo_polygon.png
diff --git a/img/Export/logo_wired.png b/img/Export/logo_wired.png
diff --git a/index.html b/index.html
@@ -159,7 +159,7 @@ <h1 class="title m-0">
 
   <!-- Model -->
   <section id="model">
-    <div class="row middle container">
+    <div  class="row middle container">
       <div class="row">
         <div class="col-lg-7">
           <h2 class="section-heading text-uppercase">A new model: </h2>
@@ -172,9 +172,10 @@ <h3 class="section-subheading text-muted mb-1"> the social blockchain</h3>
             DTube is ad-free, 100% powered by the community and 90% of the value created goes to its users.
           </div>
         </div>
-        <div class="col-lg-4 ml-5 mt-5">
-          <img src="img/Export/Illus_1.png" class="fadeIn skrollable skrollable-between" data-900-top="opacity: 0.2;top: 96px;transform:translateY(190px) scale(0.5);"
-          data-400-top="opacity: 1;bottom: 61px;transform:translateY(0px) scale(1);" >
+        <div  class="parallax_content col-lg-4 ml-5 mt-5">
+            <img src="img/Export/Illus_1_shadow.png" class="layer" data-depth="0.5">
+          <img src="img/Export/Illus_1_base.png" class="layer" data-depth="1">
+          <img src="img/Export/Illus_1_top.png" class="layer" data-depth="0.5">
         </div>
         <a class="nav-link js-scroll-trigger next" href="#ahit">
           <div class="arrow a"> </div>
@@ -185,13 +186,13 @@ <h3 class="section-subheading text-muted mb-1"> the social blockchain</h3>
   </section>
 
   <section id="ahit" class="bg-light">
-    <div class="row">
-      <div class="col-lg-12 text-center">
-        <h2 class="section-heading text-center">Dtube is <span class="section-subheading ">already a hit</span></h2>
-        <h4 class="section-sub text-mute text-uppercase">in 20 months</h4>
-      </div>
-    </div>
     <div class="row middle container">
+        <div class="container">
+            <div class="col-lg-12 text-center">
+              <h2 class="section-heading text-center">Dtube is <span class="section-subheading ">already a hit</span></h2>
+              <h4 class="section-sub text-mute text-uppercase">in 20 months</h4>
+            </div>
+          </div>
       <div class="row eight-cols mt-5 text-center">
         <div class="col-sm-3 mt-5 wow bounceInUp" data-wow-delay="0s" data-wow-duration="2s">
             <img class="imgtrust"   src="img/Export/Illus_2.png" >
@@ -232,8 +233,10 @@ <h3 class="section-subheading text-muted mb-3"> DTube Chain </h3>
           Users on DTube (DTubers) are <strong> rewarded with DTube Coins</strong> each time they publish an original
           content or share a video from the web but also for voting, tagging and commenting a video.
         </div>
-        <div class="col-lg-4 ml-5 mt-5">
-          <img src="img/Export/Illus_6.png">
+        <div class="parallax_content col-lg-4 ml-5 mt-5">
+          <img src="img/Export/Illus_6_base.png" class="layer" data-depth="0">
+          <div class="illus6count">00566</div>
+          <img src="img/Export/Illus_6_top.png" class="layer" data-depth="0.5">
         </div>
         <a class="nav-link js-scroll-trigger next" href="#trust">
           <div class="arrow a"> </div>
@@ -260,8 +263,12 @@ <h3 class="section-subheading text-muted mb-3"> DTube Chain </h3>
   <section id="trust" class="bg-light">
     <div class="row middle container">
       <div class="row">
-        <div class="col-lg-6">
-          <img src="img/Export/Illus_7.png">
+        <div  class="parallax_content col-lg-6">
+            <img src="img/Export/Illus_7_bottom.png" class="layer" data-depth="0.3">
+          <img src="img/Export/Illus_7_base.png" class="layer" data-depth="0.1">
+          <img src="img/Export/Illus_7_top1.png" class="layer" data-depth="-0.2">
+          <img src="img/Export/Illus_7_top.png" class="layer" data-depth="0.4">
+          <img src="img/Export/Illus_7_top2.png" class="layer" data-depth="0.1">
         </div>
         <div class="col-lg-6 text-center">
           <h2 class="section-heading text-right">A new ecosystem built on Trust, <span
@@ -367,18 +374,18 @@ <h2 class="section-heading text-right">A platform <span class="section-subheadin
         </div>
         <div class="col-lg-5 illus8 mt-5">
           <img src="img/Export/Illus_8_base.png" class="abs fadeIn skrollable skrollable-between" 
-          data-900-top="opacity: 1;transform:translateY(-400px) translateX(0px) scale(0.5);"
+          data-800-top="opacity: 1;transform:translateY(-400px) translateX(0px) scale(0.5);"
           data-650-top="opacity: 1;transform:translateY(0px) translateX(0px) scale(1);">
           <img src="img/Export/Illus_8_mega.png" class="abs fadeIn skrollable skrollable-between" 
-          data-800-top="opacity: 0.2;transform:translateY(400px) translateX(0px) scale(0.5);"
+          data-700-top="opacity: 0.2;transform:translateY(400px) translateX(0px) scale(0.5);"
           data-400-top="opacity: 1;transform:translateY(0px) translateX(0px) scale(1);">
           <img src="img/Export/Illus_8_wave.png" class="abs fadeIn skrollable skrollable-between" 
           data-500-top="opacity: 0.2;transform:translateY(0px) translateX(300px) scale(0.5);"
           data-300-top="opacity: 1;transform:translateY(0px) translateX(0px) scale(1);">
           <img src="img/Export/Illus_8_cross.png" class="abs fadeIn skrollable skrollable-between" 
 
-          data-400-top="opacity: 0;transform:translateY(0px) translateX(0px) scale(1);"
-          data-250-top="opacity: 1;transform:translateY(0px) translateX(0px) scale(1);"
+          data-600-top="opacity: 0;transform:translateY(0px) translateX(0px) scale(1);"
+          data-230-top="opacity: 1;transform:translateY(0px) translateX(0px) scale(1);"
           >
         </div>
       </div>
@@ -420,7 +427,8 @@ <h3 class="section-subheading text-muted mb-3"> the curator </h3>
           </div>
         </div>
         <div class="col-lg-4 ml-5 mt-5">
-          <img src="img/Export/Illus_18.png" class="wow bounceInRight">
+          <img src="img/Export/Illus_18_base.png" class="wow slideInRight abs">
+          <img src="img/Export/Illus_18_top.png" class="wow zoomInLeft" data-wow-delay="0.5s">
         </div>
         <a class="nav-link js-scroll-trigger next" href="#protecting">
           <div class="arrow a"> </div>
@@ -435,8 +443,12 @@ <h3 class="section-subheading text-muted mb-3"> the curator </h3>
   <section id="protecting" class="bg-light">
     <div class="row middle container">
       <div class="row justify-content-md-center">
-        <div class="col-lg-4">
-          <img src="img/Export/Illus_19.png" class="wow bounceInLeft">
+        <div class="col-lg-6">
+          <img src="img/Export/Illus_19_base.png" class="wow slideInLeft abs">
+          <img src="img/Export/Illus_19_top1.png" class="wow bounceInRight abs" data-wow-delay="1s">
+
+          <img src="img/Export/Illus_19_top.png" class="wow zoomInRight" data-wow-delay="0.5s">
+
         </div>
         <div class="col-lg-6 text-right">
           <h2 class="section-heading text-right">Protecting <span class="section-subheading ">creator’s
@@ -777,15 +789,15 @@ <h2 class="section-heading  text-center"> The DTube Coin: <span class="section-s
           <h2 class="section-heading  text-center">DTube Coin distribution: <span class="section-subheading ">how it
               works</span></h2>
         </div>
-        <div class=" col-md-auto p-5"> <img height="auto" width="auto" src="img/Export/Illus_10.png">
+        <div class=" col-md-auto p-5 wow fadeInUp"  data-wow-delay="0s" data-wow-duration="2s"  data-wow-delay="0s" data-wow-duration="2s"> <img height="auto" width="auto" src="img/Export/Illus_10.png">
           <div class="border-top"><strong>The DTube Chain distributes Voting Power (VP) to every DTuber at a rate of +1
               per DTC per hour.</strong></div>
         </div>
-        <div class=" col-md-auto p-5"> <img height="auto" width="auto" src="img/Export/Illus_11.png">
+        <div class=" col-md-auto p-5  wow fadeInUp"  data-wow-delay="0s" data-wow-duration="2s"  data-wow-delay="0s" data-wow-duration="2s"> <img height="auto" width="auto" src="img/Export/Illus_11.png">
           <div class="border-top"> <strong>DTubers spend their VP each time they post, vote, comment or tag a
               content.</strong></div>
         </div>
-        <div class=" col-md-auto p-5"> <img height="auto" width="auto" src="img/Export/Illus_12.png">
+        <div class=" col-md-auto p-5 wow fadeInUp"  data-wow-delay="0s" data-wow-duration="2s"  data-wow-delay="0s" data-wow-duration="2s"> <img height="auto" width="auto" src="img/Export/Illus_12.png">
           <div class="border-top"> <strong>In real time, the blockchain algorithm generates and distributes new DTC to
               users to reward them according to content popularity and freshness.</strong></div>
         </div>
@@ -895,12 +907,12 @@ <h3 class="section-subheading text-muted mb-3"> DTC Initial Exchange Offering (I
           </div>
           <div class="redsquare text-center">
             <div class="big text-red">25,000,000 DTC </div>
-            <div>tokens in total will be sold via several rounds.</div>
+            <div class="mb-3">tokens in total will be sold via several rounds.</div>
           </div>
         </div>
         <div class="col-lg-4 col-md-auto  mt-5 text-center">
           <img class="mb-4 wow pulse" data-wow-iteration="infinite" src="img/Export/Illus_26.png">
-          <a class="btnbuy big m-5" href="https://signup.d.tube/token-sale">Buy DTC now</a>
+          <a class="btnbuy big btnbuy big mt-5 mb-5" href="https://signup.d.tube/token-sale">Buy DTC now</a>
           <img class="mt-4 wow pulse" data-wow-iteration="infinite" src="img/Export/Illus_27.png">
           <div class="mt-2">Sale starts on 20th September.</div>
         </div>
@@ -1060,26 +1072,36 @@ <h3 class="section-subheading text-muted mb-3"> DTube Community</h3>
           <h2 class="section-heading text-uppercase">The press talks </h2>
           <h3 class="section-subheading text-muted mb-3"> about us</h3>
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_medium.png">
-        </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_wired.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+          <a href="https://www.wired.com/story/the-decentralized-internet-is-here-with-some-glitches/" target="_blank">
+            <img src="img/Export/logo_wired.png">
+          </a>
+
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_bloomberg.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+            <a href="https://www.bloomberg.com/news/articles/2018-04-10/youtube-and-facebook-are-losing-creators-to-blockchain-powered-rivals" target="_blank">
+              <img src="img/Export/logo_bloomberg.png">
+            </a>
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_fossbytes.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+            <a href="https://fossbytes.com/best-free-youtube-alternative-sites/" target="_blank">
+              <img src="img/Export/logo_fossbytes.png">
+            </a>
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_adslzone.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+            <a href="https://www.polygon.com/2018/3/7/17087668/steemit-dtube-bitchute-youtube-purge" target="_blank">
+              <img src="img/Export/logo_polygon.png">
+            </a>
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo_korben.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+            <a href="https://finance.yahoo.com/news/next-big-thing-youtube-instagram-143712349.html" target="_blank">
+              <img src="img/Export/logo-yahoo.png">
+            </a>
         </div>
-        <div class="col-4 col-lg-2 col-sm-3 mt-5 text-center">
-          <img src="img/Export/logo-omicrono.png">
+        <div class="col-4 col-lg-3 col-sm-3 mt-5 text-center">
+            <a href="https://www.elespanol.com/omicrono/20180302/alternativa-youtube-blockchain-p2p-solucionar-grandes-fallos/288972684_0.html" target="_blank">
+              <img src="img/Export/logo-omicrono.png">
+            </a>
         </div>
       </div>
       <a class="nav-link js-scroll-trigger next" href="#contact">
@@ -1161,9 +1183,12 @@ <h4>${TITLE}</h4>
 
   <!-- Bootstrap core JavaScript -->
   <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/jquery/jquery.parallax.js"></script>
+
   <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
   <script>
+      var count = 120;
       setInterval(function(){
       var timeLeft = new Date('2019-09-20 18:00:00.000Z').getTime() - new Date().getTime()
       if (timeLeft < 0) {
@@ -1177,14 +1202,15 @@ <h4>${TITLE}</h4>
 
         console.log(countdown)
         $(".countdown").text('Buy DTC in '+countdown)
+
+        $(".illus6count").text(new Array(+5 + 1 - (count + '').length).join('0') + count)
+        count++
       }
     }, 1000);
   </script>
 
   <!-- Plugin JavaScript -->
   <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
   <!-- Custom scripts for this template -->
   <script src="js/dtube.min.js"></script>
@@ -1211,6 +1237,11 @@ <h4>${TITLE}</h4>
         return false;
     }
     });
+
+    if ($('.parallax_content').length > 0 ) {
+	    $('.parallax_content').parallax();
+	  }
+
     // steem.api.setOptions({
     //   url: 'https://api.steemit.com'
     // });

diff --git a/js/dtube.min.js b/js/dtube.min.js
@@ -2,7 +2,7 @@
   "use strict"; a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
     if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
       var o = a(this.hash); if ((o = o.length ? o : a("[name=" + this.hash.slice(1) + "]")).length)
-        return a("html, body").animate({ scrollTop: o.offset().top }, 1e3, "easeInOutExpo"), !1
+        return a("html, body").animate({ scrollTop: o.offset().top }, 1500, "easeInOutExpo"), !1
     }
   }), a(".js-scroll-trigger")
     .click(function () { a(".navbar-collapse").collapse("hide") }), a("body")