Update Black Friday Vue School banner

vuejs · yyx990803 · Nov 18, 2021 · Nov 8, 2021 · Nov 16, 2021 · Nov 16, 2021
commit d66b7bc959f0e6cb58cfcd15e0c12ca94749a2e3
diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs
@@ -1,4 +1,25 @@
+<%
+
+const coins = [
+  { id: 'js', direction: 'left' },
+  { id: 'ts', direction: 'right' },
+  { id: 'vue', direction: 'left' },
+  { id: 'vuex', direction: 'left' },
+  { id: 'nuxt', direction: 'right' }
+]
+
+%>
+
 <a id="vs" class="vs-hidden" href="https://vueschool.io/sales/blackfriday?friend=vuejs" target="_blank" rel="noreferrer">
+  <div class="vs-blackfriday-coins">
+  <% for (let i = 0; i < coins.length; i++) { %>
+  <% const coin = coins[i] %>
+    <img
+      alt="<%- coin.id %>"
+      src="<%- `/images/banners/tech-coin-${coin.id}.png` %>"
+      class="<%- ['vs-blackfriday-coin', coin.id, coin.direction].join(' ') %>">
+  <% } %>
+  </div>
   <div class="vs-core">
     <div class="vs-logo">
       <img src="/images/banners/vueschool_blackfriday_logo.svg">

diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
@@ -65,10 +65,9 @@ body.has-vs-banner
   @media (min-width: 680px)
     justify-content: center
     min-height: $vs-banner-height-desktop
-    background-image: url(/images/banners/vueschool_blackfriday_background_tablet.svg)
   @media (min-width: 900px)
-    position: static
-    background-image: url(/images/banners/vueschool_blackfriday_background_desktop.svg)
+    position: relative
+    background-image: none
 
   &.vs-hidden
     display: none
@@ -126,4 +125,81 @@ body.has-vs-banner
         padding: 10px
         right: 20px
       &:hover
-        color: #56D8FF
+        color: #56D8FF
+
+.vs-blackfriday-coins {
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+.vs-blackfriday-coin {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .vs-blackfriday-coins {
+    background-image: url(/images/banners/vueschool_blackfriday_background_tablet.svg);
+    background-position: center;
+    background-size: cover;
+  }
+}
+
+@media (min-width: 1024px) {
+  .vs-blackfriday-coins {
+    background: transparent;
+  }
+
+  #vs:hover .vs-blackfriday-coin.left {
+    transform: translateX(-600px);
+    transition: transform 30s linear;
+  }
+
+  #vs:hover .vs-blackfriday-coin.right {
+    transform: translateX(600px);
+    transition: transform 30s linear;
+  }
+
+  .vs-blackfriday-coin {
+    display: inline-block;
+    position: absolute;
+    transition: transform 5s linear;
+    transform: translateX(0);
+  }
+
+  .vs-blackfriday-coin.js {
+    width: 43px;
+    top: 32px;
+    left: calc(50% - 341px);
+  }
+
+  .vs-blackfriday-coin.ts {
+    top: 0;
+    left: 0;
+    width: 54px;
+    left: calc(50% + 457px);
+  }
+
+  .vs-blackfriday-coin.vue {
+    top: 18px;
+    width: 60px;
+    left: calc(50% + 586px);
+  }
+
+  .vs-blackfriday-coin.vuex {
+    top: 23px;
+    left: 0;
+    width: 56px;
+    left: calc(50% - 620px);
+  }
+
+  .vs-blackfriday-coin.nuxt {
+    top: 10px;
+    width: 48px;
+    left: calc(50% - 474px);
+  }
+}
diff --git a/themes/vue/source/images/banners/tech-coin-js.png b/themes/vue/source/images/banners/tech-coin-js.png
diff --git a/themes/vue/source/images/banners/tech-coin-nuxt.png b/themes/vue/source/images/banners/tech-coin-nuxt.png
diff --git a/themes/vue/source/images/banners/tech-coin-ts.png b/themes/vue/source/images/banners/tech-coin-ts.png
diff --git a/themes/vue/source/images/banners/tech-coin-vue.png b/themes/vue/source/images/banners/tech-coin-vue.png
diff --git a/themes/vue/source/images/banners/tech-coin-vuex.png b/themes/vue/source/images/banners/tech-coin-vuex.png
diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg b/themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg