tagline transitions

pages/index.vue

@@ -1,11 +1,23 @@
 <template>
-  <ContentPage heading="The Index Page Heading">
-    <BackgroundImageLoader slot="background"
-                           :image-url="currentImageUrl"
-                           @imageLoaded="handleImageLoaded"
-                           @imageLoadError="handleImageLoadError"
-    />
-  </ContentPage>
+  <section class="home">
+    <div class="background background-img">
+      <BackgroundImageLoader slot="background"
+                             :image-url="currentImageUrl"
+                             @imageLoaded="handleImageLoaded"
+                             @imageLoadError="handleImageLoadError"
+      />
+      <div class="background background-overlay"></div>
+    </div>
+    <div class="content">
+      <h1 class="heading">Marc Leopold Photography</h1>
+      <transition name="fade" mode="out-in">
+        <p class="tagline"
+           :key="currentTaglineIndex">
+          {{ taglines[currentTaglineIndex] }}
+        </p>
+      </transition>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -32,6 +44,16 @@ export default {
         'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/image-1.png',
         'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider-4.jpeg',
       ],
+      currentTaglineIndex: -1,
+      taglines: [
+        'the essence of the image',
+        'tagline two',
+        'tagline three',
+        'tagline four',
+        'tagline fove',
+        'tagline soix',
+        'tagline servienne',
+      ],
     }
   },
 
@@ -42,12 +64,17 @@ export default {
         url = this.bgImages[this.currentImageIndex]
       }
       return url
+    },
+
+    tagLine () {
+      return this.currentTaglineIndex > -1 ? this.taglines[this.currentTaglineIndex] : ''
     }
   },
 
   mounted () {
     if (this.bgImages.length > 1) {
       this.setNextIndex()
+      this.nextTagline()
     }
   },
 
@@ -57,9 +84,15 @@ export default {
         this.currentImageIndex < this.bgImages.length - 1 ? this.currentImageIndex + 1 : 0
     },
 
+    nextTagline () {
+      this.currentTaglineIndex =
+        this.currentTaglineIndex < this.taglines.length - 1 ? this.currentTaglineIndex + 1 : 0
+    },
+
     handleImageLoaded () {
       window.setTimeout(() => {
         this.setNextIndex()
+        this.nextTagline()
       }, 6000)
     },
 
@@ -71,4 +104,107 @@ export default {
 </script>
 
 <style scoped lang="scss">
+$heading-height: 4em;
+$tagline-height: 2.5em;
+$padding: 1rem;
+
+.home {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  padding: $site-menu__header-height + $padding $padding $padding;
+
+  font-size: 1rem;
+
+  @media (min-width: $bp__layout) {
+    padding: $padding $padding $padding $site-menu__header-width + $padding;
+  }
+}
+
+.background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.background-img {
+  z-index: -1;
+}
+
+.background-overlay {
+  $color: $color__neutral-100;
+  // $color: red;
+
+  background-color: rgba($color, .4);
+  background: linear-gradient(
+    to bottom left,
+    rgba($color, .1),
+    rgba($color, .5)
+  ),
+  linear-gradient(
+    to bottom,
+    rgba($color, .9),
+    rgba($color, .7) $heading-height * 1.5,
+    rgba($color, .4) $heading-height * 3,
+    rgba($color, 0) $heading-height * 6,
+    rgba($color, 0)
+  ),
+  linear-gradient(
+    to top,
+    rgba($color, .6),
+    rgba($color, 0) $tagline-height * 4,
+    rgba($color, 0)
+  ),
+  linear-gradient(
+    to right,
+    rgba($color, .4),
+    rgba($color, 0) 10%,
+    rgba($color, 0) 90%,
+    rgba($color, .4)
+  );
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 2rem 3rem 1rem;
+
+}
+
+.heading {
+  color: #fff;
+  font-size: $heading-height;
+  @include font-title(400);
+  text-align: center;
+}
+
+.tagline {
+  color: #fff;
+  font-size: $tagline-height;
+  text-align: right;
+  @include font-cursive;
+}
+
+.fade {
+  $timing: .7;
+  &-enter-active {
+    transition: opacity 4s * $timing 1.5s * $timing ease-in;
+  }
+
+  &-leave-active {
+    transition: opacity 2s * $timing ease-out .2s;
+  }
+
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
+}
 </style>